html5 的缓存应用 manifest="filename.appcache"

启动html5的应用缓存

<!DOCTYPE HTML>
<html manifest="filename.appcache">
</html>

filename.appcache的例子

CACHE MANIFEST
# 版本标识 v1

# 必选 缓存文件
CACHE:
/webapp/html/resource/test.css
/webapp/html/test.html

# 可选 需要联网
NETWORK:
/webapp/html/HCApproval_Main.html
# * 表示全部都需要

# 可选 失败的重定向
# FALLBACK:
# / webapp/html/help.html

更新缓存

浏览器清除缓存

filename.appcache 文件的任意修改，也会触发缓存更新

JS更新缓存

window.addEventListener('load', function(){
        // window.applicationCache.update(); // 手动更新缓存 或者 监听到加载缓存完成事件后 刷新页面
　　window.applicationCache.addEventListener("updateready", function(e){
　　console.log(window.applicationCache.status);
　　setTimeout(function(){
　　　　window.location.reload();
　　}, 3000);
　　});
});

window.applicationCache 对象属性和事件方法

oncached:null
onchecking:null
ondownloading:null
onerror:null
onnoupdate:null
onobsolete:null
onprogress:null
onupdateready:null
status:1

window.applicationCache.status 的几个值

UNCACHED (0)：未启用离线应用
IDLE (1)：已开启离线应用，但本地缓存的资源是最新的，并且未标记为废弃资源
CHECKING (2)：当前更新缓存的状态为“检查中”
DOWNLOADING (3)：当前更新缓存的状态为“下载资源中”
UPDATEREADY (4)：当前更新缓存的状态为“更新完毕”
OBSOLETE (5)：已开启离线应用，但缓存资源都已标记为废弃