cache manifest 示例

要使用离线资源缓存，开发者首先要提供一个 cache manifest 文件

它列出了所有需要在离线状态下使用的资源，浏览器会把这些资源缓存到本地

下面就是一个 cache manifest 文件的例子（假设文件名为index.manifest）：

CACHE MANIFEST

index.html

common.css

app.js

cache manifest 文件准备好后，还要在需要用到离线缓存的页面的html标签里面设置其manifest属性的值得

<!-- 假设在index.html里设置manifest -->

<!DOCTYPE HTML>

<html manifest="index.manifest">

<head>

  <title>test</title>

  <script src="app.js"></script>

  <link rel="stylesheet" href="common.css">

</head>

<body>

  Test Page！

</body>

</html>

cache manifest 文件的书写格式

1.首行必须是 CACHE MANIFEST。
2.其后，每一行列出一个需要缓存的资源文件名。（可以是相对路径，也可以是绝对路径）
3.可根据需要列出在线访问的白名单。白名单中的所有资源不会被缓存，在使用时将直接在线访问。声明白名单使用 NETWORK：标识符。
4.如果在白名单后还要补充需要缓存的资源，可以使用 CACHE：标识符。
5.如果要声明某 URI 不能访问时的替补 URI，可以使用 FALLBACK：标识符。其后的每一行包含两个 URI，当第一个 URI 不可访问时，浏览器将尝试使用第二个 URI。
6.注释要另起一行，以 # 号开头。

例如：

CACHE MANIFEST

# 上一行是必须书写的。

images/icons.png

images/bg.png 

NETWORK:

images/product.png

CACHE:

style/default.css 

FALLBACK:

/files/projects /projects

更新缓存

应用程序可以等待浏览器自动更新缓存，也可以使用 Javascript 接口手动触发更新。

自动更新：
浏览器在第一次访问 Web 应用时缓存资源，之后只在 cache manifest 文件本身发生变化时更新缓存。而 cache manifest 文件中所列到的资源文件发生变化并不会触发更新。

手动更新：
开发者也可以使用 window.applicationCache 的接口更新缓存。方法是检测 window.applicationCache.status 的值，如果是 UPDATEREADY，那么可以调用 window.applicationCache.update() 更新缓存。

示范代码如下：

if(window.applicationCache.status == window.applicationCache.UPDATEREADY){

　　window.applicationCache.update();

}

HTML5的资源缓存相关JS API

我们可以用JavaScript API与应用缓存进行交互。通过 window.applicationCache 访问API。

首先看看相关的事件：

onchecking - 在浏览器第一次下载清单文件或检测下载的清单文件被更改时调用此处理程序。它总是第一个被调用的处理程序。

onnoupdate - 在checking处理程序之后，且清单文件没有改变时，调用此处理程序。 此处理程序之后不再触发其它处理程序。

ondownloading - 在checking处理程序之后，且当清单文件的资源列表第一次下载，或已下载过但被更改时，调用此处理程序。

onprogress - 在清单文件列表的每个文件被下载之后调用此处理程序。此事件传递 ProgressEvent 参数，包含总数和已下载数，不过它并不是在所有浏览器都可靠。

oncached - 在清单文件的所有资源被下载之后，调用此处理程序。 此处理程序之后不再触发其它处理程序。

onupdateready - 在下载处理程序调用之后，且已存的应用缓存被更改时，调用此处理程序。 此处理程序之后不再触发其它处理程序。

onobselete - 在请求清单文件返回404 Not Found 或 410 Gonestatus 代码时，调用此处理程序。它表明清单文件不存在，应用缓存将被删除。此处理程序之后不再调用其它处理程序。

onerror - 错误发生时，调用此处理程序。这个事件包含一个缘由数子：查找清单文件时发生的错误，查找清单文件的资源列表时发生的错误，当应用缓存被更改时程序清单被更改。 此处理程序之后不再触发其它处理程序。

然后是相关的属性：

window.applicationCache.status - 当前状态标识，Int型，用于解码为状态常量

（下面列出的属性就是分别表示不同状态，他们的值就是对应的状态常量，同样是Int型）

window.applicationCache.UNCACHED - 不能使用应用缓存

window.applicationCache.IDLE - 应用缓存闲置

window.applicationCache.CHECKING - 第一次下载清单文件或检查下载文件是否被更改

window.applicationCache.DOWNLOADING - 清单文件的资源列表被首次下载或清单文件已被更新

window.applicationCache.UPDATEREADY - 已存应用缓存被更新，所有清单文件的资源已被下载

window.applicationCache.OBSOLETE - 请求清单文件返回 404 Not Found 或 410 Gone status 代码

最后看看相关的方法：

window.applicationCache.update - 触发检查清单文件是否被更新的请求，并在被请求时更新应用缓存

window.applicationCache.swapCache - 更新清单文件，使用最新的缓存环境（页面在使用新的缓存之前，会要求更新清单文件）

window.applicationCache.abort - 取消正在进行的缓存下载

看几个例子：

//用法一，当应用缓存被更改时提示用户刷新页面

window.applicationCache.addEventListener("updateready", function(e){

    window.applicationCache.swapCache();

    alert("新版本更新完毕，更新内容在刷新页面后生效!");

}, false);

//用法二，当应用缓存被更改时强制刷新页面（不友好的做法，尤其在移动端）

window.applicationCache.addEventListener("updateready", function(e){

    if(window.applicationCache.status == window.applicationCache.UPDATEREADY){

        window.applicationCache.swapCache();

        window.location.reload();

    }

}, false);

//用法三，定时检查清单文件是否被更新，如果更新了，就下载最新的缓存文件，确保版本最新

setInterval(function(){

    window.applicationCache.update();

}, 3600000);

