HTML5移动应用开发第3章：移动Web离线应用

先决条件

在本文中，您将使用最新 Web 技术开发 Web 应用程序。这里的大多数代码只是 HTML、javaScript 和 CSS — 任何 Web 开发人员的核心技术。需要的最重要的东西是用于测试代码的浏览器。本文中的大多数代码将运行在最新的桌面浏览器上，例外的情况会指出来。当然，还必须在移动浏览器上进行测试，您肯定希望最新的 iPhone 和 Android SDK 支持这些代码。本文中使用的是 iPhone SDK 3.1.3 和 Android SDK 2.1。

为何要支持您的应用程序离线工作？

由于几个原因，离线 Web 应用程序对于用户和开发人员都有吸引力。许多开发人员希望能够编写一个能够在所有最流行的智能手机上运行的 Web 应用程序，而不是为每个平台编写本机应用程序。这对开发人员很方便，但并不意味这这是用户的愿望。为实现上述目标，移动 Web 应用程序必须能够提供本机移动应用程序能够提供的许多（或绝大部分）相同的特性。离线工作肯定是其中一个特性。有些应用程序非常依赖来自 Internet 的数据和服务 — 不管它们是移动 Web 还是本机应用程序。但是，应用程序不能仅仅因为用户的连接不好而完全失败。但这正是传统 Web 应用程序的症结所在。

离线功能使移动 Web 应用程序类似于本机应用程序。此外，离线功能还有其他好处。Web 浏览器总是缓存静态资源。它们依赖通过您的 Web 服务器发送的 HTTP 响应头部中的元数据来检索渲染页面所需的 HTML、Javascript、CSS 和图像。如果渲染页面所需的所有资源都已缓存，那么页面就可以非常迅速地加载。但是，如果某个资源没有缓存，那么它将极大地降低页面载入速度。这种情况经常发生，实在是让人无法忍受。也许一个 CSS 文件拥有一个与其他所有文件都不同的 Cache-Control 头部，或者，也许是浏览器因为耗尽了已分配空间而无法缓存。

使用离线应用程序，您可以确保所有资源都会被缓存。浏览器将总是从缓存加载所有资源，尽管您也能够控制哪些资源从缓存加载。一种常见的 Ajax 技巧是将一个额外的时间戳参数添加到 AjaxGET请求（或者，更糟糕的是在应该使用GET时使用POST）来避免浏览器缓存一个响应。您无需使用这种技巧来支持离线 Web 应用程序。

离线应用程序听起来挺棒，那么创建一个离线应用程序一定很复杂，对吧？实际上，创建方法非常简单，只需完成下面三个步骤：

1. 创建一个在线清单文件。
2. 告知浏览器这个清单文件。
3. 设置服务器上的 MIME 类型。