离线资源缓存
  为了能够让用户在离线状态下继续访问 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 题目大意:判断一堆人能否分成两组,组内人都互相认识. 解题思路:如果两个人不是相互认识,该两人之 ...