实例 - 完整的 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,在网页中打开
以 "#" 开头的是注释行