这篇文章主要是总结之前学过的应用缓存的知识。
应用缓存简介
应用缓存也是html5新增的一大特色,可以创建网站离线版本,为网站提供良好的用户体验。
作用有以下几点:
- 离线游览网站;
- 打开速度快,已经缓存资源不再重新加载;
- 减少服务器压力,只下载更新过的资源;
使用方法
网站应用设置
在网站根目录创建一个manifest.appcache
文件,写入以下内容:
CACHE MANIFEST
声明标识;
#
注释;
CACHE
:缓存的资源路径;
NETWORK
:可填,直接读取的文件,使用通配符*
即可;
FALLBACK
:可填,指定备用页面,当资源无法访问时,使用该页面;
例如:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| CACHE MANIFEST # version 0.0.1 # 声明注释,浏览器根据manifest文件变化来检测是否需要重新加载新文件 # 注释:需要缓存的文件,无论在线与否,均从缓存里读取 /images/logo.png /css/main.css /js/main.js
# 需要特殊声明的缓存文件,也可以都在这里声明 CACHE: /css/os.css /js/jq.js
# 注释:不缓存的文件,无论缓存中存在与否,均从新获取 NETWORK: *
# 注释:获取不到资源时的备选路径,如index.html访问失败,则返回404页面 FALLBACK: index.html 404.html
|
页面中设置
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
| <!DOCTYPE html> <html lang="en" manifest="manifest.appcache"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>manifest</title> <link rel="stylesheet" href="/css/main.css"> </head> <body> <h2>html5应用本地缓存</h2> <p>缓存本页面提供离线游览!</p> <div> <img src="/images/logo.jpg" alt="logo"> </div> <script src="/js/main.js"></script> </body> </html>
|
服务器设置支持
更新离线资源
1 2 3 4 5
| let appCache = window.applicationCache; appCache.onupdateready = function(e) { appCache.swapCache(); window.location.reload(); };
|
Webpack配置离线缓存
下载appcache-webpack-plugin
插件,在配置文件中写入以下内容:
1 2 3 4 5 6 7 8 9 10 11 12
| const AppCachePlugin = require('appcache-webpack-plugin');
plugins: [ new AppCachePlugin({ cache: ['otherAsset.png'], network: ['*'], // 除了声明的缓存资源其他都通过网络访问 fallback: ['index.html', 'error.html'], settings: ['prefer-online'], exclude: ['file.txt', /.*\.html$/], // Exclude file.txt and all .html files output: '/manifest.appcache' }) ]
|