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 MANIFESTCACHE:  common.csscommon.jsicon.webpNETWORK:   imgs/good1.webpimgs/good2.webpFALLBACK:good1.webp  offline/imgs/good1.webp

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对象来手动更新离线缓存。

参考

应用缓存初级使用指南
九种浏览器端缓存机制知多少

标签：离线技巧

免责声明：本网信息来自于互联网，目的在于传递更多信息，并不代表本网赞同其观点。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，并请自行核实相关内容。本站不承担此类作品侵权行为的直接责任及连带责任。如若本网有任何内容侵犯您的权益，请及时联系我们，本站将会在24小时内处理完毕。