一. 实现 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 }

HTML5 的 applicationCache 应用程序缓存离线存储功能与 manifest 文件的更多相关文章

  1. HTML 5 应用程序缓存（Application Cache）cache manifest 文件使用 html5 中创建manifest缓存以及更新方法 一个manifest文件会创建一份缓存，不同的manifest文件其缓存的内容是互不干扰的

    HTML5 离线缓存-manifest简介 HTML 5 应用程序缓存 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. 什么是应用程序缓存(A ...

  2. HTML5学习(九)----应用程序缓存

    参考教程:http://www.w3school.com.cn/html5/html_5_app_cache.asp 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 w ...

  3. HTML5 学习笔记 应用程序缓存

    使用html5 通过创建cache manifest文件,可以轻松地创建web应用的离线版本. html5引入了应用程序缓存,这意味着web应用可进行缓存,并可在没有因特网连接时进行访问. 应用程序缓 ...

  4. Atitit.h5 web webview性能提升解决方案-----fileStrore缓存离线存储+http方案

    Atitit.h5 web webview性能提升解决方案-----fileStrore缓存离线存储+http方案 1. 业务场景 android+webview h5 css背景图性能提升1 2. ...

  5. H5 应用程序缓存(离线缓存)

    离线缓存这个功能的实现有以下步骤: 1,以nginx做web服务器为例,在mime.types文件中添加一行:text/cache-manifest     manifest,作用是为了让服务器识别该 ...

  6. AppCache 离线存储 应用程序缓存 API 及注意事项

    使用ApplicationCache接口实现离线缓存 原文:http://www.mb5u.com/HTML5/html5_96464.html 推荐:html5 application cache遇 ...

  7. html5的离线存储问题集合

    HTML5的离线存储使用一个manifest文件来标明哪些文件是需要被存储的,使用如 来引入一个manifest文件,这个文件的路径可以是相对的,也可以是绝对的,如果你的web应用很多,而且希望能集中 ...

  8. 转 html5离线储存,application cache,manifest使用体验

    html5离线应用application cache 最近在APP里新增一个论坛模块,为了快速地完成,决定将整个论坛模块做成WEB APP,WEB APP最致命的就是用户体验问题,页面跳转和过多的请求 ...

  9. 神奇的HTML5离线存储（应用程序缓存）

    声明:本文为原创文章,如需转载,请注明来源并保留原文链接前端小尚,谢谢! 前言 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. HTML5引入 ...

随机推荐

  1. Asp.Net - 8.多线程

    8.1 概念 进程(Process):是Windows系统中的一个基本概念,它包含着一个运行程序所需要的资源.进程之间是相对独立的,一个进程无法直接访问另一个进程的数据(除非利用分布式计算方式),一个 ...

  2. .net学习之CTS、CLS和CLR

    CLR:公共语言运行时,就是所有.net语言写的程序的公共运行时环境,比如C#.VB.Net等语言写的程序需要运行在CLR上,然后CLR解析执行操作系统的相关指令,CLR是.net程序运行在操作系统的 ...

  3. CSS中设置DIV垂直居中的N种方法 兼容IE浏览器

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  4. tornado使用（Mac）

    安装需求 Tornado 在 Python 2.5, 2.6, 2.7 中都经过了测试.要使用 Tornado 的所有功能,你需要安装 PycURL (7.18.2 或更高版本) 以及 simplej ...

  5. PHP日期操作类代码-农历-阳历转换、闰年、计算天数等

    <?php class Lunar { var $MIN_YEAR = 1891; var $MAX_YEAR = 2100; var $lunarInfo = array( array(0,2 ...

  6. git checkout 命令详解

    转自:http://www.cnblogs.com/hutaoer/archive/2013/05/07/git_checkout.html?utm_source=tuicool&utm_me ...

  7. Socket通信客户端设计（Java）

    public class Client extends JFrame implements Runnable{ private JPanel jPanel= new JPanel(); private ...

  8. ZOJ 3494 BCD Code(AC自动机+数位DP)

    BCD Code Time Limit: 5 Seconds      Memory Limit: 65536 KB Binary-coded decimal (BCD) is an encoding ...

  9. Jquery禁止/恢复按钮与文本框代码

    最近,加入了一个小项目,由浩哥带领我们几个人一起开发一个东西.幸运的是,我和胡志婷分到了一组,她可是一个具有丰富经验的牛人,对我也很好,哈哈. --背景 说点正事,最近,我们在进行项目的时候,提到了一 ...

  10. em与rem

    em是相对于父元素的font-size,rem是相对于根元素的font-size. rem的补充: ① 对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明.这些浏览器会忽略用rem设定 ...