电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: 使用 HTML5 创建移动设备上的离线 Web 应用程序（1） [打印本页]

作者: look_w 时间: 2018-9-19 20:38 标题: 使用 HTML5 创建移动设备上的离线 Web 应用程序（1）

简介在移动应用程序中使用 Web 开发的趋势逐渐增强。然而，间歇性网络可用性对于使用 Web 技术作为云基础架构一部分是一个巨大障碍。传统的 Web 应用程序没有网络就无法工作。解决方案之一是使用 HTML5 标准的两个特性（查看）：

离线 Web 应用程序
客户端数据存储

用户可在移动设备上使用云功能，使用部署在本地数据库上的应用程序来工作，当再次上线时与云的其他部分共享数据。
在本文中，将学习典型使用场景的技术细节。将用一个简单的库存管理应用程序原型来演示 HTML5 技术。
在下面的下载表中本文示例应用程序源代码。
图 1 是示例应用程序架构主要部件概览。
图 1. 离线 Web 应用程序核心元素

HTML 页面HTML 页面，作为应用程序核心，起到模型作用。它包含要显示的数据以及（默认）提交信息。页面的 HTML 元素是按 HTML Document Object Model (DOM) 树层级组织的。用户发起的事件产生一个传统的请求-响应循环，其中有页面加载和执行相关 JavaScript 函数。                值得注意的是，本应用程序包含一个单独的 HTML 页面，无需通过请求-响应循环加载更多 HTML 页面。所有动作都在一个页面上。
JavaScriptJavaScript 元素包含应用程序控制器函数。HTML 元素通过事件处理器绑定到 JavaScript 函数。JavaScript 能通过用所有用户界面（UI）元素访问应用程序的 HTML DOM 树，并将其用作运算的数据输入。处理结果可以通过修改 HTML 页面显示给用户。          层叠样式表层叠样式表（CSS）描述 HTML 页面如何提交。此处省略视图任务以简化方案。对于这一阶段扩展，只使用 HTML 元素的默认提交行为。    对于移动设备，有各种 JavaScript/CSS 库和框架来发布与 Web 应用程序接近的用户体验（例如，用于 iPhone 的 iUi）。请查看  获取更多信息。尽管需要增加用户接受度，但本方法有着平台依赖性的劣势。
数据库HTML5 标准引入本地数据库存储。它是在 Apple® Safari 浏览器目前版本中实现的。浏览器提供嵌入式数据库，即 SQLite，它可以通过处理 SQL 查询从 JavaScript 访问。应用程序模型的业务数据存储在这里。         清单清单文件是离线 Web 应用程序的强制性部署描述符组件。它只是简单列举需要加载的文件。

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)