使用 HTML5 开发离线应用

======================================================
注：本文源代码点此下载
======================================================

郭 宗宝, 软件工程师, ibm

简介: web2.0 技术鼓励个人的参与,每个人都是 web 内容的撰写者。如果 web应用能够提供离线的功能,让用户在没有网络的地方(例如飞机上)和时候(网络坏了),也能进行内容撰写,等到有网络的时候,再同步到 web上,就大大方便了用户的使用。html5 作为新一代的 html 标准,包含了对离线功能的支持。本文介绍了 html5离线功能中的离线资源缓存、在线状态检测、本地数据存储等内容,并举例说明了如何使用 html5 的新特性开发离线应用。

html5 离线功能介绍

html5 是目前正在讨论的新一代 html 标准,它代表了现在 web 领域的最新发展方向。在 html5标准中,加入了新的多样的内容描述标签,直接支持表单验证、视频音频标签、网页元素的拖拽、离线存储和工作线程等功能。其中一个新特性就是对离线应用开发 的支持。

在开发支持离线的 web 应用程序时,开发者通常需要使用以下三个方面的功能:

离线资源缓存:需要一种方式来指明应用程序离线工作时所需的资源文件。这样,浏览器才能在在线状态时,把这些文件缓存到本地。此后,当用户离线访问应用程 序时,这些资源文件会自动加载,从而让用户正常使用。html5 中,通过 cache manifest文件指明需要缓存的资源,并支持自动和手动两种缓存更新方式。

在线状态检测:开发者需要知道浏览器是否在线,这样才能够针对在线或离线的状态,做出对应的处理。在 html5 中,提供了两种检测当前网络是否在线的方式。

本地数据存储:离线时,需要能够把数据存储到本地,以便在线时同步到服务器上。为了满足不同的存储需求,html5 提供了 dom storage 和web sql database 两种存储机制。前者提供了易用的 key/value 对存储方式,而后者提供了基本的关系数据库存储功能。

尽管 html5 还处于草稿状态,但是各大主流浏览器都已经实现了其中的很多功能。chrome、firefox、safari 和opera 的最新版本都对 html5 离线功能提供了完整的支持。ie8 也支持了其中的在线状态检测和 dom storage功能。下面将具体介绍 html5 离线功能中的离线资源缓存、在线状态检测、dom storage 和 web sqldatabase,最后通过一个简单的 web 程序说明使用 html5 开发离线应用的方法。

回页首

离线资源缓存

为了能够让用户在离线状态下继续访问 web 应用,开发者需要提供一个 cache manifest文件。这个文件中列出了所有需要在离线状态下使用的资源,浏览器会把这些资源缓存到本地。本节先通过一个例子展示 cache manifest文件的用途,然后详细描述其书写方法,最后说明缓存的更新方式。

cache manifest 示例

我们通过 w3c 提供的示例来说明。clock web 应用由三个文件“clock.html”、“clock.css”和“clock.js”组成。

清单 1. clock 应用代码

在 body 中声明了一个按钮和一个无序列表。当按下“new note”按钮时,newnote 函数将被调用,它用来添加一条新的便签。而无序列表初始为空,它是用来显示便签的列表。

cache manifest 文件

定义 cache manifest文件,声明需要缓存的资源。在这个例子中,需要缓存“index.html”、“server.js”、“data.js”和“ui.js”等 4个文件。除了前面列出的“index.html”外,“server.js”、“data.js”和“ui.js”分别包含服务器相关、数据存储和用户界 面代码。cache manifest 文件定义如下。

清单 9 cache manifest 文件

cache manifestindex.htmlserver.jsdata.jsui.js

用户界面代码

用户界面代码定义在 ui.js 中。

清单 10 用户界面代码 ui.js

