一.为什么需要Web应用程序缓存

在移动互联网时代，设备终端位置不再固定，依赖无线信号，网络的可靠性变得降低，比如坐在火车上，过了一个隧道（15分钟），便无法访问网站，这对于web的伤害是很大的       HTML5离线缓存就提供了解决这样问题的一个方法，在页面中的数据加载时，你可以自己设定一些要缓存的图片、flash、css、js、html等文件，等下次不能联网的情况下，你可以用那些缓存的文件。这就是HTML5的离线应用。

二.浏览器支持情况

Internet Explorer 10, Firefox, Chrome, Safari 和 Opera 支持应用程序缓存.

三.使用Web应用程序缓存之前需要准备什么

在应用Web应用程序缓存之前需要对服务器进行配置

①.使用IIS服务器

1,打开IIS，选择根节点（这样会对所有站点进行配置，也可以只针对某个站点进行配置）
              2,双击MIME类型
                  
              3，点击右键添加MIME类型

②.使用Tomcat服务器

1,配置web.xml文件，只需要在Web.xml添加下面的方的内容即可，配置完成之后还需要在MyEclipse查看一下是否生效

<mime-mapping>
<extension>manifest</extension>
<mime-type>text/cache-manifest</mime-type>
</mime-mapping>

四.如何才能使用ApplicationCache

在<html>标签中添加属性manifest，其值指向一个以appcache为后缀的文件（当然如果在服务器配置中<extension>标签的值不是设置的appcache，就不需要以appcache为后缀。但要注意这里的后缀要和配置的标签<extension>中的值保持一致，否则服务器无法正确解析该文件的MIME类型）

<!DOCTYPE HTML>
<html manifest="demo.appcache">

<body>
文档内容......
</body>

</html>

五.Manifest文件的作用机制

当某个html页面设置了manifest属性，那么该浏览器就会自动缓存manifest中指定的文件到用户浏览器存储数据的位置中去。当用户再次重载该网页的时候，浏览器首先是调用本地的缓存文件，然后判断缓存文件内容（包括注释）是否有变动，如果缓存文件内容没有改变，那么浏览器就直接将缓存文件加载到网页上，如果缓存文件有变动，则会重新从服务器上加载缓存文件中的所有内容到本地文件。       注：
           1）.设置了manifest属性的网页，浏览器不仅会存储指定的数据还会自动存储当前的html页面（因此在appcache文件CACH字段下，即使不指定缓存当前页面，浏览器还是会自动缓存）。
           2）.浏览器在判断缓存文件是否有变动的时候，判断的内容仅限于缓存文件的内容和结构。如果缓存文件中，需要被缓存的文件中的数据发生改变，只要缓存文件没有发生改变（包括Manifest文件的所有部分），那么也不会映射到用户浏览器上。利用这个特性，我们可以在改变被缓存文件中的数据之后，再改变manifest文件中的注释，这样就达到即改变了服务器中数据又可以更新用户浏览器端缓存文件的目的。

六.Manifest文件语法

manifest文件的基本部分:
              1，CACHE MANIFEST - 表中该文件为浏览器更新缓存文件
              2，# - 代表注释，可以通过它让浏览器更新缓存文件
              3，CACHE - 这行指示出下面的文件是要缓存的
              4，NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
              5，FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

CACHE MANIFEST
# 2012-02-21 v1.0.0
CACHE:
desert.jpg
time.js

七.如何知道自己浏览器的应用缓存情况

一般情况下缓存文件的存放位置和自己安装浏览器的目录已经设置存放数据的目录有关，使用Chrome打开一个有ApplicationCache的页面，然后按“F12”，找到Appplication->applicationCache，打开里面会有详细的ApplicationCache情况。也可以直接在console下查看。
       

八.更新缓存

一旦应用被缓存，则缓存文件会被保存直到遇到以下情况：
              1.用户清空浏览器缓存
              2.manifest文件被修改
              3.由程序更新缓存文件

