基于HTML5的离线Web应用设计与实现

尹乐　许刚强

摘要：文章主要介绍利用HTML5提供的缓存控制机制和本地存储支持构建离线Web应用。介绍HTML5标准中提供的缓存文件清单、网络状态检测、Web Storage、IndexedDB等与离线应用有关的功能，以一个填报周报的应用场景介绍HTML5离线Web应用的实现方式，并对localstorage和IndexedDB两种本地存储实现方式进行了对比。

关键词：RIA；HTML5；离线Web应用

中图分类号：TP393 文献标识码：A 文章编号：1009-2374（2014）12-0017-03

随着Web技术的不断发展，构建在B/S架构上的Web应用程序在很多领域得到了广泛的应用。使用Web应用程序需要用户和服务器建立连接，否则B/S应用程序无法正常运行。

要实现离线Web应用，可用的技术手段包括脱机浏览、Flash/Flex、Google Gears、HTML5等。其中HTML5方式具有可跨平台、不需要安装插件、提供一致的用户体验等优势。通过HTML5提供的离线支持，用户在掉线的情况下仍然能使用Web应用提供的部分功能，适用于网络环境较差的情况或是移动应用领域。

1 HTML5离线应用

1.1 HTML5简介及现状

HTML5是新一代的HTML标准版本，强化了 Web 网页的表现性能和Web应用的功能，通过HTML、CSS和JavaScript的技术组合，开发富互联网应用（RIA），提升用户体验。

HTML5正在不断的发展和完善中。2013年5月，HTML 5.1正式草案公布。目前大部分主流浏览器厂商都对HTML5提供了支持，如Firefox、IE、Chrome、Safari等。

1.2 HTML5缓存控制机制

引入网络状态检测事件以及离线Web应用API，使基于Web技术构建的Web应用程序可以在脱机情况下使用。

（1）缓存清单文件。通过manifest属性指定缓存清单文件，按照特定格式列出哪些资源脱机时可用，这些资源构成了应用缓存，在需要的时候资源可以从应用缓存中加载。

（2）网络状态检测事件。通过online属性判断当前是否处于在线状态，实现在线状态和离线状态的不同行为模式。引入离线事件用来检测网络连接状态，通过对事件的监听，实现应用程序在线和离线自动切换。

（3）应用缓存API。定义一系列应用缓存API，用来作为操作应用缓存的接口，可以自行控制应用缓存的使用。

1.3 HTML5数据存储支持

构建离线Web应用，要解决数据的本地缓存问题。HTML5提供了Web Storage以及本地数据库两种方式支持数据在浏览器本地的存储。

（1）Web Storage。Web Storage采用“键-值”对的形式存取数据，可以将数兆字节的大数据存储在Javas cript对象中。分为local Storage和session Storage两种，主要的差异是数据的保存时长及共享方式。

（2）本地数据库。HTML5规范中，由浏览器提供本地数据库的支持，无需另外安装数据库。关于本地数据库仍在完善中，目前有Web SQL Database和Indexed Database两个主要的方案。

2 离线周报填报应用

通过缓存控制机制以及数据存储支持技术的结合使用，可以实现HTML5离线Web应用，使用户在掉线的情况下仍然能使用Web应用提供的部分功能，并在在线和离线两种状态下自行切换。

2.1 应用描述

应用模拟实现用户填写周报的场景，用户可以查看已填报的周报列表，并对周报做新建、编辑、删除操作。

应用中离线支持相关功能主要是通过HTML5以及Java Script浏览器端代码实现的，与服务器端数据的交互采用标准化的Ajax方式进行，只要服务器端能提供相应的支持，离线功能可以较为方便的移植到其他服务器框架上。

2.2 本地保存

为支持用户在离线状态下可以进行填报和编辑的操作，需要将应用相关的内容保存到本地，这里的内容包括应用界面资源以及应用数据。

（1）应用界面资源。包含HTML5文件、CSS文件、Javas cript文件以及和应用界面相关的图片资源等文件。通过缓存清单文件的方式，将这些资源保存到用户浏览器本地，保证在离线状态下，应用的界面可以正常使用。

（2）应用数据。应用数据的保存可以分为对原有数据的保存和对离线操作数据的保存两类，在数据加载和数据操作的过程中完成：

数据加载。用户访问页面加载数据时，如果是在线状态，则从服务器获取数据并将获得的数据保存到本地存储；如果是离线状态，则从本地存储中获取数据进行展示。

数据操作。在对数据做新增/修改操作时，如果是在线状态，则直接向服务器发送请求进行操作，随后在刷新页面时采用数据加载的方式，同时更新本地存储中的数据；如果是离线状态，则将用户对数据进行的操作记录在本地存储中。

删除操作比较特殊，离线状态下的删除，不能直接在数据集上做删除的操作，而是进行标记，显示的时候不做显示，直到切换到在线状态下与服务器端进行同步时才做删除的操作。

2.3 数据同步

在由离线状态切换到在线状态时进行本地和服务器端数据的同步。通过监听网络状态检测事件，将同步操作注册到online事件上。当online事件发生，即切换到在线状态时，自动触发同步操作。

数据同步通过读取本地存储中保存的离线操作记录来完成，按照记录下的操作和数据，向服务器端发送请求，实现中要保证对数据的操作可以按照记录中的顺序进行。

2.4 数据存储方式

分别用local storage和Indexed DB两种本地数据存储方式进行了实现，相对于local storage的简单易用，Indexed DB在开发实现上代价较大，但Indexed DB的查询效率更高，可以支持的数据对象类型丰富，能实现功能更复杂的应用。

2.5 实现效果

分别在计算机和移动设备上进行测试，在计算机上Firefox和Chrome可以达到效果，而IE9不提供离线支持；在移动设备上，浏览器不支持Indexed DB方式，local storage方式可以达到效果。

综合上述测试结果，目前各浏览器对HTML5规范，特别是对于本地存储数据库，支持程度有所不同，需要根据具体的需求选择适合的实现方式，如离线周报填报场景中，如果需求主要是面向移动设备的，则要选择采用local storage的方式或Web SQL的方式来实现。

3 结语

通过HTML5提供的离线支持，可以在B/S应用中实现离线存储、在线同步的功能，使Web应用可以在网络不稳定的情况下提供服务，增强Web应用程序的功能，改善用户体验。

在实际的应用系统开发中，还需要考虑更多的实现细节问题，将HTML5提供的功能与需求结合起来，全面考虑应用的场景以及所面向的对象，选择合适的实现方式和程序结构设计。

参考文献

[1] （荷）Peter Lubbers，等，柳靖，等译.HTML5程序设计（第2版）[M].北京：人民邮电出版社，2012.

[2] （美）Gauchat著，曾少宁，等.HTML5精粹：利用HTML5开发令人惊奇的Web站点和革命性应用[M].北京：机械工业出版社，2012.

[3] 罗大晖，陈娟.基于HTML5的Web离线应用研究与实现[J].计算机应用与软件，2012，（12）.