一、离线缓存的优点

我们都知道离线缓存主要是用来减少web应用对网络的依赖的，也就是说让你能偶在没网的情况下也能使用（当然是某些功能）。初看有点像传统的缓存，但是还是有很大不同的，首先离线缓存可以缓存整个应用，而普通的则是缓存单个界面；离线缓存的更新更加方便，可以动态通知，而传统缓存则是通过返回状态码来判断更新的；离线缓存还可以指定有网和没网分别加载什么文件，这点传统的缓存则做不到。

二、基本使用

离线网络应用程序的核心是一个 content type (内容类型) 为 cache-manifest 的文本文件。这个文件保存了应用程序中需要离线存储的文件（HTML, CSS, JavaScript, 图片等）。举一个简单的例子

CACHE MANIFEST

./index.html

./demo.css

./demo.js

./logo.png

这里定义的就是一个manifest文件，这个文件同其他文件放在相同的文件夹下，第一行类似是文件类型定义，它必须是写这个，然后下面定义了需要缓存的文件。当然虽然这里没有写manifest文件，但它默认是进行缓存的。

从别处摘了一份书写规范：

首行必须是 CACHE MANIFEST。
其后，每一行列出一个需要缓存的资源文件名。
可根据需要列出在线访问的白名单。白名单中的所有资源不会被缓存，在使用时将直接在线访问。声明白名单使用 NETWORK：标识符。
如果在白名单后还要补充需要缓存的资源，可以使用 CACHE：标识符。
如果要声明某 URI 不能访问时的替补 URI，可以使用 FALLBACK：标识符。其后的每一行包含两个 URI，当第一个 URI 不可访问时，浏览器将尝试使用第二个 URI。
注释要另起一行，以 # 号开头

然后我们需要在每个网页中加入

<html manifest="xxx.manifest">

三、服务器的配置

如果你认为现在你的工作就完成了，那你就错了，其实主要还是服务器的配置问题，不同的服务器有不同的方法。我使用的是apache。配制方法是在conf/mime.types加入一段代码：

test/cache-manifest manifest

然后你就可以使用html5强大的离线缓存功能了

四、更新问题

貌似是有各种更新的方法，不过我最喜欢的还是最简单的一种，也就是在manifest文件中加入一行版本号，这样更新的时候就直接更新了。

五、限制

目前的关于大小的限制如下：

Safari桌面浏览器(Mac以及 Windows)没有限制
Mobile Safari限制为10MB
Chrome限制为5MB
Android浏览器对应用程序缓存大小没有限制
Firefox桌面版有无限的应用程序缓存大小
Opera的应用程序缓存大小可以由用户管理，但有一个默认大小50M

可以使用这个网站来检验你的manifest文件是否正确

六、怎样查看离线缓存

chrome： chrome://appcache-internals

firefox： about:cache

如果你觉得内容对你有帮助，请点个赞

本作品采用知识共享署名-非商业性使用-相同方式共享 2.5 中国大陆许可协议进行许可。