应用程序缓存(Application Cache)为应用带来三个优势:
- 离线浏览 - 用户可在应用离线时使用它们
- 速度 - 已缓存资源加载得更快
- 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
manifest文件的位置在html标签中,
<!DOCTYPE html>
<html manifest="index.manifest">
</html>
manifest 文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容)。
manifest 文件可分为三个部分:
- CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
- NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存
- FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)
下面这个例子:
CACHE MANIFEST
#update at Fri Jun 17 2016 20:02:37 GMT+0800 (CST)
NETWORK:
*
# *表示通配符,#表注释
CACHE:
build/lib.js
style.css
build/app.js
FALLBACK:
/html 404.html
#访问路径 文件
manifest 文件的写入可由gulp等(利用node.js的fs模块)在打包的时候写入
var fs = require('fs');
var workDir = 'demo'; //目录
var cacheFiles = ['build/lib.js', 'build/app.js']; //要缓存的文件其实除了指定,还可以从index.html文件中去匹配src、href
var cacheConArr = ['CACHE MANIFEST','#update at '+new Date(),'','NETWORK:','*','','CACHE:'].concat(cacheFiles).concat(['FALLBACK:','/html 404.html']);
fs.writeFileSync(workDir+'index.manifest',cacheConArr.join('
'));
在首次下载manifest 文件中的缓存,可看到这个
更新缓存
- 用户清空浏览器缓存
- manifest文件被修改
- 由程序来更新应用缓存
window.applicationCache.onupdateready = function(){
location.reload();
}