HTML5 应用缓存（Application Cache）
在HTML5中，很容易通过创建缓存清单文件创建离线的网络应用.
什么是应用缓存?
HTML5应用缓存, 意思是指网络应用被缓存后在没有网络连接时可被访问.
应用程序缓存提供的应用有三个优势:
- 离线浏览器 - 用户可以在离线的时候使用应用
- 速度快 - 加载缓存资源快
- 减少服务器负载 - 浏览器仅仅从服务器下载更新的或改变的资源
浏览器支持
IE10, 火狐, 谷歌, 苹果浏览器和欧鹏浏览器都支持应用缓存.
HTML5 缓存清单的例子
下面的例子展示了使用缓存清单的HTML文本（离线浏览器）:
缓存清单基础知识
启动应用缓存, 在文档的<html>标签中包含manifest属性:
<html manifest="demo.appcache">
...
</html>
页面的manifest属性指用户访问它时会缓存.如果没有指定manifest属性没有被指定, 网页不会被缓存(除非页面直接指定manifest文件).
推荐manifest文件使用的扩展是: ".appcache"
|
manifest文件需要服务器指定 correct MIME-type 类型的值为"text/cache-manifest". 必须配置网络服务器. |
|---|
清单（manifest）文件
manifest文件是简单的文本文件, 告诉浏览器加载缓存什么内容 (和不缓存什么内容).
manifest文件包括三个部分:
- 缓存清单 - 文件清单会在第一次使用后会被下载缓存
- 网络 - 文件清单中指定不会被缓存，需要连接到服务器
- 后退 - 文件清单指定页面无法访问时的后退页面
缓存清单
第一行, 必须添加缓存清单:
/theme.css
/logo.gif
/main.js
上面的清单文件包括3个资源: 一个CSS文件, 一个GIF图片,和一个JavaScript文件.当清单文件被加载后，浏览器会从网站根目录下载这三个文件. 然后，当用户没有连接网络的时候，资源仍会有效.
网络
下面的网络部分指定"login.php"不会被缓存，在离线的时候页面无效:
login.php
可以使用星号表明所有其他资源/文件需要互联网连接:
*
后退
下面的FALLBACK部分是指万一网络无法连接时，"offline.html"文件替换所有/html/目录中的所有文件:
/html/ /offline.html
注意: 第一个URI是指源, 第二个是指后退文件.
更新缓存
一旦使用了缓存, 在发生如下情况后缓存会被更新:
- 用户清除浏览器缓存
- 清单文件被修改(查看下面提示)
- 通过程序更新应用缓存
例子 - 完整的缓存清单文件
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html/ /offline.html
|
|
提示: 行的起始部分使用"#" 代表注释. 当清单文件改变时应用的缓存会被更新. 如果你编辑了图片或改变了JavaScript函数, 这些改变不会被重新缓存. 修改注释行中的日期和版本是让你的浏览器更新缓存的一种方式. |
|---|
注意应用缓存
小心使用缓存
一旦文件进行了缓存, 浏览器会显示缓存版本,甚至你在服务器端改了文件。为了确保浏览器更新缓存,您需要更改manifest文件.
注意: 不同浏览器缓存的数据可能有不同的大小限制 (一些浏览器的限制是5MB).
