网络是任何 Web 应用的关键组成部分，无论它是用于下载 JavaScript、CSS 和 HTML 源文件以及相关资源（图像、视频等），还是用于访问 Web 服务（XMLHttpRequest 和<forms>）。

但是，为 Web 应用提供离线支持对用户来说非常有用。例如，想象一个 Web 邮件应用，即使在用户断开连接时，也允许用户阅读其收件箱中的邮件并撰写新邮件。

用于支持离线 Web 应用的机制还可以用于通过将数据存储在缓存中来提高应用的性能，或者在用户会话之间以及重新加载和恢复页面时使数据保持持久性。

演示：待办事项列表管理器

要查看离线 Web 应用的实际操作，请观看 Vivien Nicolas 的演示（OGV、MP4），该演示展示了在运行 Firefox 的 N900 上在线和离线运行的待办事项列表管理器。

您还可以查看该应用的在线演示。

创建您自己的离线应用

要使 Web 应用能够离线工作，您需要考虑以下三点

• 通过localStorage存储用户输入
• 通过清单文件定义哪些文件应该被缓存
• 使用在线和离线事件管理连接更改

让我们看看如何使用这些组件。

存储：持久性数据

DOM 存储允许您在浏览器会话之间存储数据，在选项卡之间共享数据，并防止数据丢失（例如来自页面重新加载或浏览器重新启动）。数据以字符串（例如 JSON 格式的 JavaScript 对象）的形式存储在 Storage 对象中。

有两种存储全局对象：sessionStorage 和 localStorage。

• sessionStorage维护一个在页面会话期间可用的存储区域。页面会话持续到浏览器打开的时间，并在页面重新加载和恢复期间保持不变。在新选项卡或窗口中打开页面会导致启动新的会话。
• localStorage维护一个可用于长时间保存数据（例如，跨多个页面和浏览器会话）的存储区域。当用户关闭浏览器或关闭计算机时，它不会被销毁。

localStorage 和 sessionStorage 都使用以下 API

window.localStorage and window.sessionStorage {
  long length; // Number of items stored
  string key(long index); // Name of the key at index
  string getItem(string key); // Get value of the key
  void setItem(string key, string data); // Add a new key with value data
  void removeItem(string key); // Remove the item key
  void clear(); // Clear the storage
};

以下是一个显示如何存储和读取字符串的示例

// save the string
function saveStatusLocally(txt) {
  window.localStorage.setItem("status", txt);
}

// read the string
function readStatus() {
   return window.localStorage.getItem("status");
}

请注意，存储属性仅限于 HTML5 来源（方案 + 主机名 + 非标准端口）。这意味着来自 http://foo.com 的 window.localStorage 与来自 http://bar.com 的 window.localStorage 是不同的实例。例如，http://google.com 无法访问 http://yahoo.com 的存储。

我们是否离线？

在存储数据之前，您可能希望知道用户是否在线。例如，这对于确定是在本地（客户端）存储值还是将其发送到服务器很有用。

使用navigator.onLine属性检查用户是否在线。
此外，您可以通过侦听窗口元素的online和offline事件来获取任何连接更改的通知。

这是一段非常简单的 JavaScript 代码，它将您的状态发送到服务器（类似于 Twitter）。

• 如果您设置了状态并且在线，它会发送状态。
• 如果您设置了状态并且离线，它会存储您的状态。
• 如果您上线并且有存储的状态，它会发送存储的状态。
• 如果您加载页面，并且在线且有存储的状态，它会发送存储的状态。

function whatIsYourCurrentStatus() {
  var status = window.prompt("What is your current status?");
  if (!status) return;
  if (navigator.onLine) {
    sendToServer(status);
  } else {
    saveStatusLocally(status);
  }
}

function sendLocalStatus() {
  var status = readStatus();
  if (status) {
    sendToServer(status);
    window.localStorage.removeItem("status");
  }
}


window.addEventListener("load", function() {
   if (navigator.onLine) {
     sendLocalStatus();
   }
}, true);

window.addEventListener("online", function() {
  sendLocalStatus();
}, true);

window.addEventListener("offline", function() {
  alert("You're now offline. If you update your status, it will be sent when you go back online");
}, true);

离线资源：缓存清单

离线时，用户的浏览器无法访问服务器以获取可能需要的任何文件。您不能总是依赖浏览器的缓存包含所需的资源，因为用户可能已清空了缓存，例如。这就是为什么您需要明确定义哪些文件必须存储，以便在用户离线时所有所需的文件和资源都可用：HTML、CSS、JavaScript 文件和其他资源，如图像和视频。

清单文件在 HTML 中指定，并包含应用应为离线使用而缓存的文件的明确列表。

这是一个清单文件内容的示例

CACHE MANIFEST
fonts/MarketingScript.ttf
css/main.css
css/fonts.css
img/face.gif
js/main.js
index.xhtml

清单文件的 MIME 类型必须是：text/cache-manifest。

查看文档以了解有关清单文件格式和缓存行为的更多详细信息。

总结

在使应用能够离线工作时，您应该记住的关键组件是将用户输入存储在 localStorage 中，创建一个缓存清单文件，以及监控连接更改。

访问Mozilla 开发者中心以获取完整文档。