先说下使用方法
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后,更新到最新的应用缓存
待续。。。。