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();
});
http://blog.csdn.net/starwmx520/article/details/50417783