离线资源缓存
  为了能够让用户在离线状态下继续访问 Web 应用,开发者需要提供一个 cache manifest 文件。这个文件中列出了所有需要在离线状态下使用的资源,浏览器会把这些资源缓存到本地。本节先通过一个例子展示 cache manifest 文件的用途,然后详细描述其书写方法,最后说明缓存的更新方式。
//在IIS下最好使用 xxx.appcache文件

原因:

cache manifest 格式
下面说明书写 cache manifest 文件需要遵循的格式。

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

mainfest清单格式实例:

CACHE MANIFEST
#上面一句必须
#v1.0.0
#需要缓存的文件
CACHE:
a.js
b.css
#不需要缓存的文件
NETWORK:
*
#无法访问页面
FALLBACK:
404.html

更新缓存
应用程序可以等待浏览器自动更新缓存,也可以使用 Javascript 接口手动触发更新。
自动更新
浏览器除了在第一次访问 Web 应用时缓存资源外,只会在 cache manifest 文件本身发生变化时更新缓存。而 cache manifest 中的资源文件发生变化并不会触发更新。
手动更新
开发者也可以使用 window.applicationCache 的接口更新缓存。方法是检测 window.applicationCache.status 的值,如果是 UPDATEREADY,那么可以调用 window.applicationCache.update() 更新缓存。示范代码如下。
清单 5 手动更新缓存

window.applicationCache.addEventListener('updateready',function(e){
if(window.applicationCache.status == window.applicationCache.UPDATEREADY){
window.applicationCache.swapCache(); if(confirm("loding new?")){
window.location.reload()
}
}
},false)

注意点:
1.对于每个index.html?id=1或index.html?id=2都会分别缓存index.html页面,可以通过chrome浏览器Resources/Application Cache观察

2.manifest文件的mime-type必须是 text/cache-manifest类型

3.mainfest文件中的路径和页面使用的路径,应该一直,区分大小写

4.NETWORK:若除了CACHE:定义的文件之外的文件都不要缓存,则NETWORK:下必须写个* ,否则可能造成CACHE外的文件全部加载不了。

5.CACHE:下不能使用文件夹形式定义。如images/。这样方式不会被识别。
而且文件路径和文件名不能包含空格,否则只会取得空格之前的文本,导致文件缓存失败。

6.添加引用mainfest的文件,会自动被缓存

可以通过iframe嵌入多个manifest文件。主页不需要配置manifest,这样index.html就不会被缓存。
<iframe frameborder="no" id="iframe1" scrolling="no" src="cache1.html"></iframe>

多个manifest文件还是会有空间的限制,在ipad的safari上不能超过50M。若cache1.manfest是26M,cache1.manfest是27M,则2个加起来超过50m,这时,首先cached完cache1,当缓存cache2的时候,会报一个超过缓存容量限制的错误。cache3自然也不会保存了。只保存了第一个cache1.

更多问题,参考:http://www.2cto.com/kf/201407/315340.html

实例代码:

1.新建clock.appcache文件

CACHE MANIFEST
#上面一句必须
# v1.0.4
# 需要缓存的文件
CACHE:
/view/clock.html
/js/clock.js
/js/jquery-1.11.3.min.js #不需要缓存的文件
NETWORK:
/css/clock.css #无法访问的页面
FALLBACK:
404.html

2.添加clock.html文件,引用mainfest文件

关键代码:

<html manifest="../Cache/clock.appcache">
<!DOCTYPE html>
<html manifest="../Cache/clock.appcache">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<link href="../css/clock.css" rel="stylesheet" />
</head>
<body>
<p>
The time is :<output id="clock"></output>
</p>
<p>
<a href="404.html">404.html</a>
</p>
<script src="../js/jquery-1.11.3.min.js"></script>
<script src="../js/clock.js"></script>
</body>
</html>

3.项目结构

4.监视结果:

