HTML5 manifest离线缓存
一、基本概念
离线缓存是HTML5新引入的技术，能够让你的Web应用程序指定哪些文件可以缓存在本地，使得你的网络断开时依然可以通过本地的缓存来进行访问浏览。
二、使用方法
1. MIME type 声明
首先，因为manifest文件必须是一个MIME type为text/cache-manifest类型的存在。文件后缀名可以自定义（建议为.appcache）所以我们需要现在服务端将.appcache后缀的文件类型声明为text/cache-manifest。以apache为例，我们需要在httpd.conf中加上：
AddType text/cache-manifest .appcache
2. 在HTML文件中引入manifest文件
<!-- clock.html --> <!DOCTYPE html> <html manifest="clock.appcache">
其中manifest文件的后缀名必须为.appcache，并且和引入该manifest的页面同源
3. manifest文件语法
CACHE MANIFEST
# 上面这行是必须的
# 这是一行注释
# 在这个文件中的任何地方都可以添加
# 它们全部都会被忽略
# 在注释之前可以有空格
# 但必须是在单行前
# 空行也会被忽略
# 这些列在最开始的文件都是需要被缓存的
# 或者是那些列在"CACHE:"里的， "CACHE"头必须写在这些文件之前，如同
# 下面写好的那样
images/sound-icon.png
images/background.png
# 注意，每个文件必须单独一行
# 在线白名单中出现的这个文件，它不会被缓存，并且，
# 对该文件的引用，将绕过缓存，总是会
# 从网络中获取目标（或在用户离线时，尝试从网路上获取）
NETWORK:
comm.cgi
# 这是另一块要缓存的文件，这次只有一个css文件
CACHE:
style/default.css
我们也可以书写成这样：
CACHE MANIFEST
#version 1.0
CACHE:
style/default.css
images/sound-icon.png
images/background.png
NETWORK:
*
- CACHE MANIFEST：这个是必须的，并且一定要写在manifest文件开头
- CACHE：缓存清单列表，此处列出的为需要进行离线缓存的资源文件
- NETWORK: 白名单列表，需要与服务端进行交互获取的资源文件，此处必须列出除缓存清单列表以外所有的资源地址（可以使用通配符*星号代替），否则没有列出的资源文件将加载失败
引入manifest的页面，即使没有被列入缓存清单中，仍然会被用户代理缓存。并且无法通过白名单列表去除。
（缓存清单的文件列表可以使用绝对路径或绝对URL地址）
开启离线缓存后，我们可以在chrome中打开f12来看看资源加载有啥区别
可以看出，使用离线缓存后的资源，资源请求的状态码都变为200，并且在size栏中都被标明为(form cache)，加载速度也是显而易见的。
4. 缓存如何更新？
资源被离线缓存后，无论我们在后端如何更改资源文件，客户端都不会拉取到修改过的文件。
原来，只有当manifest文件被更新后（修改文件任何地方，包括注释等），客户端才会更新离线缓存文件，并且每次都会更新全部的缓存文件，包括没有被修改的资源文件，但一般这些文件都会走304的缓存策略。
另外，在服务端修改manifest文件后，客户端第一次访问页面需要再刷新一次才能获取最新的资源。因为对于浏览器来说,manifest的加载是要晚于其他资源的. 这就导致check manifest的过程是滞后的。发现manifest改变，所有浏览器的实现都是紧随这做静默更新资源，以保证下次pv,应用到更新。（这一点很蛋疼，但还是有解决办法，请继续往下看）。
5. 离线缓存对象和事件处理
在javascript中我们可以通过window.applicationCache来访问缓存对象，对象中包含了一个status属性以及若干的待监听的事件处理器。
其中status属性代表的是当前离线应用的状态，它可能的值为：
- UNCACHED (0)：未启用离线应用
- IDLE (1)：已开启离线应用，但本地缓存的资源是最新的，并且未标记为废弃资源
- CHECKING (2)：当前更新缓存的状态为“检查中”
- DOWNLOADING (3)：当前更新缓存的状态为“下载资源中”
- UPDATEREADY (4)：当前更新缓存的状态为“更新完毕”
- OBSOLETE (5)：已开启离线应用，但缓存资源都已标记为废弃
离线缓存事件：
- checking：在第一次下载manifest文件时，或者检查是否需要更新时触发
- noupdate：manifest文件未修改，不需要下载新的缓存文件时触发
- downloading：准备更新缓存之前，或者第一次下载资源之前触发
- progress：下载资源时触发，每下载一个资源都会触发一次
- cached：页面首次启用离线缓存，并且离线缓存下载完毕时触发
- updateready：资源更新完毕时触发
- obsolete：加载manifest文件时遇到401或404错误时触发
- errorEvent加载manifest文件时遇到401或404错误时触发
这样，我们就可以通过updateready事件来让离线缓存更新后自动刷新页面了，虽然还是比较挫：
applicationCache.addEventListener(‘updateready’, function(){ location.href=”test.html”; }, false);
6. 离线缓存的下线
要将离线缓存下线，我们只需要将服务端的manifest文件删除即可，同时也要将HTML中的 manifest="manifest.appcache" 删除（不删也可以，会在console控制台报错，但不会影响页面访问），删除后用户再第一次访问还是原来的缓存页面，还需要再刷新一次。。。蛋疼吧。
