一.为什么需要Web应用程序缓存
二.浏览器支持情况
三.使用Web应用程序缓存之前需要准备什么
①.使用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
<!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
文档内容......
</body>
</html>
五.Manifest文件的作用机制
1).设置了manifest属性的网页,浏览器不仅会存储指定的数据还会自动存储当前的html页面(因此在appcache文件CACH字段下,即使不指定缓存当前页面,浏览器还是会自动缓存)。
2).浏览器在判断缓存文件是否有变动的时候,判断的内容仅限于缓存文件的内容和结构。如果缓存文件中,需要被缓存的文件中的数据发生改变,只要缓存文件没有发生改变(包括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
七.如何知道自己浏览器的应用缓存情况
八.更新缓存
1.用户清空浏览器缓存
2.manifest文件被修改
3.由程序更新缓存文件
九.由程序更新缓存文件
如何通过程序来查看当前缓存文件的状态
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);
启发
十.参考文章
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