Question

虽然HTML5中的大量新特性对我们的响应式设计没有明显帮助（如地理定位API），但离线Web应用应该还有点用处。我们知道肯定会有越来越多的移动设备用户访问我们的网站，为他们提供一种不需要网络连接仍可访问网站内容的途径如何？HTML5的离线Web应用特性将其变成了可能。

这个功能很明显是用于Web应用的（真够搞笑的，不知道他们对这个名字是怎么想的）。假设有一个在线笔记应用，当用户的手机网络断开时，他可能正在编辑一则笔记。使用HTML5的离线Web应用，他就可以继续离线编辑笔记，然后等到网络再次连接时将本地数据发送到服务器。

HTML5离线Web应用的最美妙之处在于它的设置和使用都超级简单。接下来，我们将使用这项技术——为我们的网站创建一个离线版本。这意味着如果用户想在没有网络的情况下访问我们的网站，他也能做到！

4.10.1　离线Web应用概述

离线Web应用的运行机制是每个需要离线使用的网页都指定一个后缀名为.manifest的文本文件。这个文本文件罗列了该网页离线使用时所需的所有资源文件（HTML、图片JavaScript等等）。支持离线Web应用的浏览器会自动读取.manifest文件，下载文件中所罗列的资源文件，并将其缓存在本地以备网络断开时使用。简单吧？那我们来动手试一试……

4.10.2　让网页可离线使用

在HTML的开始标签中，我们指定一个.manifest文件：

该文件的文件名随意，但后缀名建议使用.manifest。

你必须在每一个准备离线使用的页面的HTML标签中都追加manifest＝"/offline.manifest"属性。

如果使用的是Apache服务器，你可能还需要修改一下.htaccess文件，追加一行代码：

这样就保证了.manifest文件拥有正确的MIME类型，即text/cache-manifest。在.htaccess文件中还可以加入以下代码：

添加上面这几行代码，可以阻止浏览器缓存缓存文件。你没看错。因为offline.manifest是一个静态文件，浏览器默认就会缓存offline.manifest文件。所以上面这几行代码就是让服务器告诉浏览器不要这么干！

现在我们需要给offline.manifest填充内容。即通知浏览器那些文件是用作离线存储的。And the winner isn’t...网站的offline.manifest文件内容如下：

4.10.3　理解manifest文件

manifest文件必须以CACHE MANIFEST开头。第二行就是一句注释，注明了manifest文件的版本号。这句注释的用途稍后详细介绍。

CACHE：部分罗列了所有离线使用所需的文件。这些文件的路径都是相对offline.manifest而言的，所以文件路径可能需要根据情况稍作修改。使用绝对路径也是可以的。

NETWORK：部分罗列了所有不需要被缓存的文件。你可以将其看成是一个“在线白名单”。此处罗列的文件在网络畅通的情况下都会直接跳过缓存。如果你想网站内容在网络畅通的情况下及时更新（而不是仅在离线缓存中查找），可以在此处使用*。星号被称为在线白名单通配符。

FALLBACK：部分使用/字符定义了一个URL模板。它的作用是访问每个页面时都会问“缓存中有这个页面吗？”，如果有则显示缓存页面，如果没有则显示指定的offline.html文件。

4.10.4　页面被自动加载到离线缓存

根据实际情况，还有一种更简单的办法来设置offline.manifest文件。任何指定了离线manifest文件的页面（就是在标签中追加了manifest＝"/offline.manifest"的页面）在被用户访问时都会被自动加入到本地缓存。浏览器会缓存用户访问过的每一个网页以确保这些网页在离线状态下仍可访问。简化的manifest文件如下：

选择使用这个方法时有一点需要注意，这种方法只会下载和缓存用户访问的HTML页面，不会缓存页面内引入的图片、JavaScript或者其他资源文件。如果这些资源文件是必需的，那么请按照上节中的方法在CACHE：部分专门声明这类文件。

4.10.5　版本注释的用途

对网站内容或任何资源文件做了修改之后，你必须得对offline.manifest文件也做点修改并将其重新上传服务器。这样就能让服务器为浏览器提供新版本文件，而浏览器则会下载该新版本文件并再次触发离线存储进程。我效仿了Mark Pilgrim的例子（来自著名的《畅游HTML5》 一书），在offline.manifest文件的头部加了一句注释，每次修改网站都会对应地修改该版本号：⁽⁴⁾

4.10.6　离线访问网站

现在来测试一下我们的作品。在支持离线Web应用的浏览器中访问网页。一些浏览器会提示该网页使用了离线模式并在本地保存数据（例如Firefox，注意看下面截图中顶部的通知栏），Chrome则不会提示：

接着，拔掉网线（或者关闭WiFi——这个没有“拔掉网线”听着霸气）然后刷新浏览器。网页应该会和联网状态下一样刷新显示——其实我们没联网。

4.10.7　离线Web应用的故障诊断

当网站在离线状态下出现问题导致无法正常运行时，我一般都使用Chrome来做故障诊断。Chrome内置的开发人员工具有一个非常好用的Console控制台（点击地址栏右侧的扳手图标，然后找到工具 | 开发者工具，之后切换到Console面板；或者直接按F12），从中可以看出哪些文件缓存成功，那些缓存失败，以及你做错了什么。以我的经验，通常是文件路径出现问题，例如缓存页面相对于manifest文件的路径不正确。

离线Web应用的完整规范，请见如下网址：