CHCHE MANIFEST CACHE: #version<span style="color:#cc0000;">2</span> (更改这个数字以便让浏览器重新下载) myapp.html myapp.css myapp.js
同样“卸载“，就要在服务器端删除清单文件，使得请求该文件的时候返回404，同时，修改html文件以便他们与该清单列表”断开链接“。
注意：
①、浏览器检查清单文件以及更新缓存的操作是异步的，可能是在从缓存中载入应用之前，也有可能是同时进行。因此对于简单的web应用
而言，在更新清单文件之后，用户必须载入应用两次才能保证最新的版本生效：第一次是从缓存中载入老版本随后更新缓存；第二次才是从
缓存中载入最新的版本。
②、浏览器在更新缓存过程中会触发一系列事件，可以通过注册处理程序来跟踪这个过程同时提供反馈用户。
代码如下：
applicationCache.onupdateready= function(){
var reload = confirm(“A new version of this application is available\n and will be used the next time you reload.\n”);
if(reload) location.reload();
} 该事件注册在ApplicationCache对象上的，该对象是window的applicationCache属性的值。支持应用程序缓存的浏览器会定义该属性。
（2）处理应用缓存相关事件：
//下面所有的事件处理程序都使用此函数来显示状态消息
//由于都是通过调用status函数来显示状态，因此所有处理程序都返回false来阻止浏览器显示其默认状态消息
function status(msg){
doucment.getElementById(“statusline”).innerHTML= msg;
console.log(msg); //同时在控制台 输出此消息，便于调试
}
//每当应用程序载入的时候，都会检查该清单文件
//也总会首先触发“checking”事件
window.applicationCache.onchecking = function(){
status(“checking for a new version.”);
return false;
}
//如果没有改动，同时应用程序也已经缓存了
//”noupdate”事件被触发，整个过程结束
window.applicationCache.onnoupdate = function(){
}
//如果还未缓存应用程序，或者清单文件有改动
//那么浏览器会下载并缓存清单中的所有资源
//触发”downloading”事件，同时意味着下载过程开始
window.applicationCache.ondownloading = function(){
status(“Downloading new version”);
window.progresscount = 0;
return false;
}
//在下载过程中会间断性触发“progress“事件
//通常是在每个文件下载完毕的时候
window.applicationCache.onprogress = function(e){
varprogress = “”;
if(e && e.lengthComputable)
progress = “ ”+Math.round(100*e.loaded/e.total)+”%”
else
progress = “(“+(++progresscount)+”)”
return false;
}
//当下载完成并且首次将应用程序下载到缓存中时，浏览器会触发“cached“事件
window.applicationCache.oncached = function(e){
status(“Thisapplication is now cached locally”);
return false;
}
//当下载完成并将缓存中的应用程序更新后，浏览器会触发”updaterady”事件
//要注意的是：触发此事件的时候，用户任然可以看到老版本的应用程序
window.applicationCache.onupdateready = function(e){
status(“Anew version has been downloaded. Reload to run it”);
return false;
}
//如果浏览器处于离线状态，检查清单列表失败，则会触发“error“事件
//当一个未缓存的应用程序引用一个不存在的清单文件，也会触发此事件
window.applicationCache.onerror = function(e){
status(“Couldn’tload manifest or cache application”);
return false;
}
//如果一个缓存的应用程序引用一个不存在的清单文件，会触发“obsolete“
//同时将应用从缓存中移除之后不会从缓存而是通过网络加载资源
window.applicationCache.onobsolete = function(e){
status(“Thisapplication is no longer cached. Reload to get the latest version from thenetwork.”);
return false;
} 每次载入一个设置了manifest属性的html文件，浏览器都会触发”checking”事件。并通过网络载入该清单文件。不过之后，会随着
不同的情况触发不同的事件。
事件列表：
(1).没有可用更新
如果应用程序已经缓存并且清单文件没有动，则浏览器会触发noupdate事件
(2).有可用更新
如果应用程序已经缓存并且清单元件有改动，则浏览器会触发downloading事件并开始下载和缓存清单文件中列举的所有资源。
随着下载过程的进行浏览器还会触发”progress”事件，在下载完成后，会触发”updateready”事件。
(3).首次载入新的应用程序
如果还未缓存应用程序，如上所述downloading，progress事件都会触发。但是，当下载完成后，浏览器会触发”cached”事件
而不是updateready事件
(4).浏览器处于离线状态
如果浏览器处于离线状态，它无法检查清单文件，同时它会触发“error”事件。
如果一个未缓存的应用程序引用了不存的清单文件，浏览器也会触发该事件
(5).清单文件不存在
如果浏览器处理在线状态，应用程序也已经缓存起来，但是清单文件不存在，浏览器会触发obsolete事件，并将该应用程序
从缓存中移除。
缓存状态:
缓存的状态可以通过window.applicationCache.status获得，其状态主要包括如下6种：
const unsigned short UNCACHED=0;//未缓存(应用程序没有设置manifest属性：未缓存) const unsigned short IDLE=1;//空闲状态(清单文件已经检查完毕，并且已经缓存了最新的应用程序) const unsigned short CHECKING=2;//检查中(浏览器正在检查清单文件) const unsigned short DOWNLOADING=3;//下载中(浏览器正在下载并缓存清单中列举的所有文件) const unsigned short UPDATEREADY=4;//更新准备中(已经下载和缓存了最新版的应用程序) const unsigned short OBSOLETE =5;//过期状态(清单文件不存在，缓存将被清除) readonly attribute unsigned short status;
六、ApplicationCache对象还定义了两个方法update()和swapCache()：
(1).update
显式调用了更新缓存算法以检测是否有最新版本的的应用程序。这导致浏览器检测同一个清单文件（并触发相同的事件），
这和第一次载入应用程序时的效果是一样的。
(2).swapCache
它告诉浏览器可以弃用老缓存，所有的请求都从新缓存中获取。注意，这并不会重新载入应用程序：所有已经载入的html文件
、图片、脚本等资源都不会改变。但是，之后的请求将从最新的缓存中获取。这会导致“版本错乱”的问题，因此一般不推荐使用
，除非应用程序设计得很好，确保这样的方式没有问题。只有ApplicationCache.UPDATEREADY和
ApplicationCache.ABSOLETE 时调用 swapCache()才有意义（当状态OBSOLETE时，调用它可以立即弃用废弃的缓存，
让之后所有的请求都通过网络获取）。如果状态属性是其他数值的时候调用swapCache()方法，它就会抛出异常。
七、如何判断在线还是离线状态？
离线web应用指的是将自己“安装”在应用程序缓存中的程序，使得哪怕在浏览器处于离线状态时依然可访问它。为了在离线状态可用，
Web应用需要可以告知别人自己是离线还是在线，同时当网络连接的状态发生改变时候也能“感知”到。通过navigator.onLine属性，
navigator.onLine是HTML5定义用来检测设备是在线还是离线。对应的值为false或true。但是不同浏览器表现并不一致。
IE 6+和Safari 5+能够正确的检测到网络已断开，并将navigator.onLine设为flase。
Firefox 3+和Opera 10.6+也支持navigator.onLine。但需要手动讲浏览器设置为脱机模式才能让浏览器正常工作。
Chrome 11及以上版本始终将navigator.onLine设为true。(不过作者的Chrome 21已经能正常使用了)
HTML5定义了online&offline事件用于监听网络状态变化。
window.addEventListener( 'online', callback); // 离线到上线
window.addEventListener( 'offline', callback); // 上线到离线
目前除了IE（IE只支持navigator.onLine属性）外，其他最新浏览器都支持这个事件。
八、离线Web应用实战。
通过一个简单的记事本程序——PermaNote，来解释如何使用。程序将用户的文本保存到localStorage中，并且在网络连接可用的时候，
将其上传到服务器，PermaNote只允许用户编辑单个笔记。
PermaNote应用包含3个文件，一个应用清单文件、一个html页面文件，一个实现逻辑的js文件。
Demo: http://xuanfengge.com/demo/201506/appcache/permanote.html
①.premanote.appcache部分：
CACHE MANIFEST # PermaNote v8 permanote.html permanote.js NETWORK: note
②.permanote.html部分：
<!DOCTYPEHTML>
<html manifest= permanote.appcache”>
<head>
<title>PermaNote Editor</title>
<script src=” permanote.js”></script>
<style type=”text/css”>
#editor {width:100%;height:250px}
#statusline{width:100%}
</style>
</head>
<body>
<p id=”toobar”>
<button id=”savebutton”onclick = “save()”>save</button>
<button onclick = “sync()”>SyncNote</button>
<button onclick = “applicationCache.update()”>UpdateApplication</button>
<textarea id=”editor”></textarea>
<p id=”statusline”></p>
</p>
</body>
</html> ③.permanote.js部分
status()函数用于显示状态栏消息，save()函数将笔记本保存到服务器，sync()用于确保本地与服务器文本的同步。
应用程序的时间处理程序解释：
(1).onload
尝试和服务器同步，一旦有新版本的笔记并且完成同步后，就启用编辑器窗口。
save()和sync()函数发出HTTP请求，并在XMLHttpRequest对象上注册一个onload时间处理程序来获取上传或者
下载完成的提醒。
(2).onbeforeunload
在未上传前，把当前版本的笔记数据保存到服务器上。
(3).oninput
每当textarea输入框内容发生变化时，都将其内容保存到localStorage中，并启动一个计时器。当用户停止编辑超过5秒
，将自动把数据保存到服务器。
(4).onoffline
当浏览器进入离线状态时，在状态栏显示离线消息。
(5).ononline
当浏览器回到在线状态时，同步服务器，检查是否有新版本的数据，并且保存当前版本的数据。
(6).onupdateready
如果新版本的应用已缓存，则在状态栏展示消息告知用户。
(7).onnoupdate
如果应用程序缓存没有发生变化，则同时用户仍在运行当前版本。
以上就是HTML5新特性之离线缓存技术-Gxl网的详细内容，更多请关注Gxl网其它相关文章！
查看更多关于HTML5新特性之离线缓存技术-gxlcms的详细内容...