HTML5 的 applicationCache 应用程序缓存离线存储功能与 manifest 文件

一. 实现 HTML5 applicationCache 的步骤

一般的操作步骤

1. 新建 manifest 文件

如文件名为  lzwme.manifest，内容配置参考如下：

01 CACHE MANIFEST
02  
03 # version 1.2  for update cop help
04  
05 # 直接缓存的文件
06 CACHE:
07     /wp-content/themes/weisayheibai/images/meta_author.png
08     /wp-content/themes/weisayheibai/images/meta_date.png
09     /wp-content/themes/weisayheibai/images/meta_categories.png
10     /wp-content/themes/weisayheibai/images/meta_comments.png
11     /wp-content/themes/weisayheibai/images/meta_views.png
12     /wp-content/themes/weisayheibai/images/new.gif
13     /wp-content/themes/weisayheibai/images/random/tb1.jpg
14     /wp-content/themes/weisayheibai/images/random/tb2.jpg
15     /wp-content/themes/weisayheibai/images/random/tb3.jpg
16     /wp-content/themes/weisayheibai/images/random/tb4.jpg
17     /wp-content/themes/weisayheibai/images/random/tb5.jpg
18     /wp-content/themes/weisayheibai/images/random/tb6.jpg
19     /wp-content/themes/weisayheibai/images/random/tb7.jpg
20     /wp-content/themes/weisayheibai/images/random/tb8.jpg
21     /wp-content/themes/weisayheibai/images/random/tb9.jpg
22     /wp-content/themes/weisayheibai/images/random/tb10.jpg
23     /wp-content/themes/weisayheibai/images/random/tb11.jpg
24     /wp-content/themes/weisayheibai/images/random/tb12.jpg
25     /wp-content/themes/weisayheibai/images/random/tb13.jpg
26     /wp-content/themes/weisayheibai/images/random/tb14.jpg
27     /wp-content/themes/weisayheibai/images/random/tb15.jpg
28     /plugins/jquerylazyload/fill.gif
29     /wp-includes/images/smilies/icon_question.gif
30     /wp-includes/images/smilies/icon_razz.gif
31     /wp-includes/images/smilies/icon_sad.gif
32     /wp-includes/images/smilies/icon_evil.gif
33     /wp-includes/images/smilies/icon_exclaim.gif
34     /wp-includes/images/smilies/icon_smile.gif
35     /wp-includes/images/smilies/icon_redface.gif
36     /wp-includes/images/smilies/icon_biggrin.gif
37     /wp-includes/images/smilies/icon_surprised.gif
38     /wp-includes/images/smilies/icon_eek.gif
39     /wp-includes/images/smilies/icon_confused.gif
40     /wp-includes/images/smilies/icon_cool.gif
41     /wp-includes/images/smilies/icon_lol.gif
42     /wp-includes/images/smilies/icon_mad.gif
43     /wp-includes/images/smilies/icon_twisted.gif
44     /wp-includes/images/smilies/icon_rolleyes.gif
45     /wp-includes/images/smilies/icon_wink.gif
46     /wp-includes/images/smilies/icon_idea.gif
47     /wp-includes/images/smilies/icon_arrow.gif
48     /wp-includes/images/smilies/icon_neutral.gif
49     /wp-includes/images/smilies/icon_cry.gif
50     /wp-includes/images/smilies/icon_mrgreen.gif
51  
52     /wp-content/themes/weisayheibai/style.css
53     /wp-content/plugins/syntax-highlighter-with-add-button-in-editor/styles/shCoreDefault.css
54  
55     /wp-content/themes/weisayheibai/js/jquery.min.js
56     /wp-content/themes/weisayheibai/js/hoveraccordion.js
57     /wp-content/themes/weisayheibai/js/custom.js
58     /wp-content/plugins/syntax-highlighter-with-add-button-in-editor/scripts/shCore.js
59     /wp-content/plugins/syntax-highlighter-with-add-button-in-editor/scripts/shAutoloader.js
60  
61 # 需要在时间在线的文件
62 NETWORK:
63     /
64 # 替代方案
65 FALLBACK:

清单可包括以下三个不同部分：CACHE、NETWORK 和 FALLBACK。

CACHE：
这是条目的默认部分。系统会在首次下载此标头下列出的文件（或紧跟在 CACHE MANIFEST 后的文件）后显式缓存这些文件。

NETWORK：
此部分下列出的文件是需要连接到服务器的白名单资源。无论用户是否处于离线状态，对这些资源的所有请求都会绕过缓存。可使用通配符。

FALLBACK：
此部分是可选的，用于指定无法访问资源时的后备网页。其中第一个 URI 代表资源，第二个代表后备网页。两个 URI 必须相关，并且必须与清单文件同源。可使用通配符。
请注意：这些部分可按任意顺序排列，且每个部分均可在同一清单中重复出现。

注意：

A. CACHE MANIFEST 字符串应在第一行，且必不可少
B. 并不支持模糊或正则匹配，添加的文件路径一般应是可以访问的静态文件
C. 如果页面中有静态文件增加，也应该在 CACHE 的列表中添加；
D. 应保持 NETWORK 为 * ，以防止当前页面被缓存了，但未添加至 CACHE 列表的静态文件不从服务器加载，从而出现无法访问到的问题。（测试使用中发现的现象）

2. 在需要缓存的页面中加入该文件导入配置，示例：

