使用 HTML5 创建移动设备上的离线 Web 应用程序.docVIP

使用 HTML5 创建移动设备上的离线 Web 应用程序 简介 在移动应用程序中使用 Web 开发的趋势逐渐增强。然而，间歇性网络可用性对于使用 Web 技术作为云基础架构一部分是一个巨大障碍。传统的 Web 应用程序没有网络就无法工作。解决方案之一是使用 HTML5 标准的两个特性（查看?参考资料）： 离线 Web 应用程序 客户端数据存储 用户可在移动设备上使用云功能，使用部署在本地数据库上的应用程序来工作，当再次上线时与云的其他部分共享数据。 在本文中，将学习典型使用场景的技术细节。将用一个简单的库存管理应用程序原型来演示 HTML5 技术。 在下面的下载表中?下载?本文示例应用程序源代码。 概览 图 1 是示例应用程序架构主要部件概览。 图 1. 离线 Web 应用程序核心元素? HTML 页面 HTML 页面，作为应用程序核心，起到模型作用。它包含要显示的数据以及（默认）提交信息。页面的 HTML 元素是按 HTML Document Object Model (DOM) 树层级组织的。用户发起的事件产生一个传统的请求-响应循环，其中有页面加载和执行相关 JavaScript 函数。 值得注意的是，本应用程序包含一个单独的 HTML 页面，无需通过请求-响应循环加载更多 HTML 页面。所有动作都在一个页面上。 JavaScript JavaScript 元素包含应用程序控制器函数。HTML 元素通过事件处理器绑定到 JavaScript 函数。JavaScript 能通过用所有用户界面（UI）元素访问应用程序的 HTML DOM 树，并将其用作运算的数据输入。处理结果可以通过修改 HTML 页面显示给用户。 层叠样式表 层叠样式表（CSS）描述 HTML 页面如何提交。此处省略视图任务以简化方案。对于这一阶段扩展，只使用 HTML 元素的默认提交行为。 对于移动设备，有各种 JavaScript/CSS 库和框架来发布与 Web 应用程序接近的用户体验（例如，用于 iPhone 的 iUi）。请查看?参考资料?获取更多信息。尽管需要增加用户接受度，但本方法有着平台依赖性的劣势。 数据库 HTML5 标准引入本地数据库存储。它是在 Apple? Safari 浏览器目前版本中实现的。浏览器提供嵌入式数据库，即 SQLite，它可以通过处理 SQL 查询从 JavaScript 访问。应用程序模型的业务数据存储在这里。 清单 清单文件是离线 Web 应用程序的强制性部署描述符组件。它只是简单列举需要加载的文件。 示例应用程序 本节概述示例应用程序 MyHomeStuff。它是一个简单的库存管理应用程序，可以用于追踪所拥有的物资。 图 2 显示的是 iPhone 上的应用程序。 图 2. iPhone 视图? 为简单起见，此处省略服务器段的数据同步。图 3 显示的是 Palm Pre Web 浏览器上的 MyHomeStuff 库存管理应用程序。 图 3. Palm Pre 视图? 屏幕上半段是所有输入项目（书籍、电脑等）的概览。 当用户在清单中选择某一项目，其明细（Id、Quantity、Name）在表单中部显示。使用 Update 按钮可改变所选项目的明细。使用 Delete 按钮还可从应用程序中删除所选项目。在表单中输入项目的数量和名称并选择 Create 按钮可创建新项目。 应用程序状态显示在屏幕下半段。 HTML 细节 HTML 页面包含声明、原标记，这些用于移动优化显示、对外部文件（manifest、JavaScript、css）是引用、以及组成应用程序基本结构必需的 HTML 元素。清单 1 显示了其代码。 清单 1. HTML 代码 !DOCTYPE HTML html manifest=MyHomeStuff.manifest head meta name=viewport content=width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0; titleMyHomeStuff/title script type=text/javascript src=MyHomeStuff.js /script /head body onload=onInit() h3Overv