HTML5+CSS3之离线web应用
不需要网络连接仍可访问网站内容似不似很酷？H5为其提供了可能！
让我们假设有一个在线笔记应用，当用户的手机网络断开时，他可能正在编辑一则笔记。使用
HTML5的离线 Web应用，他就可以继续离线编辑笔记，然后等到网络再次连接时将本地
数据发送到服务器。
一、离线web应用概述
离线Web应用的运行机制是每个需要离线使用的网页都指定一个后缀名为 .manifest 的
文本文件。这个文本文件罗列了该网页离线使用时所需的所有资源文件（HTML、图片
JavaScript等等）。支持离线 Web应用的浏览器会自动读取 .manifest 文件，下载文件中
所罗列的资源文件，并将其缓存在本地以备网络断开时使用。
二、让网页可离线使用
首先，我们需要为每一个需要离线访问的网页指定一个.manifest文件，后缀名建议使用 .manifest。
<html lang="en" manifest="/offline.manifest"
如果使用的是 Apache服务器，你可能还需要修改一下 .htaccess 文件，追加一行代码：
AddType text/cache-manifest .manifest
这样就保证了 .manifest 文件拥有正确的 MIME类型，即 text/cache-manifest 。
在 .htaccess 文件中还可以加入以下代码：
<Files offline.manifest>
ExpiresActive On
ExpiresDefault "access"
</Files>
可以阻止浏览器缓存缓存文件
现在，我们给.manifest文件添加一些内容：
CACHE MANIFEST #v1 CACHE: basic_page_layout_ch4.html css/main.css img/atwiNavBg.png img/kingHong.jpg img/midnightRun.jpg img/moulinRouge.jpg img/oscar.png img/wyattEarp.jpg img/buntingSlice3Invert.png img/buntingSlice3.png NETWORK: * FALLBACK: //offline.html
三、理解 manifest 文件
manifest 文件必须以 CACHE MANIFEST 开头。
第二行就是一句注释，注明了 manifest 文件的版本号。
CACHE: 部分罗列了所有离线使用所需的文件。这些文件的路径都是相对.manifest而言的，当然也可以使用绝对路径
NETWORK: 部分罗列了所有不需要被缓存的文件。你可以将其看成是一个“在线白名单”。
此处罗列的文件在网络畅通的情况下都会直接跳过缓存。如果你想网站内容在网络畅通
的情况下及时更新（而不是仅在离线缓存中查找），可以在此处使用*。星号被称为在线
白名单通配符。
FALLBACK: 部分使用/字符定义了一个 URL模板。它的作用是访问每个页面时都会问“缓存
中有这个页面吗？”，如果有则显示缓存页面，如果没有则显示指定的 offline.html 文件。
四、页面被自动加载到离线缓存
根据实际情况，还有一种更简单的办法来设置 offline.manifest 文件。任何指定了离
线 manifest 文件的页面（就是在标签中追加了 manifest="/offline.manifest" 的页
面）在被用户访问时都会被自动加入到本地缓存。浏览器会缓存用户访问过的每一个网
页以确保这些网页在离线状态下仍可访问。简化的 manifest文件如下：
1 CACHE MANIFEST 2 # Cache Manifest v1 3 FALLBACK: 4 //offline.html 5 NETWORK: 6 *
选择使用这个方法时有一点需要注意，这种方法只会下载和缓存用户访问的 HTML页面，
不会缓存页面内引入的图片、JavaScript或者其他资源文件。如果这些资源文件是必需的，
那么请按照上节中的方法在 CACHE: 部分专门声明这类文件。
五：版本注释的用途
对网站内容或任何资源文件做了修改之后，你必须得对 offline.manifest 文件也做点
修改并将其重新上传服务器。这样就能让服务器为浏览器提供新版本文件，而浏览器则
会下载该新版本文件并再次触发离线存储进程。在.manifest 文件的头部加了一句注释，每次
修改网站都会对应地修改该版本号：
# Cache Manifest v1
由于离线存储需要做大量的测试，所以这一节只能讲解一下基本过程，具体还需要动手去试试验证下效果。
