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. numpy数组与python的list互转，然后用json写入文件与c交互

    1.对于numpy的tofile方法,一个一维数组可以直接写成二进制形式,用c语言或者numpy.fromfile()可以读出来内容.而如果数组超过一维,tofile并不区分,也就是arr1=[1,2 ...

  2. PyCharm创建普通项目配置支持jinja2语法

    打开项目的根目录的.idea文件夹中项目名.iml文件(隐藏文件) 打开这个iml文件,在component标签的同级,添加如下代码: <component name="Templat ...

  3. MVC4 Action 两种异步方式

    1. xxxAsync/xxxCompleted 组合方式异步,xxxCompleted  就是他的回调函数,在执行完 xxxAsync 后调用xxxCompleted  . 使用 异步方式必须继承A ...

  4. 基于SSH的记账管理系统设计与实现-JavaWeb项目-有源码

    开发工具:Myeclipse/Eclipse + MySQL + Tomcat 项目简介: Java记账管理系统主要用于财务人员可以从账务中判断公司的发展方向.对个人和家庭而言,通过记账可以制定日后的 ...

  5. CookieJar和HTTPCookieProcessor

    CookieJar和HTTPCookieProcessor 我们在使用爬虫的时候,经常会用到cookie进行模拟登陆和访问.在使用urllib库做爬虫,我们需要借助http.cookiejar库中的C ...

  6. ArrayList中的一些小细节@JDK8

    ArrayList中的一些小细节@JDK8 protected transient int modCount = 0; 该变量用于记录ArrayList的版本号,不可被序列化,每次对ArrayList ...

  7. mysql数据库表的基本操作sql语句总结

    1,命令行登录命令 mysql -h localhost -u root -p C:\Users\lenovo>mysql -u root -p Enter password: ***** We ...

  8. SecureCRT上传下载文件

    这篇内容在哪看到的我也找不到了,不过就是做个记录. 步骤如下: 1.SecureCRT连接远程终端. 2.在连接窗口上方右击,弹出菜单后点击Connect SFTP Session, 3.点击后弹出窗 ...

  9. Jmeter将JDBC Request查询结果作为下一个接口参数方法(转载)

    现在有一个需求,从数据库tieba_info表查出rank小于某个值的username和count(*),然后把所有查出来的username和count(*)作为参数值,用于下一个接口. tieba_ ...

  10. flask开发笔记

    目录 虚拟环境 Debug模式 配置文件 url传入参数 url反转 重定义向 模板 创建 jinjia2语法 模板继承 flash 加载静态文件 MySQL数据库命令 配置 更新.提交.删除 模型操 ...