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. ConcurrentDictionary 与 Dictionary

    ASP.NET中ConcurrentDictionary是.Net4 增加的,与 Dictionary 最主要区别是, 前者是线程安全的集合,可以由多个线程同时并发读写Key-value.   那么 ...

  2. Shapefile点图层转换为Shapefile线图层

    在Oracle数据表转换为Shapefile(一)和Oracle数据表转换为Shapefile(二)两篇文章中,分别介绍了两种不同的根据Oracle数据表生成Shapefile点图层的方法.本文在此基 ...

  3. [SIP01]SIP Header Fields里面各字段用途

    INVITE sip:bob@biloxi.com SIP/2.0 Via: SIP/2.0/UDP pc33.atlanta.com;branch=z9hG4bK776asdhds Max-Forw ...

  4. 什么是C#？什么是.NET Framework?

    1.什么是C#: 解1:C#就是一门开发语言,是由C及C++演变而来的,有朋友戏称之为"C四个+",这里的"#"号,不读"井",而读做&qu ...

  5. asp.net core + 前端H5 页面视频站制作尝试

    .net core 2.1出来一段时间了,一直关注,前周花了半天时间学习了一下,特制作了一个视频小站(欢迎扫码体验): 页面首页效果如下: 播放页面效果如下: 部分代码: using ENT.IBLL ...

  6. python IDE安装－mac

    mac 配置Python集成开发环境(Eclipse +Python+Pydev)   1.下载Mac版64位的Eclipse. 进入到Eclipse官方网站的下载页面(http://www.ecli ...

  7. less配置

    一.sublime text需要下载考拉,然后要 一直打开着: 1.编译工具用koala编译 下载地址:http://koala-app.com/index-zh.html 2.LESS中的注释: 可 ...

  8. [Android] Android MVP 架构下 最简单的 代码实现

    Android  MVP 架构下  最简单的 代码实现 首先看图: 上图是MVP,下图是MVC MVP和MVC的区别,在于以前的View层不仅要和model层交互,还要和controller层交互.而 ...

  9. “全栈2019”Java第八章：IntelliJ IDEA设置注释不显示在行首

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  10. zTree API中刷新树没效果

    想刷新树,但是根据API来的refresh无效 ---------------------------------------------------------------------------- ...