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控制台报错，但不会影响页面访问），删除后用户再第一次访问还是原来的缓存页面，还需要再刷新一次。。。蛋疼吧。