HTML5manifest离线缓存的示例代码-

离线拜访对基于网络的利用而言越来越重要,这篇文章主要介绍了HTML5manifest离线缓存的示例代码的相干材料，有一定的参照 价值，有需要的伴侣可以参照 一下，但愿对你们有所帮忙。 离线拜访对基于网络的利用而言越来越重要,这篇文章主要介绍了HTML5 manifest离线缓存的示例代码的相干材料，有一定的参照 价值，有需要的伴侣可以参照 一下，但愿对你们有所帮忙。

简介

离线拜访对基于网络的利用而言越来越重要。虽然所有阅读器都有缓存机制，但它们并不成靠，也纷歧定总能起到预测的作用。HTML5 运用 ApplicationCache 接口解决了由离线带来的局部难题。

运用缓存接口可为您的利用带来下列三个优势：

1. 离线阅读 - 会员可在离线时阅读您的完备网站

2. 速度 - 缓存资源为当地资源，因而加载速度较快。

3. 办事器负载更少 - 阅读器只会从产生了更改的办事器下载资源。

利用缓存（又称 AppCache）可让开发人员指定阅读器应缓存哪些文件以供离线会员拜访。即便会员在离线状态下按了刷新按钮，您的利用也会正常加载和运转。

援用清单文件

要启用某个利用的利用缓存，请在文档的 html 标志中增加 manifest 属性：

manifest 属性可指向绝对网址或相对途径，但绝对网址必需与响应的网络利用同源。清单文件可运用任何文件扩展名，但必需以准确的 MIME 类型供给（拜见下文）。

  ...

或

  ...

您应在要缓存的网络利用的每个页面上都增加 manifest 属性。要是网页不包括 manifest 属性，阅读器就不会缓存该网页（除非清单文件中明白列出了该属性）。

这就意味着会员阅读的每个包括 manifest 的网页都会隐式增加到利用缓存。因而，您无需在清单中列出每个网页。

清单文件必需以 text/cache-manifest MIME类型供给。文件后缀名可以自定义（倡议为.manifest）所以我们需要此刻办事端将.manifest后缀的文件类型声明为text/cache-manifest。
以apache为例，我们需要在httpd.conf中加上：AddType text/cache-manifest .manifest

清单文件构造

简略的清单格局如下：

CACHE MANIFEST
index.html
stylesheet.css
images/logo.png
scripts/main.js

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

您需要注意下列几点：

1. CACHE MANIFEST 字符串应在首先行，且必不成少。

2. 网站的缓存数据量不得超过 5 MB。不外，要是您要编写的是针对 Chrome 网上利用店的利用，可运用 unlimitedStorage 取消该限定。

3. 要是清单文件或其中指定的资源没法下载，就没法进行整个缓存更新进程。在这种状况下，阅读器将继续运用原利用缓存。

我们再来看看更复杂的示例：

CACHE MANIFEST
# 2010-06-18:v2

# Explicitly cached 'master entries'.
CACHE:
/favicon.ico
index.html
stylesheet.css
images/logo.png
scripts/main.js

# Resources that require the user to be online.
NETWORK:
login.php
/myapi
http://api.twitter.com

# static.html will be served if main.py is inaccessible
# offline.jpg will be served in place of all images in images/large/
# offline.html will be served in place of all other .html files
FALLBACK:
/main.py /static.html
images/large/ images/offline.jpg
*.html /offline.html

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

利用缓存只在其清单文件产生更改时才会更新。例如，要是您修改了图片资源或更改了 JavaScript 函数，这些更改不会从新缓存。您必需修改清单文件自身才干让阅读器刷新缓存文件。运用生成的版本号、文件哈希值或工夫戳新建注释行，可确保会员获得您的软件的最新版。
您还可以在涌现新版本后，以编程方式更新缓存，如更新缓存局部中所述。

要是页面引入了缓存清单文件，那么清单文件必需包括目前页面需要的所有文件（css，js，image...），不然不会被加载，所以除去牢固需要缓存的文件，倡议在文件中的NETWORK一项加上星号*,表示其余所有文件

清单可包含下列三个不一样局部：CACHE、NETWORK 和 FALLBACK。

CACHE：
这是条款的默许局部。系统会在首次下载此标头以下出的文件（或紧跟在 CACHE MANIFEST 后的文件）后显式缓存这些文件。

NETWORK：
此局部以下出的文件是需要连贯到办事器的白名单资源。不管会员可否处于离线状态，对这些资源的所有要求都会绕过缓存。可运用通配符。

FALLBACK：
此局部是可选的，用于指定没法拜访资源时的后备网页。其中首先个 URI 代表资源，第二个代表后备网页。两个 URI 必需相干，而且必需与清单文件同源。可运用通配符。
请注意：这些局部可按任意次序罗列，且每个局部均可在统一清单中反复涌现。

下列清单定义了会员尝试离线拜访网站的根时显示的“综合性”网页 (offline.html)，也表白了其他所有资源（例如长途网站上的资源）均需要互联网连贯。

CACHE MANIFEST
# 2010-06-18:v3

# Explicitly cached entries
index.html
css/style.css

# offline.html will be displayed if the user is offline
FALLBACK:
/ /offline.html

# All other resources (e.g. sites) require the user to be online.
NETWORK:
*

# Additional resources to cache
CACHE:
images/logo1.png
images/logo2.png
images/logo3.png

请注意：系统会主动缓存援用清单文件的 HTML 文件。因而您无需将其增加到清单中，但我们倡议您这样做。

请注意：HTTP 缓存标头以及对通过 SSL 供给的网页设定的缓存限定将被替代为缓存清单。因而，通过 https 供给的网页可实现离线运转。

更新缓存

利用在离线后将维持缓存状态，除非产生下列某种状况：

1. 会员革除了阅读器对您网站的数据存储。

2. 清单文件经过修改。请注意：更新清单中列出的某个文件并不料味着阅读器会从新缓存该资源。清单文件自身必需进行更改。

3. 利用缓存通过编程方式进行更新。

总结：以上就是本篇文的全部内容，但愿能对大家的学习有所帮忙。更多相干教程请拜访Html5视频教程！