h5的应用缓存简称为Appcache，是专门为开发离线应用而设计的。Appcache就是从浏览器的缓存中分出来的一块缓存区。要想在这个缓存区保持数据，可以使用一个描述文件(manifest file)，列出要下载和缓存的资源。
描述文件示例：
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html5/ /404.html
CACHE MANIFEST(必须的)后面表示缓存文件，#后面是注释。NETWORK表示每次进入页面都需要加载的文件(不会被缓存)。FALLBACK如果无法建立网络连接，则用"404.html"替代/html5/目录中的所有文件。- 缓存文件路径，需要填写相对路径。
要将秒速文件与页面关联起来，可以在<html>中的manifest属性中指定这个文件的了路径，例如：
<html manifest="/offline.appcache" ></html>
- 以上代码告诉页面，
/offline.appcache中包含这描述文件。- 这个和文件的MIME类型必须是
text/cache-manifest
更新机制
有三种方式更新manifest缓存：
- 用户清空浏览器缓存；
- manifest文件被修改，哪怕是注释（
所以可以通过修改注释来更新文件）- 由程序来更新
相应jsAPI
应用缓存的意图是确保离线时候资源可用，但也有相应的JS Api,applicationCache对象让你知道他都在做什么。
applicationCache对象有一个status常量属性，表示应用缓存的如下状态：
- 0 ：无缓存，没有与页面相关应用缓存。
- 1 ：闲置，应用缓存未得到更新。
- 2 ：检测中，正在下载描述文件并检查更新。
- 3 ：下载中，正在下载描述中指定的资源。
- 4 ：更新完成，已更新资源，且所有资源都下载完毕，可以通过
swapCache()来使用了。- 5 ：废弃，应用缓存的描述文件已经不存在了，因此页面无法再访问应用缓存。
应用缓存还有很多相关的事件，表示其状态的改变，如下：
checking: 在浏览器为应用缓存查找更新时触发。error: 在检查更新或下载资源期间发生错误时触发。noupdate: 在检查描述文件发现文件无变化时触发。downloading: 在开始下载应用缓存资源时触发。progress: 在文件下载应用缓存的过程中持续不断地触发。updateready: 在开始下载应用缓存下载完毕且可以通过swapCache()使用时资触发。cached: 在应用缓存完整可用时触发。
update()
一般来讲，这些事件会随着页面加载按上述顺序依次触发。不过，调用update方法也可以手工干预，让应用缓存为检查更新而触发上述事件。
applicationCache.update();
update()一经调用，应用缓存会去检查描述文件是否更新（触发checking事件），然后就想页面刚刚加载一样，继续执行后续操作。
如果触发了cached事件，说明应用准备就绪，不会在发生其他操作了。
如果触发了updateready事件，说明新版本的缓存已经可用，而这时候你需要调用swapCache()来启用新应用缓存。
window.addEventListener('load', function(e) {
window.applicationCache.addEventListener('updateready', function(e) {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
//UPDATEREADY=4
// Swap it in and reload the page to get the new hotness.
window.applicationCache.swapCache();
if (confirm('A new version of this site is available. Load it?')) {
window.location.reload();
}
} else {
// Manifest didn't changed. Nothing new to server.
}
}, false);
}, false);
注意事项
- 站点离线存储的容量限制是5M
- 如果manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程将视为失败，浏览器继续全部使用老的缓存
- 引用manifest的html必须与manifest文件同源，在同一个域下
- 在manifest中使用的相对路径，相对参照物为manifest文件
- CACHE MANIFEST字符串应在第一行，且必不可少
- 系统会自动缓存引用清单文件的 HTML 文件
- manifest文件中CACHE则与NETWORK，FALLBACK的位置顺序没有关系，如果是隐式声明需要在最前面
- FALLBACK中的资源必须和manifest文件同源
- 当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。
- 站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问
- 当manifest文件发生改变时，资源请求本身也会触发更新
applicationCache对象
网友评论