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 }
时间: 2024-11-09 12:03:10

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

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

1. 业务场景 android+webview h5 css背景图性能提升1 2. 根据标准,到目前为止,H5 一共有6种缓存机制,有些是之前已有,有些是 H5 才新加入的.1 2.1. 各种方案的比较,如下图2 3. Attilax的解决之道 file 缓存+http3 3.1. 图片的下载3 3.2. Jsbridge 4android5 3.3. http协议6 4. 参考8 1. 业务场景 android+webview h5 css背景图性能提升 图片的缓存大概儿需要500m的规模..

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

离线缓存这个功能的实现有以下步骤: 1,以nginx做web服务器为例,在mime.types文件中添加一行:text/cache-manifest     manifest,作用是为了让服务器识别该类型文件 2,在html文件html标签中添加一行manifest="cache.appcache",告诉浏览器要加载的内容. 3.在该目录下新建一个文件cache.appcache,文件内容为: chche manifest 为版本号: chche 是告诉浏览器要缓存的文件: netwo

html5的离线存储问题汇总

HTML5的一个重要特性就是离线存储,所谓的离线存储就是将一些资源文件保存在本地,这样后续的页面重新加载将使用本地资源文件,在离线情况下可以继续访问web应用,同时通过一定的手法(更新相关文件或者使用相关API),可以更新.删除离线存储等操作: HTML5的离线存储使用一个manifest文件来标明哪些文件是需要被存储的,使用如 <html manifest='offline.manifest'> 来引入一个manifest文件,这个文件的路径可以是相对的,也可以是绝对的,如果你的web应用很

html5的离线存储问题集合

HTML5的离线存储使用一个manifest文件来标明哪些文件是需要被存储的,使用如 来引入一个manifest文件,这个文件的路径可以是相对的,也可以是绝对的,如果你的web应用很多,而且希望能集中管理manifest文件,那么静态文件服务器是个不错的选择. 对于manifest文件,要求:文件的mime-type必须是 text/cache-manifest类型.如果你是JAVA工程,在你的web.xml中配置请求后缀为manifest的格式: [html] manifest text/ca

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

最近在APP里新增一个论坛模块,为了快速地完成,决定将整个论坛模块做成WEB APP,WEB APP最致命的就是用户体验问题,页面跳转和过多的请求,大大影响了加载速度和用户体验,这时候我想到了HTML5的离线储存. 经过简单的了解之后,觉得这个可以有,但很快我又就发现,HTML5离线储存并不适于这次的项目. 原因如下: 1. 一旦页面指定了manifest,那么这个页面就一定被储存下来.如果有一个动态页面,不想缓存页面的内容,只想缓存页面所引用的css,js,img,但抱歉,这个没有办法做到.我

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

html5离线应用application cache 最近在APP里新增一个论坛模块,为了快速地完成,决定将整个论坛模块做成WEB APP,WEB APP最致命的就是用户体验问题,页面跳转和过多的请求,大大影响了加载速度和用户体验,这时候我想到了HTML5的离线储存. 经过简单的了解之后,觉得这个可以有,但很快我又就发现,HTML5离线储存并不适于这次的项目. 原因如下: 1.  一旦页面指定了manifest,那么这个页面就一定被储存下来.如果有一个动态页面,不想缓存页面的内容,只想缓存页面所

【转】html5离线储存,application cache,manifest使用体验

最近在APP里新增一个论坛模块,为了快速地完成,决定将整个论坛模块做成WEB APP,WEB APP最致命的就是用户体验问题,页面跳转和过多的请求,大大影响了加载速度和用户体验,这时候我想到了HTML5的离线储存. 经过简单的了解之后,觉得这个可以有,但很快我又就发现,HTML5离线储存并不适于这次的项目. 原因如下: 1. 一旦页面指定了manifest,那么这个页面就一定被储存下来.如果有一个动态页面,不想缓存页面的内容,只想缓存页面所引用的css,js,img,但抱歉,这个没有办法做到.我

HTML5应用程序缓存Application Cache详解.RP

什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. Application Cache带来的三个优势是: ① 离线浏览 ② 提升页面载入速度 ③ 降低服务器压力 而且主要浏览器皆以支持Application Cache,就算不支持也不会对程序造成什么影响 离线存储技术 HTML5提出了两大离线存储技术:localstorage与Application

HTML5应用程序缓存Application Cache

HTML5应用程序缓存Application Cache 什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. Application Cache带来的三个优势是: ① 离线浏览 ② 提升页面载入速度 ③ 降低服务器压力 而且主要浏览器皆以支持Application Cache,就算不支持也不会对程序造成什么影响 离线存储技术 HTML5提出了两大离线存