HTML5 的 applicationCache 应用程序缓存离线存储功能与 manifest 文件_H5之家

HTML5 的 applicationCache 应用程序缓存离线存储功能与 manifest 文件

一. 实现 HTML5 applicationCache 的步骤
二. 注意的问题1. 关于文件的更新
1. 缓存当前页问题
2. 大小限制问题

三. 相关状态监控函数参考

HTML5 离线应用的实现少不了这个功能的支持，通过 manifest 文件配置，可以很方便的设置哪些文件可以和不可以被缓存。

加注： applicationCache API 由于问题较多，当前已不再建议使用。可以使用 service Worker 来代替相关需求的实现。

一. 实现 HTML5 applicationCache 的步骤

一般的操作步骤
1.新建 manifest 文件

如文件名为 lzwme.manifest，内容配置参考如下：
CACHE MANIFEST

# version 1.2 for update cop help

# 直接缓存的文件
CACHE:
/wp-content/themes/weisayheibai/images/meta_author.png
/wp-content/themes/weisayheibai/images/meta_date.png
/wp-content/themes/weisayheibai/images/meta_categories.png
/wp-content/themes/weisayheibai/images/meta_comments.png
/wp-content/themes/weisayheibai/images/meta_views.png
/wp-content/themes/weisayheibai/images/new.gif
/wp-content/themes/weisayheibai/images/random/tb1.jpg
/wp-content/themes/weisayheibai/images/random/tb2.jpg
/wp-content/themes/weisayheibai/images/random/tb3.jpg
/wp-content/themes/weisayheibai/images/random/tb4.jpg
/wp-content/themes/weisayheibai/images/random/tb5.jpg
/wp-content/themes/weisayheibai/images/random/tb6.jpg
/wp-content/themes/weisayheibai/images/random/tb7.jpg
/wp-content/themes/weisayheibai/images/random/tb8.jpg
/wp-content/themes/weisayheibai/images/random/tb9.jpg
/wp-content/themes/weisayheibai/images/random/tb10.jpg
/wp-content/themes/weisayheibai/images/random/tb11.jpg
/wp-content/themes/weisayheibai/images/random/tb12.jpg
/wp-content/themes/weisayheibai/images/random/tb13.jpg
/wp-content/themes/weisayheibai/images/random/tb14.jpg
/wp-content/themes/weisayheibai/images/random/tb15.jpg
/plugins/jquerylazyload/fill.gif
/wp-includes/images/smilies/icon_question.gif
/wp-includes/images/smilies/icon_razz.gif
/wp-includes/images/smilies/icon_sad.gif
/wp-includes/images/smilies/icon_evil.gif
/wp-includes/images/smilies/icon_exclaim.gif
/wp-includes/images/smilies/icon_smile.gif
/wp-includes/images/smilies/icon_redface.gif
/wp-includes/images/smilies/icon_biggrin.gif
/wp-includes/images/smilies/icon_surprised.gif
/wp-includes/images/smilies/icon_eek.gif
/wp-includes/images/smilies/icon_confused.gif
/wp-includes/images/smilies/icon_cool.gif
/wp-includes/images/smilies/icon_lol.gif
/wp-includes/images/smilies/icon_mad.gif
/wp-includes/images/smilies/icon_twisted.gif
/wp-includes/images/smilies/icon_rolleyes.gif
/wp-includes/images/smilies/icon_wink.gif
/wp-includes/images/smilies/icon_idea.gif
/wp-includes/images/smilies/icon_arrow.gif
/wp-includes/images/smilies/icon_neutral.gif
/wp-includes/images/smilies/icon_cry.gif
/wp-includes/images/smilies/icon_mrgreen.gif

/wp-content/themes/weisayheibai/style.css
/wp-content/plugins/syntax-highlighter-with-add-button-in-editor/styles/shCoreDefault.css

/wp-content/themes/weisayheibai/js/jquery.min.js
/wp-content/themes/weisayheibai/js/hoveraccordion.js
/wp-content/themes/weisayheibai/js/custom.js
/wp-content/plugins/syntax-highlighter-with-add-button-in-editor/scripts/shCore.js
/wp-content/plugins/syntax-highlighter-with-add-button-in-editor/scripts/shAutoloader.js

# 需要在时间在线的文件
NETWORK:
/
# 替代方案
FALLBACK:

清单可包括以下三个不同部分：CACHE、NETWORK 和 FALLBACK。

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

NETWORK：
此部分下列出的文件是需要连接到服务器的白名单资源。无论用户是否处于离线状态，对这些资源的所有请求都会绕过缓存。可使用通配符。

FALLBACK：
此部分是可选的，用于指定无法访问资源时的后备网页。其中第一个 URI 代表资源，第二个代表后备网页。两个 URI 必须相关，并且必须与清单文件同源。可使用通配符。
请注意：这些部分可按任意顺序排列，且每个部分均可在同一清单中重复出现。

注意：

A. CACHE MANIFEST 字符串应在第一行，且必不可少
B. 并不支持模糊或正则匹配，添加的文件路径一般应是可以访问的静态文件
C. 如果页面中有静态文件增加，也应该在 CACHE 的列表中添加；
D. 应保持 NETWORK 为 * ，以防止当前页面被缓存了，但未添加至 CACHE 列表的静态文件不从服务器加载，从而出现无法访问到的问题。（测试使用中发现的现象）
1.在需要缓存的页面中加入该文件导入配置，示例：
cache.html

<!DOCTYPE html>
<html manifest="zinhelp.manifest">
<head>
<meta charset=utf-8>
<title>cache</title>
<script>
//发生了状态变化，则执行更新，一般来说本操作并不需要，因为当 manifest 文件变化时会发生 onnoupdate 事件，浏览器会自动更新缓存文件
if(window.applicationCache && window.applicationCache.status == UPDATEREADY){
window.applicationCache.update();
}
</script>
</head>
<body>
HTML5 cache!
</body>
</html>
1.配置服务器的 manifest 格式扩展名文件支持

在 Web 服务器配置中添加如下 MIME 映射：

扩展名为 manifest，类型为 text/cache-manifest