对于基于网络的应用，离线访问变得越来越重要。虽然所有的浏览器都有缓存机制，但它们并不可靠，也不总是像预期的那样工作。HTML5使用ApplicationCache接口，解决离线带来的一些问题。

使用缓存接口可以为您的应用带来以下三个优势：

离线浏览-用户可以在离线时浏览您的完整网站

速度-缓存资源是本地资源，因此加载速度更快。

服务器负载更少-浏览器将只从更改的服务器下载资源。

应用程序缓存(也称为应用程序缓存)允许开发人员指定浏览器应该缓存哪些文件供离线用户访问。即使用户脱机按下刷新按钮，您的应用程序也将正常加载和运行。

参考清单文件

要启用应用程序的应用程序缓存，请在文档的html标记中添加清单属性：

清单属性可以指向网址或相对路径，但网址必须与相应的网络应用程序同源。清单文件可以使用任何文件扩展名，但必须以正确的MIME类型提供(见下文)。

htmlmanifest='/cache.manifest '

.

/html

或者

html manifest=' http://www . example.com/example . MF '

.

/html

您应该将清单属性添加到要缓存的web应用程序的每个页面中。如果网页不包含清单属性，浏览器将不会缓存该网页(除非该属性在清单文件中明确列出)。

这意味着用户浏览的每个带有清单的网页都将被隐式添加到应用程序缓存中。因此，您不需要列出列表中的每一页。

清单文件必须以文本/缓存-manifestMIME类型提供。文件后缀名称可以自定义(。清单是推荐的)，所以我们需要服务器声明。作为文本/缓存清单的清单后缀。

以apache为例，我们需要在httpd.conf中添加：add type text/cache-manifest . manifest

清单文件结构

简单列表格式如下：

CACHEMANIFEST

index.html

样式表. css

images/logo.png

scripts/main.js

本示例在指定此清单文件的网页上缓存四个文件。

您应该注意以下几点：

CACHEMANIFEST字符串应该在行，并且是必需的。

网站的缓存数据量不得超过5MB。但是，如果您想为Chrome在线商店编写一个应用程序，您可以使用无限存储来取消此限制。

如果清单文件或其中指定的资源无法下载，则无法执行整个缓存更新过程。在这种情况下，浏览器将继续使用原始应用程序缓存。

让我们看一个更复杂的例子：

CACHEMANIFEST

#2010-06-18:v2

# Explicitlycached 'masterentries '。

缓存：

/favicon.ico

index.html

样式表. css

images/logo.png

scripts/main.js

#要求用户在线。

网络：

login.php

/myapi

http://api.twitter.com

# static . html willbeservedifmain . pyis access

# offline . jpgwillbeservedinplaceaofallimagesinimages/large/

#将是servedinplaceofther . html文件

回退：

/main.py/static.html

images/large/images/offline . jpg

*.html/offline.html

以“#”开头的行是注释行，但它们也可以用于其他目的。例如更新高速缓存

应用程序缓存仅在其清单文件更改时更新。例如，如果您修改图片资源或更改JavaScript函数，这些更改将不会被再次缓存。您必须先修改清单文件本身，浏览器才能刷新缓存文件。使用生成的版本号、文件哈希值或时间戳创建注释行，以确保用户获得软件的最新版本。

也可以在新版本出现后以编程方式更新缓存，如更新缓存一节所述。

如果将缓存清单文件引入页面，清单文件必须包含所有文件(css、js、image.)当前页面需要，否则不会加载。因此，建议在文件中的网络项目中添加一个星号*，以指示所有其他文件。

清单可以包括以下三个不同的部分：缓存、网络和回退。

CACHE:

这是条目的默认部分。此标题下列出的文件(或紧随CACHEMANIFEST之后的文件)在次下载后被显式缓存。

网络：

本节中列出的文件是需要连接到服务器的白名单资源。无论用户是否脱机，对这些资源的所有请求都会绕过缓存。可以使用通配符。

后退：

此部分是可选的，用于在无法访问资源时指定备份网页。个URI代表一个资源，第二个uri代表一个备份网页。这两个URIs必须是相关的，并且必须与清单文件的来源相同。可以使用通配符。

请注意，这些部分可以按任何顺序排列，每个部分都可以在同一个列表中重复。

以下列表定义了当用户试图离线访问网站的根目录时显示的“综合”网页(offline.html)，并且还指示所有其他资源(例如远程网站上的资源)需要互联网连接。

CACHEMANIFEST

#2010-06-18:v3

#明确的计划条目

index.html

css/style.css

# offline . html willbodisplayediftheuserisoffline

回退：

//offline.html

#Allotherresources(如网站)需要在线支持。

网络：

*

#额外资源缓存

缓存：

images/logo1.png

images/logo2.png

images/logo3.png

请注意：引用清单文件的HTML文件将被自动缓存。因此您不需要将其添加到列表中，但我们建议您这样做。

请注意：通过SSL提供的网页上设置的HTTP缓存头和缓存限制将被缓存列表替换。因此，通过https提供的网页可以脱机运行。

更新缓存

除非出现以下情况之一，否则应用程序在脱机时将保持缓存状态：

用户为您的网站清除了浏览器的数据存储。

清单文件已被修改。请注意，更新清单中列出的文件并不意味着浏览器将重新缓存资源。必须更改清单文件本身。

应用程序缓存以编程方式更新。