appcache 缓存

在h5新页面里可以添加缓存文件。

配置不变的js 图片等

配置：

在页面html 上添加  manifest="demo.appcache"

manifest文件需要正确的MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置。

(需要在iis里添加文件配置)

appcache配置文件：

CACHE MANIFEST
#v1.1.23
CACHE:
img/u6_07.png
img/b6_03.png
img/s.png
img/jquery.1.9.0.js
http://www.xuanfengge.com/demo/201506/charm-applicationCache/js/zepto.min.js
img/041350519689411.png

NETWORK:
# 不需要缓存的

FALLBACK:
#访问不到的页面 跳转的页面
online.html 404.html

CACHE MANIFEST 文件标识一开始必须是此标识

#v 用来配置更新缓存版本，当需要缓存更新时修改这里的版本就可。这样在下次刷新页面时会重新缓存。

CACHE：表示要缓存的文件

NETWORK 在此标题下列出的文件需要与服务器的链接，且不会被缓存

FALLBACK  在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

一般常用的是缓存文件和404配置。

更新缓存方法：

修改v版本，更新缓存内容。下次刷新时js第一次可以刷新过来。但是html和img需要刷新两次才可更新过来

js更新方法：

window.applicationCache 用来访问缓存对象

app.status获取缓存当前状态

0 :未缓存 1 空闲状态   2：检查中   3：下载中  4：已更新   5：失效

一般使用：

可以在onload内绑定监听

//此监听用来判断是否有缓存文件配置文件

appCache.addEventListener('checking',function(e){
if(e.isTrusted==true){
console.log('有manifest')
}
});

当appcache.status==3 这时可调用update()来更新

//下载的时候周期性的触发，可以通过它获取已经下载的文件个数
appCache.addEventListener('progress',function(e){
//e.total 获取下载总数
//e.loaded 下载的当前数  从0开始 所以下载总数是+1
console.log('progress',e)
});

//当更新成功后触发
appCache.addEventListener('updateready',function(e){
console.log('a')
appCache.swapCache();
//可以在更新完成后再刷新一次，解决页面需要第二次刷新过来的问题
window.location.reload();
});