HTML5 离线缓存的更多相关文章

  1. HTML5离线缓存(Application Cache)

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

  2. HTML5 离线缓存管理库

    一.HTML5离线缓存技术 支持离线缓存是HTML5中的一个重点,离线缓存就是让用户即使在断网的情况下依然可以正常的运行应用.传统的本地存储数据的方式有 localstorage,sessionsto ...

  3. HTML5离线缓存问题

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

  4. HTML5 离线缓存Appcache

    创建一个和html同名的manifest文件,比如页面为index.html,那么可以建一个index.manifest的文件,然后给index.html的html标签添加如下属性即可: <ht ...

  5. html5离线缓存使用

    html5 离线缓存使用以及注意事项 1.index.html中加入离线缓存的声明文件 如:<!DOCTYPE html><html manifest="test.appc ...

  6. node.js与HTML5离线缓存

    最近正学到HTML5的离线缓存,却看到需要配置服务器.一下子就懵了,毕竟服务器的有关配置一般是很复杂的,而node.js的服务器是自己的代码生成的,这下要怎么配置?在网上搜索了很久,都没用关于node ...

  7. HTML5离线缓存攻击测试

    本实验采用局域网模拟,通过修改本地HOSTS文件来模拟域名以及DNS欺骗.合法网站使用Linux CentOS7的apache服务器搭建,IP为192.168.1.113,HOSTS文件中加入192. ...

  8. HTML5离线缓存

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

  9. Html5离线缓存详细讲解

    离线缓存是Html5新特性之一,简单理解就是第一次加载后将数据缓存,在没有清除缓存前提下,下一次没有网络也可以加载,用在静态数据的网页或游戏比较好用.当然,Html5新的特性都不是所有浏览器都能支持的 ...

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

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

随机推荐

  1. Unity3d shader内置矩阵

    内置矩阵 支持的矩阵(float4x4):UNITY_MATRIX_MVP        当前模型视图投影矩阵UNITY_MATRIX_MV           当前模型视图矩阵UNITY_MATRI ...

  2. BZOJ 1257 余数之和

    Description 给出正整数\(n\)和\(k\),计算\(j(n, k)=k\;mod\;1\;+\;k\;mod\;2\;+\;k\;mod\;3\;+\;-\;+\;k\;mod\;n\) ...

  3. [BZOJ 1026] [SCOI 2009] Windy数 【数位DP】

    题目链接:BZOJ - 1026 题目分析 这道题是一道数位DP的基础题,对于完全不会数位DP的我来说也是难题.. 对于询问 [a,b] 的区间的答案,我们对询问进行差分,求 [0,b] - [0,a ...

  4. java的"=="与"equals"

    equals 方法是 java.lang.Object 类的方法. 有两种用法说明: (1)对于字符串变量来说,使用“==”和“equals()”方法比较字符串时,其比较方法不同. “==”比较两个变 ...

  5. bzoj3505

    ans=C((n+1)*(m+1),3)-三点一线的情况横线竖线我们可以先去掉然后考虑斜线,由于对称性我们只要考虑斜率大于0的即可有一个很显然的结论,但两点坐标差为x,y时,这条线段上的点数为gcd( ...

  6. BZOJ1611: [Usaco2008 Feb]Meteor Shower流星雨

    1611: [Usaco2008 Feb]Meteor Shower流星雨 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 904  Solved: 393 ...

  7. 数据结构(线段树):BZOJ 1018: [SHOI2008]堵塞的交通traffic

    1018: [SHOI2008]堵塞的交通traffic Time Limit: 3 Sec  Memory Limit: 162 MBSubmit: 2638  Solved: 864 Descri ...

  8. 【动态规划】HDU 5492 Find a path (2015 ACM/ICPC Asia Regional Hefei Online)

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5492 题目大意: 一个N*M的矩阵,一个人从(1,1)走到(N,M),每次只能向下或向右走.求(N+ ...

  9. margin:-75px的理解及妙用——纯CSS制作水平/垂直都居中短边为50px/长边为150px的红色十字架

    有这么一个题目: 使用重构的方式制作出一个如下图的水平.垂直都居中短边为50px,长边为150px的红色十字架. 要求只使用2个div完成 答案: <!DOCTYPE html PUBLIC & ...

  10. HDU 4751 Divide Groups 2013 ACM/ICPC Asia Regional Nanjing Online

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4751 题目大意:判断一堆人能否分成两组,组内人都互相认识. 解题思路:如果两个人不是相互认识,该两人之 ...