离线资源缓存
  为了能够让用户在离线状态下继续访问 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. C++关于构造函数的深拷贝与浅拷贝

    首先拷贝构造函数的声明方法: 类名::类名(const 类名&) 1.浅拷贝的实现程序: #include "stdafx.h" #include <iostream ...

  2. [Forward]Visual Guide: Setting up My Sites in SharePoint 2013

    from  http://blog.sharedove.com/adisjugo/index.php/2012/07/25/visual-guide-setting-up-my-sites-in-sh ...

  3. Delphi编程中资源文件的应用

    Delphi编程中资源文件的应用/转自 http://chamlly.spaces.live.com/blog/cns!548f73d8734d3acb!236.entry一.引子: 现在的Windo ...

  4. 【POJ】1816 Wild Words

    DFS+字典树.题目数据很BT.注意控制DFS深度小于等于len.当'\0'时,还需判断末尾*.另外,当遇到*时,注意讨论情况. #include <iostream> #include ...

  5. Apache HTTP Server mod_dav.c 拒绝服务漏洞(CVE-2013-1896)

    漏洞版本: Apache HTTP Server < 2.2.25 漏洞描述: CVE ID:CVE-2013-1896 Apache HTTP Server是一款流行的WEB服务器 Apach ...

  6. SQL约束和字段约束的创建和删除

    1)禁止所有表约束的SQLselect 'alter table '+name+' nocheck constraint all' from sysobjects where type='U' 2)删 ...

  7. wpa_cli 连接 wifi

    转自:http://hi.baidu.com/yyangjjun/item/9dfe8e175439fc7a1009b5ba   1: run wpa_supplicant first use the ...

  8. （转载）提高mysql插入数据的速度

    (转载)http://blog.csdn.net/bhq2010/article/details/7376352 需要在mysql中插入2000万条记录,用insert语句插入速度很有限,每秒钟几百条 ...

  9. Remove Duplicates from Sorted List II ——LeetCode

    Given a sorted linked list, delete all nodes that have duplicate numbers, leaving only distinct numb ...

  10. Java Topology Suite (JTS)与空间数据模型

    JTS是Java的处理地理数据的API,它提供以下功能: 实现了OGC关于简单要素SQL查询规范定义的空间数据模型 一个完整的.一致的.基本的二维空间算法的实现,包括二元运算(例如touch和over ...