引用清单文件
<html manifest="manifest.appcache">
...
</html>
清单文件结构
CACHE MANIFEST
# update on：2016-06-15 23:22:23 v2
# Explicitly cached 'master entries'.
CACHE:
/favicon.ico
stylesheet.css
images/logo.png
scripts/main.js
# Resources that require the user to be online.
NETWORK:
*
http://api.twitter.com
# offline.jpg will be served in place of all images in images/large/
# offline.html will be served in place of all other .html files
FALLBACK:
images/large/ images/offline.jpg
*.html /offline.html
更新缓存
用户清除了浏览器对您网站的数据存储。
清单文件经过修改。请注意：更新清单中列出的某个文件并不意味着浏览器会重新缓存该资源。清单文件本身必须进行更改。
应用缓存通过编程方式进行更新。
var appCache = window.applicationCache;//浏览器的应用缓存对象
appCache.update(); // Attempt to update the user's cache.
switch (appCache.status) {//缓存的当前状态
case appCache.UNCACHED: // UNCACHED == 0
console.log('UNCACHED');;
break;
case appCache.IDLE: // IDLE == 1
console.log('IDLE');
break;
case appCache.CHECKING: // CHECKING == 2
console.log('CHECKING');
break;
case appCache.DOWNLOADING: // DOWNLOADING == 3
console.log('DOWNLOADING');
break;
case appCache.UPDATEREADY: // UPDATEREADY == 4
console.log('UPDATEREADY');
appCache.swapCache(); // The fetch was successful, swap in the new cache.
break;
case appCache.OBSOLETE: // OBSOLETE == 5
console.log('OBSOLETE');
break;
default:
console.log('UKNOWN CACHE STATUS');
break;
};
// Check if a new cache is available on page load.
window.addEventListener('load', function(e) {
window.applicationCache.addEventListener('updateready', function(e) {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
// Browser downloaded a new app cache.
// Swap it in and reload the page to get the new hotness.
window.applicationCache.swapCache();
if (confirm('A new version of this site is available. Load it?')) {
window.location.reload();
}
} else {
// Manifest didn't changed. Nothing new to server.
}
}, false);
}, false);
/*缓存公用方法*/
var EventUtil = {
addHandler: function(element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
}
};
EventUtil.addHandler(applicationCache, "updateready", function() { //缓存更新并已下载，要在下次进入页面生效
applicationCache.update(); //检查缓存manifest文件是否更新，ps:页面加载默认检查一次。
applicationCache.swapCache(); //交换到新的缓存项中，交换了要下次进入页面才生效
location.reload(); //重新载入页面
});
注意事项
- 站点离线存储的容量限制是5M
- 如果manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程将视为失败，浏览器继续全部使用老的缓存
- 引用manifest的html必须与manifest文件同源，在同一个域下
- 在manifest中使用的相对路径，相对参照物为manifest文件
- CACHE MANIFEST字符串应在第一行，且必不可少
- 系统会自动缓存引用清单文件的 HTML 文件
- manifest文件中CACHE则与NETWORK，FALLBACK的位置顺序没有关系，如果是隐式声明需要在最前面
- FALLBACK中的资源必须和manifest文件同源
- 当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。
- 站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问
- 当manifest文件发生改变时，资源请求本身也会触发更新