回页首
离线应用示例
最后，通过一个例子来说明使用 HTML5 开发离线应用的基本方法。这个例子会用到前面提到的离线资源缓存、在线状态检测和 DOM Storage
等功能。假设我们开发一个便签管理的 Web
应用程序，用户可以在其中添加和删除便签。它支持离线功能，允许用户在离线状态下添加、删除便签，并且当在线以后能够同步到服务器上。
- 应用程序页面
这个程序的界面很简单，如图 1 所示。用户点击“New Note”按钮可以在弹出框中创建新的便签，双击某便签就表示删除它。
图 1. 应用程序页面
这个页面的源文件是 index.html，它的代码如清单 8 所示。
清单 8 页面
HTML 代码<html manifest="notes.manifest"> <head> <script type="text/javascript" src="server.js"></script> <script type="text/javascript" src="data.js"></script> <script type="text/javascript" src="UI.js"></script> <title>Note List</title> </head> <body onload = "SyncWithServer()"> <input type="button" value="New Note" onclick="newNote()"> <ul id="list"></ul> </body> </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
文件CACHE MANIFEST index.html server.js data.js UI.js
- 用户界面代码
用户界面代码定义在 UI.js 中。
清单 10 用户界面代码
UI.jsfunction 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 < list.children.length; i++) { if(list.children[i].innerHTML == title) { list.removeChild(list.children[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.jsvar 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<addItems.length; i++) { addDataItem(addItems[i]); } storage.removeItem("toAdd"); } // 和服务器同步删除操作 str = storage.getItem("toRemove"); if(str != null) { var removeItems = str.split(","); for(i = 0; i<removeItems.length; i++) { removeDataItem(removeItems[i]); } storage.removeItem("toRemove"); } // 删除界面中的所有便签 var list = document.getElementById("list"); while(list.lastChild != list.firstElementChild) list.removeChild(list.lastChild); if(list.firstElementChild) list.removeChild(list.firstElementChild); // 从服务器获取全部便签，并显示在界面中 var allItems = getServerItems(); if(allItems != "") { var items = allItems.split(","); for(i = 0; i<items.length; i++) { addUIItem(items[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 中。