HTML5 离线应用程序【二】
日期：2014-05-17 浏览次数：20700 次
applicationCache对象
applicationCache对象代表本地缓存，可以用它来通知用户本地缓存中已经被更新，也允许用户手工更新本地缓存。在浏览器与服务器的交互过程中，当浏览器对本地缓存进行更新，将入新的资源文件时，会触发applicationCache对象的updateready事件，通知本地缓存已经被更新。可以利用该事件告诉用户本地缓存已经被更新，用户需要手工刷新页面来得到最新版本的应用程序，代表如下所示：
applicationCache.addEventListener("updateready", function(event) {
// 本地缓存已被更新，通知用户。
alert("本地缓存已被更新，可以刷新页面来得到本程序的最新版本。");
}, false);
另外可以通过applicationCache对象的swapCache()方法来控制如何进行本地缓存的更新及更新的时机。
swapCache()方法
该方法用来手工执行本地缓存的更新，它只能在applicationCache对象的updateReady事件被触发时调用，updateReady事件只有在服务器上的manifest文件被更新，并且把manifest文件中所要求的资源文件下载到本地后触发。该事件的含义是“本地缓存准备被更新”。当这个事件被触发后，可以用swapCache()方法来手工进行本地缓存的更新。
当本地缓存的容量非常大，本地缓存的更新工作将需要相对较长的时间，而且还会把浏览器锁住。这时最好有个提示，告诉用户正在进行本地缓存的更新，代码如下：
applicationCache.addEventListener("updateready", function(event) {
// 本地缓存已被更新，通知用户。
alert("正在更新本地缓存……");
applicationCache.swapCache();
alert("本地缓存更新完毕，可以刷新页面使用最新版应用程序。");
}, false);
在以上代码中，如果不使用swapCache()方法，本地缓存一样会被更新，但是，更新的时候不一样。如果不调用该方法，本地缓存将在下一次打开本页面时被更新；如果调用该方法，则本地缓存将会被立刻更新。因此，可以使用confirm()方法让用户选择更新折时机，是立刻更新还是下次打开页面时更新，特别是当用户可能正在页面上执行一个较大的操作的时候。
另外，尽管使用swapCache()方法立刻更新了本地缓存，但是并不意味着我们页面上的图像和脚本文件也会被立刻更新，它们都是在重新打开本页面时才会生效。较完整的示例如下：
HTML页面代码：
<!DOCTYPE html>
<html manifest="swapCache.manifest">
<head>
<meta charset="UTF-8"/>
<title>swapCache()方法示例</title>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<p>swapCache()方法示例。</p>
</body>
</html>
以上页面所使用的脚本文件代码如下：
document.addEventListener("load", function(event) {
setInterval(function() {
// 手工检查是否有更新
applicationCache.update();
}, 5000);
applicationCache.addEventListener("updateready", function(event) {
if(confirm("本地缓存已被更新，需要刷新页面获取最新版本吗？")) {
// (3)手工更新本地缓存
applicationCache.swapCache();
// 重载页面
location.reload();
}
}, false);
});
该页面使用的manifest文件内容如下：
CACHE MANIFEST #version 1.20 CACHE: script.js
applicationCache对象的事件
首次访问网站：
- 浏览器请求访问网站；
- 服务器返回请求网页，例如index.html；
- 浏览器发现该网页具有manifest属性，触发checking事件，检查manifest文件是否存在。不存在时，触发error事件，表示manifest文件未找到，不执行步骤6开始的交互过程；
- 浏览器解析index.html网页，请求页面上所有资源文件；
- 服务器返回所有资源文件；
- 浏览器处理manifest文件，请求manifest中所有要求本地缓存的文件，包括index.html页面本身，即使刚才已经请求过该文件。如果要求本地缓存所有文件，这将是一个比较大的重复的请求过程；
- 服务器返回所有要求本地缓存的文件；
- 浏览器触发downloading事件，然后开始下载这些资源。在下载的同时，周期性地触发progress事件，开发人员可以用编程的手段获取多少文件已被下载，多少文件仍然处于下载队列等信息；
- 下载结束后触发checked事件，表示首次缓存成功，存入所有要求本地缓存的资源文件。
再次访问网站，步骤（1）～（5）同上，在步骤（5）执行完之后，浏览器将核对manifest文件是否被更新，若没有被更新，触发noupdate事件，步骤（6）开始的交互过程不会被执行。如果被更新了，将继续执行后面的步骤，在步骤（9）中不触发checked事件，而是触发updateready事件，这表示下载结束，可以通过刷新页面来使用更新后的本地缓存，或调用swapCache()方法来立刻使用更新后的本地缓存。
另外，在访问缓存名单时如果返回一个HTTP404错误（页面未找到），或者401错误（永久消失），则触发obsolete事件。
在整个过程中，如果任何与本地缓存有关的处理中发生错误的话，都会触发error事件。可能会触发error事件的情况分为以下几种：
- 缓存名单返回一个HTTP404错误或HTTP401错误；
- 缓存名单被找到且没有更改，但引用缓存名单的HTML页面不能正确下载；
- 缓存名单被找到且被更改，但浏览器不能下载某个缓存名单中列出的资源；
- 开始更新本地缓存时，缓存名单再次被更改。
