h5离线应用

所谓离线应用，就是断网之后还可以运行的应用。h5提供了application cache，可以保存网页的离线数据。CSDN的Markdown编辑器就运用了application cache，在没有网络的情况下，一样可以正常使用，这就是一个很好的离线应用。

application cache和http缓存有时候很相似，http缓存也可以把浏览过的网页缓存下来，在断网情况下也可以打开。但是http缓存是会过期的，而application cache是永久的。http缓存像是一个快照，只是保存了网页的某个状态，而离线应用是实实在在的在运行。当网页是一个“单页应用”时更能体现两者的区别。

在chorme浏览器下，可以访问：

application cache 地址: chrome://appcache-internals/
http cache 地址 : chrome://cache/

查看两者。

实现一个h5离线应用

首先，需要一个清单文件，指出哪些文件是需要离线存储的。文件的名称和后缀都是可以是随意的，如下面这个文件可以命名为：appcache.manifest，如果服务器识别不了这样的后缀，则需要将这种后缀配置到服务器

CACHE MANIFEST
CACHE:  
common.css
common.js
icon.jpgNETWORK:   
imgs/good1.jpg
imgs/good2.jpgFALLBACK:
good1.jpg  offline/imgs/good1.jpg

CACHE MANIFEST : 清单文件的第一行必须是这个，表示这是一个清单文件
CACHE: 后面跟着需要离线的文件
NETWORK: 后面跟着的文件表示是需要从网络上获取的
FALLBACK: 这个标签是可选的，后面每一行有两个文件，表示当第一个文件访问不了时，使用第二个文件。

需要注意的是，清单上的文件路径不能有错，只要一个有错，所以文件都不会离线保存。

第二步是，在需要离线的网页的<html>标签上增加manifest属性，指向上面的清单文件。

<html manifest = "appcache.manifest">...
</html>

每一个需要离线的网页都需要配置一个manifest属性，从这也可以看出，h5的application cache更适合“单页应用”，而不是网站。

就这样，一个离线应用就完成了，当你第一次打开带有manifest属性的网页时，浏览器就会把离线文件下载下来，以后每次运行，都直接从缓存里拿这些文件。

在chorme浏览器下，可以按F12打开调试工具，选择“网络”，设成“offline”来模拟断网：

这里写图片描述

要观察到效果，禁用掉http缓存更好。

更新离线文件

自动更新

离线文件一旦缓存下来，浏览器以后都将使用离线文件，不会再向服务器请求该文件，也不知道服务器端的文件是否更新。但是，浏览器会在每次打开网页的时候，检查manifest文件是否是最新，所以只要manifest文件发生变化时，浏览器就会更新一遍离线文件，这便是自动更新。
手动更新

可以通过window.applicationCache对象来手动更新离线缓存。