HTML5应用缓存

使用应用程序缓存，通过创建缓存清单文件，可以轻松地创建web应用程序的脱机版本.

什么是应用缓存?

HTML5 介绍应用程序缓存，这意味着Web应用程序缓存，并且在没有Internet连接的时候可访问。

应用程序缓存给出了应用程序的三个优点:

  1. 离线浏览 - 用户可以在离线时使用应用程序
  2. 速度 - 缓存资源加载速度更快
  3. 减少服务器的负载 - 浏览器只会从服务器下载更新/更改的资源

浏览器支持

表中的数字指定第一个完全支持应用程序缓存的浏览器版本.

API
应用程序缓存 4.0 10.0 3.5 4.0 11.5

HTML缓存清单的例子

下面的例子显示了一个缓存清单的HTML文档（离线浏览）:

<!DOCTYPE HTML>
<html manifest="demo.appcache">

<body>
The content of the document......
</body>

</html>

让我试试

缓存清单基础

要启用应用程序缓存，请在文档中包含清单属性:

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

当用户访问它时，将指定具有指定属性的每一页。如果未指定清单属性，则不会缓存该页（除非页直接在清单文件中指定）.

清单文件的推荐文件扩展名为: ".appcache"

清单文件需要与 正确的媒体类型 一起使用, "text/cache-manifest". 必须配置在web服务器上.

清单文件

清单文件是一个简单的文本文件，它告诉浏览器要缓存什么（以及什么永远不要缓存）。.

清单文件有三个部分:

  • CACHE MANIFEST - 此标头下列出的文件它们首次下载将被缓存
  • NETWORK - 此标头下列出的文件需要与服务器连接，而且不会缓存
  • FALLBACK - 此标头下列出的文件如果页面不能访问的反馈页面

缓存清单

第一行，CACHE MANIFEST，是必需的

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

上面的清单文件列出了三个资源: 一个CSS文件，GIF图像，和一个JavaScript文件.

当加载清单文件时，浏览器将从网站的根目录下载三个文件。.

然后，每当用户没有连接到Internet，资源仍然可用.

NETWORK

NETWORK 下一节指定文件“login.asp”永远不应该被缓存，并且不能脱机使用:

NETWORK:
login.asp

星号可以用来表示所有其他资源/文件需要互联网连接:

NETWORK:
*

FALLBACK

FALLBACK 下面指定的"offline.html"将服务于所有文件放在/HTML/目录，如果网络连接不能建立

FALLBACK:
/html/ /offline.html

注意: 第一个URI是资源, 第二行是fallback.

更新缓存

一旦应用程序被缓存，它将一直缓存，直到下面其中一种情况发生:

  • 用户清除浏览器的缓存
  • 清单文件被修改（见下面的提示）
  • 应用程序缓存是以编程方式更新

实例 - 完整的缓存清单文件

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html/ /offline.html

提示: 以"#"打头的是注释行, 但也可以服务另一个目的.应用程序的缓存只在其清单文件更改时更新. 如果你编辑一个图像或JavaScript功能的变化，这些变化会不会重新缓存. 在注释行中更新日期和版本是使浏览器重新缓存文件的一种方法.

应用程序缓存注意事项

小心你缓存的东西.

一旦文件被缓存，浏览器将继续显示缓存的版本，即使你改变服务器上的文件。要确保浏览器更新缓存，您需要更改清单文件.

注意: 浏览器会缓存数据的不同尺寸的限制（一些浏览器站点一5MB限制）.