文档章节

html5离线Web应用程序介绍

Adam-Lee
 Adam-Lee
发布于 2012/08/23 11:18
字数 3682
阅读 588
收藏 5

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

HTML5中新增了一个API,为离线Web应用程序的开发提供了可能性。为了让Web应用程序在离线状态时也能正常工作,就必须要把所有构成Web应用程序的资源文件,诸如:HTML文件、CSS文件、JavaScript脚本文件等放在本地缓存中,当服务器没有和Internet建立连接的时候,也可以利用本地缓存中的资源文件来正常运行Web应用程序。

本地缓存与浏览器网页缓存的区别

首先,本地缓存是为整个Web应用程序服务的,而浏览器的网页缓存只服务于单个网页,任何网页都具有网页缓存,而本地缓存只缓存那些指定缓存的网页。

其次,网页缓存也是不安全、不可靠的,因为我们不知道在网站中到底缓存了哪些页面,以及缓存了网页上的哪些资源。而本地缓存是可靠的,我们可以控制对哪些内容进行缓存,不对哪些内容进行缓存,开发人员还可以用编程的手段来控制缓存的更新,利用缓存对象的各种属性、状态和事件来开发出更为强大的离线应用程序。

manifest文件

Web应用程序的本地缓存是通过每个页面的manifest文件来管理的。manifest文件是一个简单文本文件,在该文件中以清单的形式列举了需要被缓存或不需要被缓存的资源文件的文件名称、以及这些资源文件的访问路径。可以为每一个页面单独指定一个mainifest文件,也可以对整个Web应用程序指定一个总的manifest文件。manifest文件示例如下:

Txt代码  

1. CACHE MANIFEST  

2. #文件的开头必须书CACHE MANIFEST  

3. #manifest文件的版本号  

4. #version 7  

5. CACHE:  

6. other.html  

7. hello.js  

8. images/myphoto.jpg  

9. NETWORK:  

10. http://google.com/xxx  

11. NotOffline.jsp  

12. *  

13. FALLBACK:  

14. online.js locale.js  

15. CACHE:  

16. newhello.html  

17. newhello.js  

