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后,更新到最新的应用缓存
文章来源: html5-manifest-缓存的学习