【HTML5】浅析HTML5应用程序缓存（ApplicationCache）

2023-01-03 16:52:11

一.为什么需要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

码农公寓