header

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 对象属性和事件方法
  1. oncached:null
  2. onchecking:null
  3. ondownloading:null
  4. onerror:null
  5. onnoupdate:null
  6. onobsolete:null
  7. onprogress:null
  8. onupdateready:null
  9. status:1

 

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

 

posted @ 2016-09-23 16:49  loganv  阅读(1740)  评论(0)  编辑  收藏  举报
footer