使用HTML5开发离线应用 - cache manifest(3)
2015-12-20 16:55
501 查看
下面说明书写 cache manifest 文件需要遵循的格式。
首行必须是 CACHE MANIFEST。
其后,每一行列出一个需要缓存的资源文件名。
可根据需要列出在线访问的白名单。白名单中的所有资源不会被缓存,在使用时将直接在线访问。声明白名单使用 NETWORK:标识符。
如果在白名单后还要补充需要缓存的资源,可以使用 CACHE:标识符。
如果要声明某 URI 不能访问时的替补 URI,可以使用 FALLBACK:标识符。其后的每一行包含两个 URI,当第一个 URI
不可访问时,浏览器将尝试使用第二个 URI。
注释要另起一行,以 # 号开头。
清单 4 的代码中给出了 cache manifest 中各类标识符的使用示例。
清单 4.
cache manifest 示例代码
# 下面是另一些需要缓存的资源,在这个示例中只有一个 css 文件。
更新缓存
应用程序可以等待浏览器自动更新缓存,也可以使用 Javascript 接口手动触发更新。
自动更新
浏览器除了在第一次访问 Web 应用时缓存资源外,只会在 cache manifest 文件本身发生变化时更新缓存。而 cache manifest
中的资源文件发生变化并不会触发更新。
手动更新
开发者也可以使用 window.applicationCache 的接口更新缓存。方法是检测 window.applicationCache.status
的值,如果是 UPDATEREADY,那么可以调用 window.applicationCache.update()
更新缓存。示范代码如下。
清单 5 手动更新缓存
首行必须是 CACHE MANIFEST。
其后,每一行列出一个需要缓存的资源文件名。
可根据需要列出在线访问的白名单。白名单中的所有资源不会被缓存,在使用时将直接在线访问。声明白名单使用 NETWORK:标识符。
如果在白名单后还要补充需要缓存的资源,可以使用 CACHE:标识符。
如果要声明某 URI 不能访问时的替补 URI,可以使用 FALLBACK:标识符。其后的每一行包含两个 URI,当第一个 URI
不可访问时,浏览器将尝试使用第二个 URI。
注释要另起一行,以 # 号开头。
清单 4 的代码中给出了 cache manifest 中各类标识符的使用示例。
清单 4.
cache manifest 示例代码
CACHE MANIFEST # 上一行是必须书写的。 images/sound-icon.png images/background.png NETWORK: comm.cgi |
CACHE: style/default.css FALLBACK: /files/projects /projects |
应用程序可以等待浏览器自动更新缓存,也可以使用 Javascript 接口手动触发更新。
自动更新
浏览器除了在第一次访问 Web 应用时缓存资源外,只会在 cache manifest 文件本身发生变化时更新缓存。而 cache manifest
中的资源文件发生变化并不会触发更新。
手动更新
开发者也可以使用 window.applicationCache 的接口更新缓存。方法是检测 window.applicationCache.status
的值,如果是 UPDATEREADY,那么可以调用 window.applicationCache.update()
更新缓存。示范代码如下。
清单 5 手动更新缓存
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) { window.applicationCache.update(); } |
相关文章推荐
- 使用HTML5开发离线应用 - cache manifest(2)
- 使用HTML5开发离线应用 - cache manifest(1)
- HTML5的FileAPI应用
- HTML5 File API初探 支持文件拖放上传功能
- html5新api对文件的操作
- HTML5 文件操作API
- HTML5的表单新特性(4)
- HTML5的表单新特性(3)
- HTML5表单新特征简介与举例
- [html5]html5视频video与音频audio用法详解
- HTML5的表单新特性(2)
- HTML5 drag拖动原理:
- HTML5的表单新特性
- 如何使用HTML5实现文件拖放 :
- html5新增拖拽和拖放功能介绍:
- HTML5新标签的用法和HTML4的区别
- html5新增的语义化标签
- HTML5的新增标签和废除的标签
- HTML5新增标签的汇总与详解
- HTML5 Web存储(Web Storage)(5)