一.为什么需要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）的更多相关文章

HTML5学习(九)----应用程序缓存
参考教程:http://www.w3school.com.cn/html5/html_5_app_cache.asp 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 w ...
HTML5 学习笔记应用程序缓存
使用html5 通过创建cache manifest文件,可以轻松地创建web应用的离线版本. html5引入了应用程序缓存,这意味着web应用可进行缓存,并可在没有因特网连接时进行访问. 应用程序缓 ...
Html5应用程序缓存ApplicationCache
应用缓存机制可以参考http://www.w3school.com.cn/html5/html_5_app_cache.asp,不再赘述.利用此机制,html5游戏可以实现和native app类似的 ...
HTML5应用程序缓存Application Cache
什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...
HTML5应用程序缓存Application Cache详解
什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...
神奇的HTML5离线存储（应用程序缓存）
声明:本文为原创文章,如需转载,请注明来源并保留原文链接前端小尚,谢谢! 前言使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. HTML5引入 ...
HTML 5 应用程序缓存（Application Cache）cache manifest 文件使用 html5 中创建manifest缓存以及更新方法一个manifest文件会创建一份缓存，不同的manifest文件其缓存的内容是互不干扰的
HTML5 离线缓存-manifest简介 HTML 5 应用程序缓存使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. 什么是应用程序缓存(A ...
HTML5应用程序缓存Application Cache详解.RP
什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...
HTML5应用程序缓存Application Cache.RP
什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...
【HTML5】Application Cache应用程序缓存
HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. 应用程序缓存为应用带来三个优势: 离线浏览 - 用户可在应用离线时使用它们速度 - 已缓存资源加载 ...

随机推荐

移动web开发之视口viewport
× 目录 [1]布局视口 [2]视觉视口 [3]理想视口[4]meta标签[5]总结前面的话在CSS标准文档中,视口viewport被称为初始包含块.这个初始包含块是所有CSS百分比宽度推算的根源 ...
Android控件之WebView
如何在Android应用中打开Web网站呢?谷歌为我们提供了解决方案,现在就让我们一起看一下WebView控件吧. 为了方便总结,就以实现下面这个效果为主线,进行总结: 首先我们先看一下它的布局文件吧 ...
Android属性动画之第一重修炼总结
经过这两天对ObjectAnimator属性动画的学习,基本对Android提供的属性动画有了一定的认识,现在就为大家以一个类似扇形打开的效果做总结. 效果图: 下面就让我们用刚刚学到的属性动画效果, ...
Cocos2d-x 3.2 学习笔记（十六）保卫萝卜游戏主循环与定时器
保卫萝卜~想法一直存在于想法,实战才是硬道理!有想法就去实现,眼高手低都是空谈. 一.游戏主循环GameSchedule 主循环是游戏处理逻辑,控制游戏进度的地方,处理好主循环是很重要的 ...
Windows Azure Active Directory (3) China Azure AD增加新用户
<Windows Azure Platform 系列文章目录> 本文介绍的是国内由世纪互联运维的China Azure. 本文是对笔者之前的文档:Windows Azure Active ...
第2/24周页_SQL Server 中数据存储的基本单位
上周通过探讨SQL Server如何执行一个查询奠定了基础.我也在那里提到页是8kb的缓存.今天我们对页进行进一步集中探讨,从性能调优角度挖掘出更多的细节. 页是SQL Server的基础,在SQL ...
ES6 Features系列：Template Strings & Tagged Template Strings
1. Brief ES6(ECMAScript 6th edition)于2015年7月份发布,虽然各大浏览器仍未全面支持ES6,但我们可以在后端通过Node.js 0.12和io.js,而前端则通过 ...
【Swift学习】Swift编程之旅（二）
在本节将介绍一些最基础的知识 swift提供自己版本的类型,下面说明几种简单的类型 Int 整型 Double和float 浮点型 String 字符串型 Bool 布尔型它也提供了3种主要的强大的 ...
position属性absolute与relative 详解
最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻,收藏下来,唯恐忘记.一.解读absolute与relative ...
【SQL】sql版Split函数。用于拆分字符串为单列表格
功能与.net版string.Split函数类似,只不过.net返回的是数组,这个返回的是一个单列表格,每个拆分出来的子串占一行.可选是否移除空格子串和重复项.市面上类似的函数不算少,但大多都是在循环 ...

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