HTML5新增,他将程序所需的html、css、js、图片等保存到浏览器中。
他不会随着浏览器清缓存而被清除,老数据会被最近一次的访问的新数据代替掉。
首次下载并缓存,之后的任何加载请求都来自缓存。
一、首先创建一个清单:包含程序依赖的所有URL
二、在程序的主页面<html>设置manifest属性,指向清单文件
<html manifest="myapp.appcache">
三、清单文件首行必须以“CACHE MANIFEST"开头。其余每行一个URL,相对路径的URL都相对于清单文件的URL。
#是注释,允许前面有空格,后面不能有非空字符。
CACHE MANIFEST
#Myapp varsion 1(注意:浏览器只会异步检查清单文件,并不能检查文件是否有更改,所以每次更改代码,需修改这个数字重新下载文件)
CHCHE:
#此区域列出需要缓存的所有文件
index.html
index.js
index.css
logo.png
FALLBACK:
#可以包含两个URL,第一个是前缀,任何能够匹配到改前缀的URL都不会被缓存,第二个是需要缓存的资源。如果网络载入第一个URL失败,就会用第二个URL制定的缓存资源代替
videos/offline.html
NETWORK:
#标识该区域从不缓存
cgi/
浏览器缓存过程中会触发一系列事件,该事件处理程序注册在ApplicationCache对象上,此对象是window的applicationCache属性的值。
//载入的时候,检查该清单文件。
window.applicationCache.onchecking = function(){
$("san").innerHTML = "checking for a new version";
return false;
}
//如果清单文件没有动,同时应用程序也已经缓存了,该事件执行。
window.applicationCache.onnoupdate = function(){
$("san").innerHTML = "This version is up-to-date";
return false;
}
//如果还未缓存应用程序,或者清单有改动
window.applicationCache.ondownloading = function(){
$("san").innerHTML = "Downloading new version";
window.progresscount = 0; //在下面的事件中用到
return false;
}
//下载过程不断调用progress事件,通常在每个文件下载完的时候。
window.applicationCache.onprogress = function(e){
var progress = "";
if(e && e.lengthComputable){
progress = "" + Math.round(100*e.loaded / e.total) + "%"; //计算下载完成比例
}
else{
progress = "(" + ++progresscount + ")"; //输出调用次数。
}
$("san").innerHTML = "Downloading new version" + progress;
return false;
}
//当下载完成并且首次将应用程序下载到缓存中时
window.applicationCache.oncached = function(){
$("san").innerHTML = "This application is now cached locally" ;
return false;
}
//下载完成并且首次将应用程序下载到缓存中。
window.applicationCache.oncached = function() {
status("This application is now cached locally");
return false;
};
//下载完成并缓存的程序更新后触发,注意触发此事件时,用户任然看到老版本,只有当用户再次载入时才会访问最新版。
window.applicationCache.onupdateready = function() {
status("A new version has been downloaded. Reload to run it");
return false;
};
//处于离线时,检擦清单失败触发。
window.applicationCache.onerror = function() {
status("Couldn't load manifest or cache application");
return false;
};
//程序引用一个不存在的清单文件触发,同时将应用从缓存中删除。
window.applicationCache.onobsolete = function() {
status("This application is no longer cached. " +
"Reload to get the latest version from the network.");
return false;
};