manifest文件中,第一行必须是“CACHE MANIFEST”文字,以把本文件的作用告知给浏览器,即对本地缓存中的资源文件进行具体设置。同时,真正运行或测试离线Web应用程序的时候,需要对服务器进行配置,让服务器支持text/cache-manifest这个MIME类型(在HTML5中规定manifest文件的MIME类型为text/cache-manifest

manifest文件中,可以加上注释来进行一些必要的说明或解释,注释行以“#”开始;文件中可以(而且最好)加上版本号,以表示该manifest文件的版本,版本号可以是任何形式的,更新文件时一般也会对该版本号进行更新。

指定资源文件,文件路径可以是相对路径,也可以是绝对路径。指定时每个资源文件为一行。在指定资源文件的时候,可以把资源文件分为三类,分别是“CACHE”“NETWORK”“FALLBACK”

·        CACHE类别中指定需要被缓存在本地的资源文件。为某个页面指定需要本地缓存的资源文件时,不需要把这个页面本身指定在CACHE类型中,因为如果一个页面具有manifest文件,浏览器会自动对这个页面进行本地缓存。

·        NETWORK类别为显式指定不进行本地缓存的资源文件,这些资源文件只有当客户端与服务器端建立连接的时候才能访问。该示例中的“*”为通配符,表示没有在本manifest文件中指定的资源文件都不进行本地缓存。

·        FALLBACK类别中指定两个资源文件,每一个资源文件为能够在线访问时使用的资源文件,第二个资源文件为不能在线访问时使用的备用资源文件。

每个类别都是可选的。但是如果文件开头没有指定类别而直接书写资源文件的时候,浏览器把这些资源文件视为CACHE类别,直到看见文件中第一个被书写出来的类别为止,并且允许在同一个manifest文件中重复书写同一类别。

为了让浏览器能够正常阅读该文本文件,需要在Web应用程序页面上的html元素的manifest属性中指定manifest文件的URL地址。指定方法如下:

Html代码  

1. <!-- 可以为每个页面单独指定一个manifest文件 -->  

2. <html manifest="hello.manifest">  

3. </html>  

4. <!-- 也可以为整个Web应用程序指定一个总的manifest文件 -->  

5. <html manifest="global.manifest">  

6. </html>  

通过这些步骤,将资源文件保存到本地缓存区的基本操作就完成了。当要对本地缓存区的内容进行修改时,只要修改manifest文件就可以了。文件被修改后,浏览器可以自动检查manifest文件,并自动更新本地缓存区中的内容。

浏览器与服务器的交互过程

首次访问网站时的交互过程如下:

1.   浏览器请求访问网站;

2.   服务器返回请求网页,例如:index.html

3.   浏览器解析网页,请求页面上所有资源文件,包括HTML文件、图像文件、CSS文件、JS文件以及manifest文件;

4.   服务器返回所有资源文件;

5.   浏览器处理manifest文件,请求manifest中所有要求本地缓存的文件,包括index.html页面本身,即使刚才已经请求过这些文件。如果你要求本地缓存所有文件,这将是一个比较大的重复的请求过程;

6.   服务器返回所有要求本地缓存的文件;

7.   浏览器对本地缓存进行更新,存入包括页面本身在内的所有要求本地缓存的资源文件,并且触发一个事件,通知本地缓存被更新。

现在浏览器已经把本地缓存更新完毕,如果再次打开浏览器访问该网站,而且manifest文件没有被修改过,它们的交互过程如下:

1.   浏览器再次请求访问网站;

2.   浏览器发现这个页面被本地缓存,于是使用本地缓存中index.html页面;

3.   浏览器解析index.html页面,使用所有本地缓存中的资源文件;

4.   浏览器向服务器请求manifest文件;

5.   服务器返回一个304代码,通知浏览器manifest没有发生变化。

只要页面上的资源文件被本地缓存过,下次浏览器打开这个页面时,总是先使用本地缓存中的资源,然后请求manifest文件。

如果再次打开浏览器时,manifest文件已经被更新过了,那么浏览器与服务器之间的交互过程如下:

1.   浏览器再次请求访问网站;

2.   浏览器发现这个页面被本地缓存,于是使用本地缓存中的index.html页面;

3.   浏览器解析index.html页面,使用所有本地缓存中的资源文件;

4.   浏览器向服务器请求manifest文件;

5.   服务器返回更新过年manifest文件;

6.   浏览器处理manifest文件,发现该文件已被更新,于是请求所有要求进行本地缓存的资源文件,包括index.html页面本身;

7.   服务器返回要求进行本地缓存的资源文件;

8.   浏览器对本地缓存进行更新,丰入所有新的资源文件。并且触发一个事件,通知本地缓存被更新。

需要注意的是,即使资源文件被修改过了,在上面的第三步中已经装入的资源文件是不会发生变化的,例如图片不会突然变成新的图片,脚本文件也不会突然使用新的脚本文件,也就是说,这时更新过后的本地缓存中的内容还不能被使用,只有重新打开这个页面的时候才会使用更新过后的资源文件。另外,如果不想修改manifest文件中对于资源文件的设置,但是对服务器上请求缓存的资源文件进行了修改,那么可以通过修改版本号的方式来让浏览器认为manifest文件已经被更新过了,以便重新下载修改过的资源文件。

 

applicationCache对象

applicationCache对象代表本地缓存,可以用它来通知用户本地缓存中已经被更新,也允许用户手工更新本地缓存。在浏览器与服务器的交互过程中,当浏览器对本地缓存进行更新,将入新的资源文件时,会触发applicationCache对象的updateready事件,通知本地缓存已经被更新。可以利用该事件告诉用户本地缓存已经被更新,用户需要手工刷新页面来得到最新版本的应用程序,代表如下所示:

Js代码  

1. applicationCache.addEventListener("updateready"function(event) {  

2.     // 本地缓存已被更新,通知用户。  

3.     alert("本地缓存已被更新,可以刷新页面来得到本程序的最新版本。");  

4. }, false);  

另外可以通过applicationCache对象的swapCache()方法来控制如何进行本地缓存的更新及更新的时机。

swapCache()方法

该方法用来手工执行本地缓存的更新,它只能在applicationCache对象的updateReady事件被触发时调用,updateReady事件只有在服务器上的manifest文件被更新,并且把manifest文件中所要求的资源文件下载到本地后触发。该事件的含义是本地缓存准备被更新。当这个事件被触发后,可以用swapCache()方法来手工进行本地缓存的更新。

当本地缓存的容量非常大,本地缓存的更新工作将需要相对较长的时间,而且还会把浏览器锁住。这时最好有个提示,告诉用户正在进行本地缓存的更新,代码如下:

Js代码  

1. applicationCache.addEventListener("updateready"function(event) {  

2.     // 本地缓存已被更新,通知用户。  

3.     alert("正在更新本地缓存……");  

4.     applicationCache.swapCache();  

5.     alert("本地缓存更新完毕,可以刷新页面使用最新版应用程序。");  

6. }, false);  

在以上代码中,如果不使用swapCache()方法,本地缓存一样会被更新,但是,更新的时候不一样。如果不调用该方法,本地缓存将在下一次打开本页面时被更新;如果调用该方法,则本地缓存将会被立刻更新。因此,可以使用confirm()方法让用户选择更新折时机,是立刻更新还是下次打开页面时更新,特别是当用户可能正在页面上执行一个较大的操作的时候。

另外,尽管使用swapCache()方法立刻更新了本地缓存,但是并不意味着我们页面上的图像和脚本文件也会被立刻更新,它们都是在重新打开本页面时才会生效。较完整的示例如下:

HTML页面代码:

Html代码  

1. <!DOCTYPE html>  

2. <html manifest="swapCache.manifest">  

3. <head>  

4.     <meta charset="UTF-8"/>  

5.     <title>swapCache()方法示例</title>  

6.     <script type="text/javascript" src="js/script.js"></script>  

7. </head>  

8. <body>  

9.     <p>swapCache()方法示例。</p>  

10. </body>  

11. </html>  

以上页面所使用的脚本文件代码如下:

Js代码  

1. document.addEventListener("load"function(event) {  

2.     setInterval(function() {  

3.         // 手工检查是否有更新  

4.         applicationCache.update();  

5.     }, 5000);  

6.     applicationCache.addEventListener("updateready"function(event) {  

7.         if(confirm("本地缓存已被更新,需要刷新页面获取最新版本吗?")) {  

8.             // (3)手工更新本地缓存  

9.             applicationCache.swapCache();  

10.             // 重载页面  

11.             location.reload();  

12.         }  

13.     }, false);  

14. });  

该页面使用的manifest文件内容如下:

Txt代码  

1. CACHE MANIFEST  

2. #version 1.20  

3. CACHE:  

4. script.js  

applicationCache对象的事件

首次访问网站:

1.   浏览器请求访问网站;

2.   服务器返回请求网页,例如index.html

3.   浏览器发现该网页具有manifest属性,触发checking事件,检查manifest文件是否存在。不存在时,触发error事件,表示manifest文件未找到,不执行步骤6开始的交互过程;

4.   浏览器解析index.html网页,请求页面上所有资源文件;

5.   服务器返回所有资源文件;

6.   浏览器处理manifest文件,请求manifest中所有要求本地缓存的文件,包括index.html页面本身,即使刚才已经请求过该文件。如果要求本地缓存所有文件,这将是一个比较大的重复的请求过程;

7.   服务器返回所有要求本地缓存的文件;

8.   浏览器触发downloading事件,然后开始下载这些资源。在下载的同时,周期性地触发progress事件,开发人员可以用编程的手段获取多少文件已被下载,多少文件仍然处于下载队列等信息;

9.   下载结束后触发checked事件,表示首次缓存成功,存入所有要求本地缓存的资源文件。

再次访问网站,步骤(1)~(5)同上,在步骤(5)执行完之后,浏览器将核对manifest文件是否被更新,若没有被更新,触发noupdate事件,步骤(6)开始的交互过程不会被执行。如果被更新了,将继续执行后面的步骤,在步骤(9)中不触发checked事件,而是触发updateready事件,这表示下载结束,可以通过刷新页面来使用更新后的本地缓存,或调用swapCache()方法来立刻使用更新后的本地缓存。

另外,在访问缓存名单时如果返回一个HTTP404错误(页面未找到),或者401错误(永久消失),则触发obsolete事件。

在整个过程中,如果任何与本地缓存有关的处理中发生错误的话,都会触发error事件。可能会触发error事件的情况分为以下几种:

·        缓存名单返回一个HTTP404错误或HTTP401错误;

·        缓存名单被找到且没有更改,但引用缓存名单的HTML页面不能正确下载;

·        缓存名单被找到且被更改,但浏览器不能下载某个缓存名单中列出的资源;

·        开始更新本地缓存时,缓存名单再次被更改。

 

© 著作权归作者所有

Adam-Lee
粉丝 50
博文 118
码字总数 166965
作品 0
深圳
程序员
私信 提问
使用 HTML 5 创建 Flex 的离线应用程序

本文转自 IBM developerWorks 简介: 目前 HTML 5 技术大兴其道,很多厂商都开始围绕着 HTML 5 技术在开发下一代 Web 应用。难道 HTML 5 真的会终结当前同样火热的 RIA 技术吗? 事实上二者完...

IBMdW
2011/06/11
732
0
[IBM DW] 使用 HTML5 开发离线应用

简介: Web2.0 技术鼓励个人的参与,每个人都是 Web 内容的撰写者。如果 Web 应用能够提供离线的功能,让用户在没有网络的地方(例如飞机上)和时候(网络坏了),也能进行内容撰写,等到有网...

红薯
2010/11/28
749
2
关于HTML5应用现状与前景的思考

现在的 HTML5 就像当年崭露头角时的 Ajax,有人在做,但不知道叫它什么。最近,苹果在 HTML5 上大做文章,而著名的 Web 设计师 Eric Meyer 则提出了 Web Stacks 的概念。Alex Kessinger 是 ...

红薯
2010/06/20
762
1
HTML5离线存储与应用程序缓存

html5离线存储初探: http://www.cnblogs.com/chyingp/archive/2012/12/01/explorehtml5cache.html?utmsource=tuicool html5应用程序缓存Application Cache: http://www.cnblogs.com/yexia......

xuewenyu
2015/06/18
38
0
HTML5 容器入门解析:支付宝 Hybrid 方案原理与实战

根据公开的 2018 年移动互联网行业分析报告,目前支付宝的月活跃用户已经超过 QQ ,成为国内第二大 App。 支付宝一开始仅仅只是一个单体应用的工具型 App,让用户可以在手机完成支付宝相关的...

蚂蚁金服移动开发平台mPaaS
09/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

wait()和sleep()之间的区别

线程中的wait()和sleep()有什么区别? 我是否知道wait() ing线程仍处于运行模式并使用CPU周期,但是sleep() ing不会消耗任何CPU周期正确吗? 为什么我们都 wait()和sleep()如何实现他们在一个...

javail
8分钟前
3
0
好程序员大数据实用教程之面向对象进阶

好程序员大数据实用教程之面向对象进阶:包的创建与使用 是对一个程序中指定功能的部分代码进行包装 构造方法 是一个方法 特殊点: 构造方法没有返回值,不是指的返回值类型是void,而是根本...

好程序员官网
9分钟前
3
0
centos以RPM包方式安装redis的方法

Redis(全称:Remote Dictionary Server 远程字典服务)是一个开源的使用ANSI C语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库,并提供多种语言的API。从2010年3月15日...

Linux就该这么学
11分钟前
3
0
用敏捷估算扑克牌如何估算?

敏捷估算扑克的使用方法多样,可结合项目自身情况使用,怎样使用?使用过程中要遵循哪些规则?用它估算有什么好处呢?一起来看视频吧。(关注“禅道项目管理软件”微信公众号,更多精彩与您分...

炒蚕豆吃蹦豆
13分钟前
3
0
Quick BI支持哪些数据源(配置操作篇)

Quick BI 潜心打造了核心技术底座(OLAP分析引擎),实现了SQL解析、SQL调度、SQL优化、查询加速等基础能力,支撑Quick BI的数据分析和查询加速。OLAP分析引擎包括数据源连接、数据模型、智能...

一肥仔
16分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部