01 cache.html
02  
03 <!DOCTYPE html>
04 <html manifest="zinhelp.manifest">
05 <head>
06     <meta charset=utf-8>
07     <title>cache</title>
08     <script>
09         //发生了状态变化，则执行更新，一般来说本操作并不需要，因为当 manifest 文件变化时会发生 onnoupdate 事件，浏览器会自动更新缓存文件
10         if(window.applicationCache && window.applicationCache.status == UPDATEREADY){
11              window.applicationCache.update();
12         }
13     </script>
14 </head>
15 <body>
16     HTML5 cache!
17 </body>
18 </html>

3. 配置服务器的 manifest 格式扩展名文件支持

在 Web 服务器配置中添加如下 MIME 映射：

扩展名为 manifest，类型为 text/cache-manifest

注：
该设置是为了防止在不支持 applicationCache 功能的浏览器上浏览时，浏览器不知道该文件的格式而可能造成作为附件下载。
在支持 HTML5 该功能的浏览器上，一般可以正确的对该文件识别并判断，并不需要服务器强制解析该文件类型。

二. 注意的问题

1. 关于文件的更新

只有当 .manifest 文件变动，缓存文件才会重新更新并缓存。所以动态页面是不宜缓存的。而且当浏览器检测到该文件发生了更新时，会触发一系列事件监听函数，并异步地更新缓存，而当前页显示的依然是历史缓存内容，所以在此刷新时才能浏览最新的内容。

 1. 缓存当前页问题

一般我们只需要对不更新或很少更新的文件进行缓存，对于动态更新的页面是不提倡缓存的。
对于加载 manifest 的当前页面，浏览器会默认缓存，这会造成一个问题：
如果当前页为动态更新的页面，那么如果 manifest 文件不更新，则当面页面也就会一直被缓存，那么页面的动态更新就无法获知了。

这在HTML5 相关文档里并没有直接的解决方案，其解释是这是必须而安全的。
如果我们只是想通过当前缓存静态文件，那么我们该如何处理该问题呢？

一个可行的解决方法是添加 iframe ，那么 iframe 会一直缓存（直到 manifest 变化后更新），当前页则一直是动态的。

2. 大小限制问题

浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）
这一点并没有在多浏览器上作严格测试，对于 HTML5 的 本地存储 localStorage 大小限制的测试可参考这里：

HTML5 本地存储 localStorage：

http://lzw.me/Category/tech/html5-localstorage.html

不过，如果你编写的是针对 Chrome 网上应用店的应用，可使用 unlimitedStorage 取消该限制。

三. 相关状态监控函数参考

当浏览器检测到 .manifest 文件发生变动时，浏览器会异步的对缓存文件更新，而当前显示的依然是历史缓存内容，那么需要再次刷新才能浏览到最新的页面。但是浏览器会触发事件监听函数，我们可以通过这些事件监听函数进行适当的应用处理。
当前 HTML5 的 applicationCache 支持的监听函数有如下几种，适当的定义这些函数即可对离线应用的更新流程及应用的处理进行控制。

01 // 定义离线缓存的事件监听
02 function deAppCacheHandler(){
03     if(! applicationCache ) return;
04  
05     //信息提示
06     function msgTips(msg){
07         $('.longMsg .label-info').html(msg);
08         console.log(msg);
09     }
10  
11     applicationCache.onchecking = function(){
12         //检查manifest文件是否存在
13         msgTips('正在检测离线缓存配置...');
14         //return false;
15     };
16  
17     applicationCache.ondownloading = function(){
18         //检查到有manifest或者manifest文件
19         //已更新就执行下载操作
20         //即使需要缓存的文件在请求时服务器已经返回过了
21         msgTips('本地缓存正在更新中...');
22         window.precesscount = 0; //用于进度计算
23         return false;
24     };
25  
26     applicationCache.onnoupdate = function(){
27         //返回304表示没有更新，通知浏览器直接使用本地文件
28         msgTips('您使用的是最新版本');
29         setTimeout(function(){
30             msgTips('');
31         }, 5000);
32         return false;
33     };
34  
35     applicationCache.onprogress = function(e){
36         //下载的时候周期性的触发，可以通过它
37         //获取已经下载的文件个数
38         var precess = '';
39         if(e & e.lengthComputable){
40             precess = ' ' + Math.round(100 * e.loaded / e.total) + '%'
41         }else{
42             window.precesscount += 1;
43             precess = '(' + window.precesscount + ')';
44         }
45         msgTips('本地缓存正在更新中... ' + precess);
46         return false;
47     };
48  
49     applicationCache.oncached = function(){
50         //下载结束后触发，表示缓存成功
51         msgTips('全部离线内容缓存成功！');
52         return false;
53     };
54  
55     applicationCache.onupdateready = function(){
56         //第二次载入，如果manifest被更新
57         //在下载结束时候触发
58         //不触发onchched
59         /*/alert("本地缓存正在更新中。。。");
60         if(confirm("是否重新载入已更新的文件？")){
61            applicationCache.swapCache();//弃用旧的缓存文件
62            location.reload();
63         }//*/
64         msgTips('已有新版本，请刷新页面载入');
65         applicationCache.swapCache();//弃用旧的缓存文件
66         return false;
67     };
68  
69     applicationCache.onobsolete = function(){
70         //未找到文件，返回404或者401时候触发
71         msgTips('离线缓存功能已删除');
72         return false;
73     };
74  
75     applicationCache.onerror = function(){
76         //其他和离线存储有关的错误
77         msgTips('无法访问离线配置文件');
78         return false;
79     };
80  
81     window.onoffline = function(){
82         msgTips('离线状态');
83         return false;
84     };
85 }
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/sunshq/p/4318485.html