一. 实现 HTML5 applicationCache 的步骤
一般的操作步骤
1. 新建 manifest 文件
如文件名为 lzwme.manifest,内容配置参考如下:
03 |
# version 1.2 for update cop help |
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 |
52 |
/wp-content/themes/weisayheibai/style.css |
53 |
/wp-content/plugins/syntax-highlighter-with-add-button-in-editor/styles/shCoreDefault.css |
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 |
清单可包括以下三个不同部分:CACHE、NETWORK 和 FALLBACK。
CACHE:
这是条目的默认部分。系统会在首次下载此标头下列出的文件(或紧跟在 CACHE MANIFEST 后的文件)后显式缓存这些文件。
NETWORK:
此部分下列出的文件是需要连接到服务器的白名单资源。无论用户是否处于离线状态,对这些资源的所有请求都会绕过缓存。可使用通配符。
FALLBACK:
此部分是可选的,用于指定无法访问资源时的后备网页。其中第一个 URI 代表资源,第二个代表后备网页。两个 URI 必须相关,并且必须与清单文件同源。可使用通配符。
请注意:这些部分可按任意顺序排列,且每个部分均可在同一清单中重复出现。
注意:
A. CACHE MANIFEST 字符串应在第一行,且必不可少
B. 并不支持模糊或正则匹配,添加的文件路径一般应是可以访问的静态文件
C. 如果页面中有静态文件增加,也应该在 CACHE 的列表中添加;
D. 应保持 NETWORK 为 * ,以防止当前页面被缓存了,但未添加至 CACHE 列表的静态文件不从服务器加载,从而出现无法访问到的问题。(测试使用中发现的现象)
2. 在需要缓存的页面中加入该文件导入配置,示例:
04 |
<html manifest= "zinhelp.manifest" > |
09 |
//发生了状态变化,则执行更新,一般来说本操作并不需要,因为当 manifest 文件变化时会发生 onnoupdate 事件,浏览器会自动更新缓存文件 |
10 |
if (window.applicationCache && window.applicationCache.status == UPDATEREADY){ |
11 |
window.applicationCache.update(); |
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 支持的监听函数有如下几种,适当的定义这些函数即可对离线应用的更新流程及应用的处理进行控制。
02 |
function deAppCacheHandler(){ |
03 |
if (! applicationCache ) return ; |
06 |
function msgTips(msg){ |
07 |
$( '.longMsg .label-info' ).html(msg); |
11 |
applicationCache.onchecking = function (){ |
13 |
msgTips( '正在检测离线缓存配置...' ); |
17 |
applicationCache.ondownloading = function (){ |
18 |
//检查到有manifest或者manifest文件 |
20 |
//即使需要缓存的文件在请求时服务器已经返回过了 |
21 |
msgTips( '本地缓存正在更新中...' ); |
22 |
window.precesscount = 0; //用于进度计算 |
26 |
applicationCache.onnoupdate = function (){ |
27 |
//返回304表示没有更新,通知浏览器直接使用本地文件 |
29 |
setTimeout( function (){ |
35 |
applicationCache.onprogress = function (e){ |
39 |
if (e & e.lengthComputable){ |
40 |
precess = ' ' + Math.round(100 * e.loaded / e.total) + '%' |
42 |
window.precesscount += 1; |
43 |
precess = '(' + window.precesscount + ')' ; |
45 |
msgTips( '本地缓存正在更新中... ' + precess); |
49 |
applicationCache.oncached = function (){ |
51 |
msgTips( '全部离线内容缓存成功!' ); |
55 |
applicationCache.onupdateready = function (){ |
59 |
/*/alert("本地缓存正在更新中。。。"); |
60 |
if(confirm("是否重新载入已更新的文件?")){ |
61 |
applicationCache.swapCache();//弃用旧的缓存文件 |
64 |
msgTips( '已有新版本,请刷新页面载入' ); |
65 |
applicationCache.swapCache(); //弃用旧的缓存文件 |
69 |
applicationCache.onobsolete = function (){ |
70 |
//未找到文件,返回404或者401时候触发 |
75 |
applicationCache.onerror = function (){ |
77 |
msgTips( '无法访问离线配置文件' ); |
81 |
window.onoffline = function (){ |
- HTML 5 应用程序缓存(Application Cache)cache manifest 文件使用 html5 中创建manifest缓存以及更新方法 一个manifest文件会创建一份缓存,不同的manifest文件其缓存的内容是互不干扰的
HTML5 离线缓存-manifest简介 HTML 5 应用程序缓存 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. 什么是应用程序缓存(A ...
- HTML5学习(九)----应用程序缓存
参考教程:http://www.w3school.com.cn/html5/html_5_app_cache.asp 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 w ...
- HTML5 学习笔记 应用程序缓存
使用html5 通过创建cache manifest文件,可以轻松地创建web应用的离线版本. html5引入了应用程序缓存,这意味着web应用可进行缓存,并可在没有因特网连接时进行访问. 应用程序缓 ...
- Atitit.h5 web webview性能提升解决方案-----fileStrore缓存离线存储+http方案
Atitit.h5 web webview性能提升解决方案-----fileStrore缓存离线存储+http方案 1. 业务场景 android+webview h5 css背景图性能提升1 2. ...
- H5 应用程序缓存(离线缓存)
离线缓存这个功能的实现有以下步骤: 1,以nginx做web服务器为例,在mime.types文件中添加一行:text/cache-manifest manifest,作用是为了让服务器识别该 ...
- AppCache 离线存储 应用程序缓存 API 及注意事项
使用ApplicationCache接口实现离线缓存 原文:http://www.mb5u.com/HTML5/html5_96464.html 推荐:html5 application cache遇 ...
- html5的离线存储问题集合
HTML5的离线存储使用一个manifest文件来标明哪些文件是需要被存储的,使用如 来引入一个manifest文件,这个文件的路径可以是相对的,也可以是绝对的,如果你的web应用很多,而且希望能集中 ...
- 转 html5离线储存,application cache,manifest使用体验
html5离线应用application cache 最近在APP里新增一个论坛模块,为了快速地完成,决定将整个论坛模块做成WEB APP,WEB APP最致命的就是用户体验问题,页面跳转和过多的请求 ...
- 神奇的HTML5离线存储(应用程序缓存)
声明:本文为原创文章,如需转载,请注明来源并保留原文链接前端小尚,谢谢! 前言 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. HTML5引入 ...
随机推荐
- 无废话Android之activity的生命周期、activity的启动模式、activity横竖屏切换的生命周期、开启新的activity获取他的返回值、利用广播实现ip拨号、短信接收广播、短信监听器(6)
1.activity的生命周期 这七个方法定义了Activity的完整生命周期.实现这些方法可以帮助我们监视其中的三个嵌套生命周期循环: (1)Activity的完整生命周期 自第一次调用onCrea ...
- Algorithms, Part I by Kevin Wayne, Robert Sedgewick
Welcome to Algorithms, Part I 前言 昨天在突然看到了Coursera上Robert Sedgewick讲的Algorithms,Part II看了一些,甚是爽快,所以又去 ...
- hdu 1698:Just a Hook(线段树,区间更新)
Just a Hook Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total ...
- JavaScript之作用域与闭包详解
前言: JavaScript是一种应用非常广泛的语言,其也有一些自身特点和优势,本文重在讲述其作用域机制以及闭包,会从一些实例来探讨其机理. 作用域在JavaScript程序员日常使用中有不同的含义, ...
- Centos6.5里安装Erlang 并安装riak
一.Erlang安装: 1 首先进入www.erlang.org 下载页面,下载otp_src_17.5.tar.gz. IT网,http://www.it.net.cn 2 解压缩:tar -xzv ...
- PHP不同域名cookie共享(单点登录实现原理)
PHP使用P3P完成COOKIE跨域操作实际实用中,类似的需求有,比如说我们有两个域名,我们想实现在一个域名登录后,能自动完成另一个域名的登录,也就是单点登录(SSO)功能.为了测试的方便,先编辑ho ...
- bootstrap 入门
bootstrap 入门 <!DOCTYPE html> <html> <head lang="en"> <meta charset=&q ...
- [Outlook] outlook如何实现自动CC和BCC邮件发送
由于需要在不同机器上发送邮件,最终发送的邮件会在不同的机器上,最终导致邮件丢失,以后想找也找不回来,故在网上搜索一翻,找到解决办法. 1. 实现自动CC邮件发送: 方法:使用outlook的配置规则 ...
- Effective C++ 之 Item 1: 视C++为一个语言联邦
Effective C++ Chapter 1. 让自己习惯C++(Accustoming Yourself to C++) Item 1. 视C++为一个语言联邦(View C++ as a fed ...
- java线程之——synchronized的注意细节
我在学习synchronized的时候,十分好奇当一个线程进入了一个对象的一个synchronized方法后,其它线程是否可进入此对象的其它方法? 然后就做了个实验(实验代码最后贴出),最后得到了如下 ...