九.由程序更新缓存文件

这儿只是介绍通过程序来更新缓存文件的思想，希望可以给你启发。更新缓存三种方式，用户清空浏览器可以通过360清理垃圾或是手动删除缓存文件，最常用的方法就是修改manifest文件中的注释。只有manifest文件被修改，浏览器才会更新缓存，当如果在程序中有当前缓存文件状态的监听代码，则另当别论。

如何通过程序来查看当前缓存文件的状态

var sta = document.getElementById("status");
var appCache = window.applicationCache;

switch (appCache.status) {

  case appCache.UNCACHED: // UNCACHED == 0

    sta.innerHTML = "UNCACHED";

    break;

  case appCache.IDLE: // IDLE == 1

    sta.innerHTML = "IDLE";

    break;

  case appCache.CHECKING: // CHECKING == 2

    sta.innerHTML = "CHECKING";

    break;

  case appCache.DOWNLOADING: // DOWNLOADING == 3

    sta.innerHTML = "DOWNLOADING";

    break;

  case appCache.UPDATEREADY:  // UPDATEREADY == 4

    sta.innerHTML = "UPDATEREADY";

    break;

  case appCache.OBSOLETE: // OBSOLETE == 5

    sta.innerHTML = "OBSOLETE";

    break;

  default:

    sta.innerHTML = "UNNOKN CACHE STATUS";

    break;

};

缓存文件状态的各种缓存事件

var appCache = window.applicationCache;

// Fired after the first cache of the manifest.

appCache.addEventListener(‘cached’, handleCacheEvent, false);

// Checking for an update. Always the first event fired in the sequence.

appCache.addEventListener(‘checking’, handleCacheEvent, false);

// An update was found. The browser is fetching resources.

appCache.addEventListener(‘downloading’, handleCacheEvent, false);

// The manifest returns 404 or 410, the download failed,

// or the manifest changed while the download was in progress.

appCache.addEventListener(‘error’, handleCacheError, false);

// Fired after the first download of the manifest.

appCache.addEventListener(‘noupdate’, handleCacheEvent, false);

// Fired if the manifest file returns a 404 or 410.

// This results in the application cache being deleted.

appCache.addEventListener(‘obsolete’, handleCacheEvent, false);

// Fired for each resource listed in the manifest as it is being fetched.

appCache.addEventListener(‘progress’, handleCacheEvent, false);

// Fired when the manifest resources have been newly redownloaded.

appCache.addEventListener(‘updateready’, handleCacheEvent, false);

实例

    window.addEventListener('load',function(e){
    window.applicationCache.addEventListener('updateready',function(e){
    if(window.applicationCache.status == window.applicationCache.UPDATEREADY){
      window.applicationCache.swapCache();
      window.location.reload();
      alert("namifest文件发生了更改");
    }else{
        alert("namifest文件未发生更改");
    }
  },false);
}, false);

这个程序比较蛋疼的就是，还是必须要修改Manifest文件，如果自己都修改了manifest文件，则直接刷新浏览器便可以实现缓存文件的更新了，何必要这样多此一举呢？

启发

上面缓存文件的状态有许多种，可以通过监听某些需要的状态，书写代码来实现更多功能。

十.参考文章

http://www.runoob.com/html/html5-app-cache.html
       http://www.cnblogs.com/hutuzhu/p/4871666.html
       http://www.jb51.net/html5/70108.html
       http://www.jb51.net/html5/67844.html
       http://www.jb51.net/html5/376884.html

