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. 使用shell脚本build并创建ipa文件(转)

    前言 由于项目引入了敏捷开发,需要每天build出一个ipa供QA测试.此前是使用Xcode先achive出一个文件,再在 organizer->achives里发布ipa,一直感觉也没啥不方便 ...

  2. linux fdisk分区工具

    fdisk来自IBM老牌分区工具,支持绝大多数操作系统,几乎所有的linux的发行版本都装有disk,包括linux的resure模式下的依然能够使用. fdisk是一个机遇MBR的分区工具,所有如果 ...

  3. 等等,你可能误解nodejs了–通俗的概括nodejs的真相

    最近刚把产品从cpp平台迁移到nodejs平台了.  很多以前关于nodejs的观念被颠覆了. 这里分享出来, 欢迎大家批评指正. "nodejs是做服务器端开发的, 它一定和web相关,几 ...

  4. 【转】Android - 线程同步

    什么是线程同步? 当使用多个线程来访问同一个数据时,非常容易出现线程安全问题(比如多个线程都在操作同一数据导致数据不一致),所以我们用同步机制来解决这些问题. 实现同步机制有两个方法: 1.同步代码块 ...

  5. EF修改model自动更新数据库

    最近用MVC+EF学习时遇到修改model后而数据库没更新报错,就在网上找关于数据迁移自动更新数据库的,折腾了大半天终于弄了出来 第一步:在程序包管理器控制台里: Enable-Migrations ...

  6. 利用Senparc.Weixin SDK 实现微信用户的授权，并获取信息

    前一段时间在学校做过一个项目,就是利用的Senparc.Weixin SDK 做的,于是翻看以前代码,虽然有注释,但是还是看的迷迷糊糊的,干脆就单步执行一遍看看是怎么实现的,然后就重新写了个简易的授权 ...

  7. gitignore失效 删除 git commit记录

    已追踪的文件需要清理本地缓存 git rm -r --cached . git add . git commit -m 'update .gitignore' 删除 git commit记录 不小心上 ...

  8. Word页面去除下划线(Office 2017)实现

    后面就不用说了吧设置边框无

  9. django view 装饰器

    Django提供了几个可以应用于视图以支持各种HTTP特性的装饰器 Allowed HTTP django.views.decorators.http里的装饰器可以根据请求方法限制对视图的访问. re ...

  10. 6.BOM

    BOM的介绍 浏览器对象模型. 操作浏览器部分功能的API.比如让浏览器自动滚动. BOM的结构图 window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的,也可以称为window的子 ...