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. Echarts X轴内容过长自动隐藏,鼠标移动上去显示全部名称方法

    最近公司做项目,使用echarts做开发,碰到一些数据的名称很长导致图例展示的效果不是很好,自己写了一个方法,当X轴内容过长时自动隐藏,鼠标移动上去显示全部名称 样例: 图二是鼠标移动到名称显示的,怎 ...

  2. jenkins+checkstyle

    一.新增一个自由风格的项目 建好之后如下图所示 二.修改pom.xml文件 在项目根目录下添加如下代码(此处添加的3个插件) <build> <plugins> <plu ...

  3. 使用Telegraf + Influxdb + Grafana 监控SQLserver服务器的运行状况

    使用Telegraf + Influxdb + Grafana 监控SQLserver服务器的运行状况 前言 本文在Debian9下采用Docker的方式安装Telegraf + Influxdb + ...

  4. 阿里云PolarDB及其共享存储PolarFS技术实现分析（上）

    PolarDB是阿里云基于MySQL推出的云原生数据库(Cloud Native Database)产品,通过将数据库中计算和存储分离,多个计算节点访问同一份存储数据的方式来解决目前MySQL数据库存 ...

  5. elk日志分析平台安装

    ELK安装 前言 什么是ELK? 通俗来讲,ELK是由Elasticsearch.Logstash.Kibana 三个开源软件的组成的一个组合体,这三个软件当中,每个软件用于完成不同的功能,ELK 又 ...

  6. nowcoder(牛客网)提高组模拟赛第一场 解题报告

    T1 中位数(二分) 这个题是一个二分(听说是上周atcoder beginner contest的D题???) 我们可以开一个数组b存a,sort然后二分b进行check(从后往前直接遍历check ...

  7. 使用git命令提示“不是内部或外部命令

    问题描述: 打开windows的cmd,在里面打git命令会提示“不是内部或外部命令,也不是可运行的程序” 解决办法: 找到git安装路径中bin的位置,如:D:\Program Files\Git\ ...

  8. 201621123023《Java程序设计》第2周学习总结

    一. 本周学习总结 引用类型变量存放指向对象的引用(类似于地址): == 与 equals 区别在于:==比较的是引用是否相等, 而equals则比较指向对象的内容是否相等: 因为String的不可变 ...

  9. 原生态js展开高度自适应100%

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. PHP 执行系统外部命令的方法 system() exec()

    PHP作为一种服务器端的脚本语言,像编写简单.或者是复杂的动态网页这样的任务,它完全能够胜任.但事情不总是如此,有时为了实现某个功能,必须借助于操作系统的外部程序(或者称之为命令),这样可以做到事半功 ...