html5 manifest 缓存的学习

先说下使用方法

html结构

<html manifest='demo.appcache'>
....
</html>


demo.appcache

CACHE MANIFEST
# 注释:需要缓存的文件,无论在线与否,均从缓存里读取
chched.js
cached.css

# 注释:不缓存的文件,无论缓存中存在与否,均从新获取
NETWORK:
uncached.js
uncached.css

# 注释:获取不到资源时的备选路径,如index.html访问失败,则返回404页面
FALLBACK:
index.html 404.html

侦听缓存的不同状态

window.applicationCache.addEventListener('checking', onChecking);
window.applicationCache.addEventListener('noupdate', onNoupdate);
window.applicationCache.addEventListener('downloading', onDownloading);
window.applicationCache.addEventListener('progress', onProgress);
window.applicationCache.addEventListener('cached', onCached);
window.applicationCache.addEventListener('updateready', onUpdateready);    
window.applicationCache.addEventListener('obsolete', onObsolete);
window.applicationCache.addEventListener('error', onError);
下面是对这些事件的解释

//当前文档对应的applicationCache对象
window.applicationCache

//当前缓存所处的状态,为0~5的整数值,分别对应一个状态,并分别对应一个常量
window.applicationCache.status

window.applicationCache.UNCACHED === 0    //未缓存,比如一个页面没有制定缓存清单,其状态就是UNCACHED
window.applicationCache.IDLE === 1 //空闲,缓存清单指定的文件已经全部被页面缓存,此时状态就是IDLE
window.applicationCache.CHECKING === 2 //页面正在检查当前离线缓存是否需要更新
window.applicationCache.DOWNLOADING === 3 //页面正在下载需要更新的缓存文件
window.applicationCache.UPDATEREADY === 4  //页面缓存更新完毕
window.applicationCache.OBSOLETE === 5  //缓存过期,比如页面检查缓存是否过期时,发现服务器上的.manifest文件被删掉了

//常用API,在后面会稍详细介绍
window.applicationCache.update()  //update方法调用时,页面会主动与服务器通信,检查页面当前的缓存是否为最新的,如不是,则下载更新后的资源
window.applicationCache.swapCache()  //updateready后,更新到最新的应用缓存

待续。。。。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值