Html5离线缓存详细讲解
实例 - 完整的 Manifest 文件
1,什么是应用程序缓存（Application Cache）
HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。
离线缓存：
离线缓存可以将站点的一些文件缓存到本地，它是浏览器自己的一种机制，
将需要的文件缓存下来，以便后期即使没有连接网络，被缓存的页面也可以展示。
即使有网络，优先本地存储的资源
2,应用程序缓存为应用带来三个优势：
* 离线浏览 - 用户可在应用离线时使用它们
* 速度 - 已缓存资源加载得更快
* 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
* 【
在没有网络的时候可以访问到缓存的对应的站点页面，包括html，js，css，img等等文件
在有网络的时候，浏览器也会优先使用已离线存储的文件，返回一个200（from cache）头。这跟HTTP的缓存使用策略是不同的
资源的缓存可以带来更好的用户体验，当用户使用自己的流量上网时，本地缓存不仅可以提高用户访问速度，而且大大节约用户的使用流量。
】
3，如何实现离线缓存：
a）Cache Manifest 基础
如需启用应用程序缓存，请在文档的<html> 标签中包含 manifest 属性：
* 在需要缓存的html根节点上面添加属性 manifest ，属性值是一个 . appcache 文件；
Appcache 是一个控制缓存文件
* 在同目录下创建demo.appcache 文件，幷添加配置项
b）Manifest 文件
manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。
manifest 文件可分为三个部分：
CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
* CACHE MANIFEST
第一行，CACHE MANIFEST，是必需的：
CACHE MANIFEST
/theme.css
/logo.gif
/main.js
上面manifest 文件列出了三个资源：一个 CSS 文件，一个 GIF 图像，一个 JavaScript 文件
* NETWORK
NETWORK:
login.php
可以使用星号来指示所有其他资源/文件都需要因特网连接：
NETWORK:
*
* FALLBACK
FALLBACK:
/html/ /offline.html
第一个 URI 是资源，第二个是替补。
4，更新缓存：
一旦应用被缓存，它就会保持缓存直到发生下列情况：
用户清空浏览器缓存
manifest 文件被修改
由程序来更新应用缓存
5，在服务器端将.appcache文件的mime类型配置成 text/cache-manifest
下面以phpstudy为例
打开，mime.types ,在后面添加----
6，在网页中打开
以 "#" 开头的是注释行
