【HTML5】浅析HTML5应用程序缓存（ApplicationCache）
一.为什么需要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 应用可进行缓存,并可在没有因特网连接时进行访问. 应用程序缓存为应用带来三个优势: 离线浏览 - 用户可在应用离线时使用它们 速度 - 已缓存资源加载 ...
随机推荐
- Geometry Curve of OpenCascade BRep
Geometry Curve of OpenCascade BRep eryar@163.com 摘要Abstract:几何曲线是参数表示的曲线 ,在边界表示中其数据存在于BRep_TEdge中,BR ...
- 移动web开发之像素和DPR
× 目录 [1]定义 [2]分类 [3]缩放[4]DPR 前面的话 像素在web开发中几乎天天用到,但到底什么是像素,移动端和桌面端的像素有区别吗,缩放对像素有影响吗,视网膜屏幕和像素有什么关系?关于 ...
- 【目录】微软Infer.NET机器学习组件文章目录
本博客所有文章分类的总目录链接:http://www.cnblogs.com/asxinyu/p/4288836.html 1.微软Infer.NET机器学习组件目录 1. Infer.NET连载(一 ...
- c#事件与委托
C#.net 目录(?)[-] 将方法作为方法的参数 将方法绑定到委托 事件的由来 事件和委托的编译代码 委托事件与Observer设计模式 范例说明 Observer设计模式简介 实现范例的Obse ...
- PhotoShop简介
Adobe Photoshop,简称“PS”,是由Adobe Systems开发和发行的图像处理软件.Photoshop主要处理以像素所构成的数字图像.使用其众多的编修与绘图工具,可以有效地进行图片编 ...
- modern.IE – Web 开发必备的 IE 浏览器测试工具
modern.IE 是微软推出的一个开发人员中心,提供免费的工具和资源,旨在使您能够花更少的时间来测试各种版本的 Internet Explorer,并留出更多时间在现代 Web 上构建重要的内容.m ...
- Mac OSX Java 编译时乱码问题
由于是新系统,之前没有配置过导致今天javac编译的时候发现再iterm和Terminal中显示的是乱码,后来在网上找到解决方法,现在共享一下: 方法一: 在iterm2/Terminal中输入: c ...
- 23套新鲜出炉的网站和手机界面 PSD 素材
Web 用户界面,移动用户界面和线框套件对设计师很有用,因为这些套件让他们使用快速和有效的方式复制用户界面.这些类型的工具包提供了一个基本的用户界面元素,用于它们需要制作的网站或软件模型. 在这篇文章 ...
- 设计宝库：22套精美的 PhotoShop 素材免费下载
<设计宝库>系列给大家带来22套精美的 PSD 设计素材,你可以免费下载使用.设计师经常会去网上搜罗各种各样的素材,这些免费素材不仅能帮助他们节省大量的时间,而且能有很好的效果.非常感谢那 ...
- QT学习笔记5
Qt标准对话框之QFileDialog //QString path=QFileDialog::getOpenFileName(this,tr("open image"),&quo ...