应用程序缓存 AppCache
Application Cache
HTML5提供了一系列的特性来支持离线应用：
- application cache
- localStrorage
- web SQL & indexed database
- online/offline events
application cache 就是希望浏览器来缓存, 和Etag last-modified-since 不同的是 前端的应用可以更加灵活
完整介绍
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Using_the_application_cache
Manifest文件
需要缓存的资源都放在Manifest文件中,
CACHE MANIFEST
# 以上折行必需要写
CACHE:
# 这部分写需要缓存的资源文件列表
# 可以是相对路径也可以是绝对路径
index.html
index.css
images/logo.png
js/main.js
http://img.baidu.com/js/tangram-base-1.5.2.1.js
NETWORK:
# 可选
# 这一部分是要绕过缓存直接读取的文件
login.php
FALLBACK:
# 可选
# 这部分写当访问缓存失败后，备用访问的资源
# 每行两个文件，第一个是访问源，第二个是替换文件*.html /offline.html你需要这样使用一个缓存清单文件
<html manifest="demo.cache">
...
</html>缓存检测步骤
使用了应用缓存机制以后加载文档的顺序是这样的：
- 如果应用缓存存在，浏览器直接从缓存中加载文档与相关资源，不会访问网络。这会提升文档加载速度。
- 浏览器检查清单文件列出的资源是否在服务器上被修改。
如果清单文件被更新了, 浏览器会下载新的清单文件和相关的资源。 这都是在后台执行的，基本不会影响到webapp的性能。
更新后是所有资源全部重新下载, 在下载的过程中, 任意一个资源下载出错, 所有已下载的资源都被清空
因此, 如果你更新了文件后, 访问页面发现还是上次的资源, 因为浏览器是先读取已经缓存的资源之后再去检查更新的, 只有再一次去访问页面才是读取新资源
几个重要的事件
noupdate
如果当前缓存的清单副本是最新的，浏览器将向 applicationCache 对象发送一个 noupdate 事件，到此，更新过程结束。注意，如果你在服务器修改了任何缓存资源，同时也应该修改清单文件，这样浏览器才能知道它需要重新获取资源。
Chrome调试的时候不要勾选 Disable Cache 否则永远都无法触发noupdate事件了
cached
所有资源都获取成功，触发cached 事件。
checking
在下载资源文件的过程中, 还会触发一个checking, 检测资源文件有没有更新