第 ２５卷第 ５期
２０１２年 １０月
四川理工学院学报（自然科学版）
ＪｏｕｒｎａｌｏｆＳｉｃｈｕａｎＵｎｉｖｅｒｓｉｔｙｏｆＳｃｉｅｎｃｅ＆Ｅｎｇｉｎｅｅｒｉｎｇ（ＮａｔｕｒａｌＳｃｉｅｎｃｅＥｄｉｔｉｏｎ）
Ｖｏｌ２５ Ｎｏ５
Ｏｃｔ２０１２
收稿日期：２０１２０９１３
作者简介：蹇红梅（１９８０），女，四川南充人，讲师，硕士，主要从事计算机应用技术方面的研究，（Ｅｍａｉｌ）ｊｈｍ＠ｓｕｓｅ．ｅｄｕ．ｃｎ
文章编号：１６７３１５４９（２０１２）０５００４１０４ ＤＯＩ：１０．３９６９／ｊ．ｉｓｓｎ．１６７３１５４９．２０１２．０５．０１１
ＷＥＢ平台下的基于 ＨＴＭＬ５标准离线应用开发
蹇红梅
（四川理工学院计算机学院，四川 自贡 ６４３０００）
摘 要：ＨＴＭＬ５是由 Ｗ３Ｃ发布的新一代 ＨＴＭＬ标准，不仅强化了 Ｗｅｂ网页的表现性能，还拥有很
多 ＡＰＩ接口，开发者利用这些接口，可以便捷地创建更加丰富、引人入目的应用程序。在分析研究 ＨＴ
ＭＬ５标准基础上，利用其技术实现了一个离线便签管理程序系统，既直观展示了 ＨＴＭＬ５的内容描述标
签、直接支持表单验证、视频音频标签、网页元素的拖拽、工作线程等新特性，又介绍了利用 ＤＯＭ Ｓｔｏｒａｇｅ
和 ＷｅｂＳＱＬＤａｔａｂａｓｅ两种存储机制进行离线应用开发的方法。文章对基于 ＨＴＭＬ５的应用开发具有一
定的参考价值。
关键词：ＷＥＢ；ＨＴＭＬ５；离线；应用开发；ＤＯＭ Ｓｔｏｒａｇｅ；ＷｅｂＳＱＬＤａｔａｂａｓｅ
中图分类号：ＴＰ３９３ 文献标志码：Ａ
Ｗｅｂ应用程序，即是基于 Ｂ／Ｓ模式或网页浏览器的
应用程序，它从运行机制上解决了传统 Ｃ／Ｓ模式的客户
端安装和升级的不便。随着
Ｗｅｂ新技术的迅速发展，
Ｂ／Ｓ模式程序在交互体验上，也基本能达到传统桌面应
用的要求，因此，现在的 Ｗｅｂ程序已经不再只是信息的
浏览
［１］
。传统的 Ｂ／Ｓ应用高度依赖于网络的畅通，如果
网速较慢，Ｂ／Ｓ系统的应用效果就会大打折扣，这对于
Ｗｅｂ技术应用，是一个巨大的障碍和挑战，随着 ＨＴＭＬ５
的推出，使得这个障碍有了解决方案。
ＨＴＭＬ５标准具有“离线 Ｗｅｂ应用程序”与“客户端
数据存储”两个特性，利用这两个特性，用户可在客户端
设备上使用云功能，使用部署在本地数据库上的应用程
序来工作，当再次上线时与云的其他部分共享数据
［２］
。
１ ＨＴＭＬ５离线功能简介
在开发支持离线的 Ｗｅｂ应用程序时，应注意以下
三个方面的功能：
（１）离线资源缓存：需要一种方式来指明应用程序
离线工作时所需的资源文件。这样，浏览器才能在在线
状态时，把这些文件缓存到本地。当用户离线后再访问
应用程序时，这些资源文件会自动加载，从而让用户正
常使用。为了能够让用户在离线状态下继续访问 Ｗｅｂ
应用，开发者需要提供一个 ｃａｃｈｅｍａｎｉｆｅｓｔ文件。这个文
件列出了所有需要在离线状态下使用的资源，浏览器会
把这些资源缓存到本地。
（２）在线状态检测：开发者需要知道浏览器是否在
线，这样才能够针对在线或离线的状态，作出相应的处
理。在 ＨＴＭＬ５中，通过 ｃａｃｈｅｍａｎｉｆｅｓｔ缓存资源文件以
后，就可以支持离线访问了。但是在开发支持离线的
Ｗｅｂ应用时，不能仅仅满足于静态页面的展现，还必需
考虑如何让用户在离线状态下也可以操作数据。离线
状态时，把数据存储在本地；在线以后，再把数据同步到
服务器上。ＨＴＭＬ５提供了两种检测是否在线的方式：
ｎａｖｉｇａｔｏｒ．ｏｎｌｉｎｅ和 ｏｎｌｉｎｅ／ｏｆｆｌｉｎｅ事件
［２３］
。
●
ｎａｖｉｇａｔｏｒ．ｏｎＬｉｎｅ，该属性表示当前是否在线。如
为 ｔｒｕｅ，表示在线；如果为 ｆａｌｓｅ，表示离线。
●
ｏｎｌｉｎｅ／ｏｆｆｌｉｎｅ事件：当开发离线应用时，通过 ｎａｖ
ｉｇａｔｏｒ．ｏｎＬｉｎｅ获取网络状态通常是不够的。开发者还需
要在网络状态发生变化时立刻得到通知，因此 ＨＴＭＬ５还提
供了 ｏｎｌｉｎｅ／ｏｆｆｌｉｎｅ事件。当在线／离线状态切换时，ｏｎｌｉｎｅ／
资源评论