//用法一和用法二中，当状态为updateready时，我都调用了swapCache方法，因为既然应用新缓存需要更新清单，那么为了保险起见，在刷新页面之前执行一下swapCache我觉得还是挺有必要的

需要注意的地方

站点离线存储的容量限制是5M

如果manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程将视为失败，浏览器继续全部使用老的缓存

引用manifest的html必须与manifest文件同源，在同一个域下

在manifest中使用的相对路径，相对参照物为manifest文件

CACHE MANIFEST字符串应在第一行，且必不可少

系统会自动缓存引用清单文件的 HTML 文件

manifest文件中CACHE则与NETWORK，FALLBACK的位置顺序没有关系，如果是隐式声明需要在最前面

FALLBACK中的资源必须和manifest文件同源，在同一个域下

当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。

站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问

当manifest文件发生改变时，资源请求本身也会触发更新

HTML5离线资源缓存简介的更多相关文章

  1. HTML5:离线存储(缓存机制)-IndexDB

    https://www.w3.org/TR/IndexedDB/ .. <!DOCTYPE html> <html> <head> <meta charset ...

  2. HTML5 离线缓存

    离线资源缓存  为了能够让用户在离线状态下继续访问 Web 应用,开发者需要提供一个 cache manifest 文件.这个文件中列出了所有需要在离线状态下使用的资源,浏览器会把这些资源缓存到本地. ...

  3. HTML5离线Web应用实战：五步创建成功

    [IT168 技术]HTML5近十年来发展得如火如荼,在HTML 5平台上,视频,音频,图象,动画,以及同电脑的交互都被标准化.HTML功能越来越丰富,支持图片上传拖拽.支持localstorage. ...

  4. HTML5 离线功能介绍

    HTML5 是目前正在讨论的新一代 HTML 标准,它代表了现在 Web 领域的最新发展方向.在 HTML5 标准中,加入了新的多样的内容描述标签,直接支持表单验证.视频音频标签.网页元素的拖拽.离线 ...

  5. HTML5离线缓存（Application Cache）

    HTML5离线缓存又名Application Cache,是从浏览器的缓存中分出来的一块缓存区,要想在这个缓存中保存数据,可以使用一个描述文件(manifest file),列出要下载和缓存的资源. ...

  6. HTML5离线缓存问题

    HTML5离线缓存问题 1.应用程序缓存 什么是应用程序缓存(Application Cache)? HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. ...

  7. HTML5离线缓存

    参考文档:http://www.w3cschool.cc/html/html5-app-cache.html HTML5 应用程序缓存 又称离线缓存 ,即使断线了,刷新后也还是缓存了原来的页面,不会4 ...

  8. Manifesto – HTML5 离线应用程序缓存校验工具

    Manifesto 是一个 HTML5 离线应用程序缓存校验工具,提供了快速校验 HTML5 manifest 文件有效性的方法.离线应用程序缓存在使用中最困难的部分之一就是无法正常工作的时候没有明显 ...

  9. 使用 jQuery Mobile 与 HTML5 开发 Web App —— HTML5 离线缓存

    本文要介绍的,是 HTML5 离线网络应用程序的特性,离线网络应用程序在 W3C 中的实际名称是 "Offline Web applications" ,也称离线缓存.当用户打开浏 ...

随机推荐

  1. Linq to Entities基础之需要熟知14个linq关键字（from,where,select,group,let,on,by...）

    1.Linq基础 <1> 关键词: from,in,group,by,where..... MSDN上总结的有14个关键词法... from xxxx in xxxx select =&g ...

  2. Android-隐式意图激活所有应用

    显示意图 与 隐式意图 对比 显示意图不能激活多个组件,只能激活一个组件 隐式意图能激活多个组件 显示意图只能在自身应用激活,不能激活其他应用 隐士意图能在自身应用激活,也能激活其他应用 每个应用程序 ...

  3. Android-ActivityManager 退出整个应用

    在做Android APP 过程中,有退出整个Project的功能,以下就是接受退出整个应用的操作: ActivityManager是用来管理记录每一个Activity,最后统一用来退出结束: pub ...

  4. Transaction And Lock--在事务中使用TRY CATCH

    1>当XACT_ABORT被设置为ON时,如果TSQL 语句遇到运行时错误,整个事务会被回滚和结束2>当XACT_ABORT被设置为OFF时,如果TSQL 语句遇到运行时错误,只会回滚当前 ...

  5. c#用表达式树实现深拷贝功能

    因为对表达式树有点兴趣,出于练手的目的,试着写了一个深拷贝的工具库.支持.net standard2.0或.net framework4.5及以上. GitHub地址https://github.co ...

  6. Microsoft Office Specialist （MOS） 认证考试详解---word 2010 部分

    Microsoft Office Specialist ( MOS)认证考试详解 首先是   Microsoft Certification overview http://www.microsoft ...

  7. scrapy 安装技巧

    手动安装twisted插件: 1.在http://www.lfd.uci.edu/~gohlke/pythonlibs/#twisted用Ctrl+F搜索twisted,下载对应版本. 2.用pip安 ...

  8. sonar阻断级别错误（block）简单汇总

    1.代码里面包含PASSWORD.PWD 'PWD' detected in this expression, review this potentially hardcoded credential ...

  9. 剑指offer面试题1---赋值运算符函数

    题目描述:如下类型CMyString的声明,请为该类型添加赋值运算符函数. class CMyString{public:    CMyString(char* pData = NULL);    C ...

  10. shell__常用命令__grep

    grep | zgrep (不用解压zip就能直接搜索) -i 不区分大小写 -I 忽略二进制文件 -R或r 递归文件目录 -c 计算找到的总数量 -n 显示行号 -v 显示不包含匹配文本的所有行 - ...