function newnote(){var title = window.prompt("new note:");if (title){add(title);}}function add(title){// 在界面中添加adduiitem(title);// 在数据中添加adddataitem(title);}function remove(title){// 从界面中删除removeuiitem(title);// 从数据中删除removedataitem(title);}function adduiitem(title){var item = document.createelement("li");item.setattribute("ondblclick", "remove('"+title+"')");item.innerhtml=title;var list = document.getelementbyid("list");list.appendchild(item);}function removeuiitem(title){var list = document.getelementbyid("list");for (var i = 0; i

ui.js 中的代码包含添加便签和删除便签的界面操作。

添加便签

用户点击“new note”按钮,newnote 函数被调用。

newnote 函数会弹出对话框,用户输入新便签内容。newnote 调用 add 函数。

add 函数分别调用 adduiitem 和 adddataitem 添加页面元素和数据。adddataitem 代码将在后面列出。

adduiitem 函数在页面列表中添加一项。并指明 ondblclick 事件的处理函数是 remove,使得双击操作可以删除便签。

删除便签

用户双击某便签时,调用 remove 函数。

remove 函数分别调用 removeuiitem 和 removedataitem 删除页面元素和数据。removedataitem 将在后面列出。

removeuiitem 函数删除页面列表中的相应项。

数据存储代码

数据存储代码定义在 data.js 中。

清单 11 数据存储代码 data.js

var storage = window['localstorage'];function adddataitem(title){if (navigator.online) // 在线状态{addserveritem(title);}else // 离线状态{var str = storage.getitem("toadd");if(str == null){str = title;}else{str = str + "," + title;}storage.setitem("toadd", str);}}function removedataitem(title){if (navigator.online) // 在线状态{removeserveritem(title);}else // 离线状态{var str = storage.getitem("toremove");if(str == null){str = title;}else{str = str + "," + title;}storage.setitem("toremove", str);}}function syncwithserver(){// 如果当前是离线状态,不需要做任何处理if (navigator.online == false)return;var i = 0;// 和服务器同步添加操作var str = storage.getitem("toadd");if(str != null){var additems = str.split(",");for(i = 0; i

window.addeventlistener("online", syncwithserver,false);

data.js 中的代码包含添加便签、删除便签和与服务器同步等数据操作。其中用到了 navigator.online 属性、online 事件、dom storage 等 html5 新功能。

添加便签:adddataitem

通过 navigator.online 判断是否在线。

如果在线,那么调用 addserveritem 直接把数据存储到服务器上。addserveritem 将在后面列出。

如果离线,那么把数据添加到 localstorage 的“toadd”项中。

删除便签:removedataitem

通过 navigator.online 判断是否在线。

如果在线,那么调用 removeserveritem 直接在服务器上删除数据。removeserveritem 将在后面列出。

如果离线,那么把数据添加到 localstorage 的“toremove”项中。

数据同步:syncwithserver

在 data.js 的最后一行,注册了 window 的 online 事件处理函数 syncwithserver。当 online 事件发生时,syncwithserver 将被调用。其功能如下。

如果 navigator.online 表示当前离线,则不做任何操作。

把 localstorage 中“toadd”项的所有数据添加到服务器上,并删除“toadd”项。

把 localstorage 中“toremove”项的所有数据从服务器中删除,并删除“toremove”项。

删除当前页面列表中的所有便签。

调用 getserveritems 从服务器获取所有便签,并添加在页面列表中。getserveritems 将在后面列出。

服务器相关代码

服务器相关代码定义在 server.js 中。

清单 12 服务器相关代码 server.js

function addserveritem(title){// 在服务器中添加一项}function removeserveritem(title){// 在服务器中删除一项}function getserveritems(){// 返回服务器中存储的便签列表}

由于这部分代码与服务器有关,这里只说明各个函数的功能,具体实现可以根据不同服务器编写代码。

在服务器中添加一项:addserveritem

在服务器中删除一项:removeserveritem

返回服务器中存储的便签列表:getserveritems

回页首

总结

本文介绍了 html5 为了支持离线应用程序新增的强大功能。通过阅读本文,读者能够了解到 html5 中离线相关特性的基本用法,从而掌握利用 html5 开发 web 离线应用的方法。

参考资料

w3c 的 html5 规范:对 html5 规范进行了全面描述。

whatwg 主页:whatwg 是 html5 规范的制定者。

mozilla 离线应用:本文中的例子参考了它的实现。

safari 离线应用开发指南:使用 safari 开发离线应用的资料。

developerworks web development 专区:通过专门关于 web 技术的文章和教程,扩展您在网站开发方面的技能。

developerworks ajax 资源中心:这是有关 ajax 编程模型信息的一站式中心,包括很多文档、教程、论坛、blog、wiki 和新闻。任何 ajax 的新信息都能在这里找到。

developerworks web 2.0 资源中心,这是有关 web 2.0 相关信息的一站式中心,包括大量 web 2.0 技术文章、教程、下载和相关技术资源。您还可以通过 web 2.0 新手入门 栏目,迅速了解 web 2.0 的相关概念。

关于作者

郭宗宝现在 ibm 中国软件开发实验室 lotus 开发中心工作,目前从事 lotus quickr 的客户支持工作。对 web 服务,web 2.0 相关技术有浓厚的兴趣。 您可以在 my developerworks 社区中找到他:http://www.ibm.com/developerworks/mydeveloperworks/profiles/user/nkhit。

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/