HTML5 离线效能介绍

2012-10-08

HTML5 离线功能介绍当用户在离线状态下访问“clock.html”时，页面将无法展现。为了支持离线访问，开发者必须添

HTML5 离线功能介绍

当用户在离线状态下访问“clock.html”时，页面将无法展现。为了支持离线访问，开发者必须添加 cache manifest 文件，指明需要缓存的资源。这个例子中的 cache manifest 文件为“clock.manifest”，它声明了 3 个需要缓存的资源文件“clock.html”、“clock.css”和“clock.js”。

清单 2. clock.manifest 代码

修改后，当用户在线访问“clock.html”时，浏览器会缓存“clock.html”、“clock.css”和“clock.js”文件；而当用户离线访问时，这个 Web 应用也可以正常使用了。

这个页面的源文件是 index.html，它的代码如清单 8 所示。

清单 8 页面 HTML 代码

在 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 文件

window.addEventListener("online", SyncWithServer,false);

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

添加便签：addDataItem
1. 通过 navigator.onLine 判断是否在线。
2. 如果在线，那么调用 addServerItem 直接把数据存储到服务器上。addServerItem 将在后面列出。
3. 如果离线，那么把数据添加到 localStorage 的“toAdd”项中。
- 删除便签：removeDataItem
  1. 通过 navigator.onLine 判断是否在线。
  2. 如果在线，那么调用 removeServerItem 直接在服务器上删除数据。removeServerItem 将在后面列出。
  3. 如果离线，那么把数据添加到 localStorage 的“toRemove”项中。
  - 数据同步：SyncWithServer
    在 data.js 的最后一行，注册了 window 的 online 事件处理函数 SyncWithServer。当 online 事件发生时，SyncWithServer 将被调用。其功能如下。
    1. 如果 navigator.onLine 表示当前离线，则不做任何操作。
    2. 把 localStorage 中“toAdd”项的所有数据添加到服务器上，并删除“toAdd”项。
    3. 把 localStorage 中“toRemove”项的所有数据从服务器中删除，并删除“toRemove”项。
    4. 删除当前页面列表中的所有便签。
    5. 调用 getServerItems 从服务器获取所有便签，并添加在页面列表中。getServerItems 将在后面列出。
  - 服务器相关代码
    服务器相关代码定义在 server.js 中。
    
    清单 12 服务器相关代码 server.js
    郭宗宝现在 IBM 中国软件开发实验室 Lotus 开发中心工作，目前从事 Lotus Quickr 的客户支持工作。对 Web 服务，Web 2.0 相关技术有浓厚的兴趣。您可以在 My developerWorks 社区中找到他：http://www.ibm.com/developerworks/mydeveloperworks/profiles/user/nkhit。

热点排行

CSS

HTML5 离线效能介绍