【HTML5】浅析HTML5应用程序缓存（ApplicationCache）的更多相关文章

  1. HTML5学习(九)----应用程序缓存

    参考教程:http://www.w3school.com.cn/html5/html_5_app_cache.asp 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 w ...

  2. HTML5 学习笔记 应用程序缓存

    使用html5 通过创建cache manifest文件,可以轻松地创建web应用的离线版本. html5引入了应用程序缓存,这意味着web应用可进行缓存,并可在没有因特网连接时进行访问. 应用程序缓 ...

  3. Html5应用程序缓存ApplicationCache

    应用缓存机制可以参考http://www.w3school.com.cn/html5/html_5_app_cache.asp,不再赘述.利用此机制,html5游戏可以实现和native app类似的 ...

  4. HTML5应用程序缓存Application Cache

    什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...

  5. HTML5应用程序缓存Application Cache详解

    什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...

  6. 神奇的HTML5离线存储（应用程序缓存）

    声明:本文为原创文章,如需转载,请注明来源并保留原文链接前端小尚,谢谢! 前言 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. HTML5引入 ...

  7. HTML 5 应用程序缓存（Application Cache）cache manifest 文件使用 html5 中创建manifest缓存以及更新方法 一个manifest文件会创建一份缓存，不同的manifest文件其缓存的内容是互不干扰的

    HTML5 离线缓存-manifest简介 HTML 5 应用程序缓存 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. 什么是应用程序缓存(A ...

  8. HTML5应用程序缓存Application Cache详解.RP

    什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...

  9. HTML5应用程序缓存Application Cache.RP

    什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...

  10. 【HTML5】Application Cache应用程序缓存

    HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. 应用程序缓存为应用带来三个优势: 离线浏览 - 用户可在应用离线时使用它们 速度 - 已缓存资源加载 ...

随机推荐

  1. poj 3352Road Construction（无向双连通分量的分解）

    /* 题意:给定一个连通的无向图G,至少要添加几条边,才能使其变为强连通图(指的是边强联通). 思路:利用tarjan算法找出所有的双联通分量!然后根据low[]值的不同将双联通分量 进行缩点,最后图 ...

  2. Oracle Dataguard之Real-Time Apply

    Oracle Dataguard一共支持三种模式:最大可用模式(Maximum Availability),最大性能模式(Maximum Performance),最大保护模式(Maximum Pro ...

  3. Image Wall - jQuery & CSS3 图片墙效果

    今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...

  4. 【转】图文详解YUV420数据格式

    YUV格式有两大类:planar和packed. 对于planar的YUV格式,先连续存储所有像素点的Y,紧接着存储所有像素点的U,随后是所有像素点的V.对于packed的YUV格式,每个像素点的Y, ...

  5. Android正则表达式使用及性能隐患分析

    场景:找出一个关键词在一条短信中出现的次数 使用正则的实现方式: public static int findKeyWordCount(String srcText, String keyword) ...

  6. SQL Server安全（7/11）：使用跨数据库所有权链接（Cross-Database Ownership Chaining）的跨数据库安全

    在保密你的服务器和数据,防备当前复杂的攻击,SQL Server有你需要的一切.但在你能有效使用这些安全功能前,你需要理解你面对的威胁和一些基本的安全概念.这篇文章提供了基础,因此你可以对SQL Se ...

  7. 12种JavaScript MVC框架之比较

    Gordon L. Hempton是西雅图的一位黑客和设计师,他花费了几个月的时间研究和比较了12种流行的JavaScript MVC框架,并在博客中总结了每种框架的优缺点,最终的结果是,Ember. ...

  8. php对xml文件进行CURD操作

    XML是一种数据存储.交换.表达的标准: - 存储:优势在于半结构化,可以自定义schema,相比关系型二维表,不用遵循第一范式(可以有嵌套关系): - 交换:可以通过schema实现异构数据集成: ...

  9. [JS] 使用RequireJS引用UMeditor

    UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码. 而UMeditor则是UEditor删减版. ...

  10. Autofac - 服务

    上一篇中, 留了一个小问题,在一个接口下面, 注册多个类, 并能正常获取. 之前的方式是不能做到的, 在服务中, 有一种实现方式是可以的. 一.服务 1. 类型 - 描述服务的基本方法 上一篇其实使用 ...