HTML5 离线应用程序【2】

2016年06月07日 HTML 暂无评论 阅读 31 views 次

applicationCache对象

applicationCache对象代表本地缓存,可以用它来通知用户本地缓存中已经被更新,也允许用户手工更新本地缓存。在浏览器与服务器的交互过程中,当浏览器对本地缓存进行更新,将入新的资源文件时,会触发applicationCache对象的updateready事件,通知本地缓存已经被更新。可以利用该事件告诉用户本地缓存已经被更新,用户需要手工刷新页面来得到最新版本的应用程序,代表如下所示:

Js代码  收藏代码
  1. applicationCache.addEventListener("updateready"function(event) {
  2.     // 本地缓存已被更新,通知用户。
  3.     alert("本地缓存已被更新,可以刷新页面来得到本程序的最新版本。");
  4. }, false);

另外可以通过applicationCache对象的swapCache()方法来控制如何进行本地缓存的更新及更新的时机。

swapCache()方法

该方法用来手工执行本地缓存的更新,它只能在applicationCache对象的updateReady事件被触发时调用,updateReady事件只有在服务器上的manifest文件被更新,并且把manifest文件中所要求的资源文件下载到本地后触发。该事件的含义是“本地缓存准备被更新”。当这个事件被触发后,可以用swapCache()方法来手工进行本地缓存的更新。

当本地缓存的容量非常大,本地缓存的更新工作将需要相对较长的时间,而且还会把浏览器锁住。这时最好有个提示,告诉用户正在进行本地缓存的更新,代码如下:

Js代码  收藏代码
  1. applicationCache.addEventListener("updateready"function(event) {
  2.     // 本地缓存已被更新,通知用户。
  3.     alert("正在更新本地缓存……");
  4.     applicationCache.swapCache();
  5.     alert("本地缓存更新完毕,可以刷新页面使用最新版应用程序。");
  6. }, false);

在以上代码中,如果不使用swapCache()方法,本地缓存一样会被更新,但是,更新的时候不一样。如果不调用该方法,本地缓存将在下一次打开本页面时被更新;如果调用该方法,则本地缓存将会被立刻更新。因此,可以使用confirm()方法让用户选择更新折时机,是立刻更新还是下次打开页面时更新,特别是当用户可能正在页面上执行一个较大的操作的时候。

另外,尽管使用swapCache()方法立刻更新了本地缓存,但是并不意味着我们页面上的图像和脚本文件也会被立刻更新,它们都是在重新打开本页面时才会生效。较完整的示例如下:

HTML页面代码:

Html代码  收藏代码
  1. <!DOCTYPE html>
  2. <html manifest="swapCache.manifest">
  3. <head>
  4.     <meta charset="UTF-8"/>
  5.     <title>swapCache()方法示例</title>
  6.     <script type="text/javascript" src="js/script.js"></script>
  7. </head>
  8. <body>
  9.     <p>swapCache()方法示例。</p>
  10. </body>
  11. </html>

以上页面所使用的脚本文件代码如下:

Js代码  收藏代码
  1. document.addEventListener("load"function(event) {
  2.     setInterval(function() {
  3.         // 手工检查是否有更新
  4.         applicationCache.update();
  5.     }, 5000);
  6.     applicationCache.addEventListener("updateready"function(event) {
  7.         if(confirm("本地缓存已被更新,需要刷新页面获取最新版本吗?")) {
  8.             // (3)手工更新本地缓存
  9.             applicationCache.swapCache();
  10.             // 重载页面
  11.             location.reload();
  12.         }
  13.     }, false);
  14. });

该页面使用的manifest文件内容如下:

Txt代码  收藏代码
  1. CACHE MANIFEST
  2. #version 1.20
  3. CACHE:
  4. script.js

applicationCache对象的事件

首次访问网站:

  1. 浏览器请求访问网站;
  2. 服务器返回请求网页,例如index.html;
  3. 浏览器发现该网页具有manifest属性,触发checking事件,检查manifest文件是否存在。不存在时,触发error事件,表示manifest文件未找到,不执行步骤6开始的交互过程;
  4. 浏览器解析index.html网页,请求页面上所有资源文件;
  5. 服务器返回所有资源文件;
  6. 浏览器处理manifest文件,请求manifest中所有要求本地缓存的文件,包括index.html页面本身,即使刚才已经请求过该文件。如果要求本地缓存所有文件,这将是一个比较大的重复的请求过程;
  7. 服务器返回所有要求本地缓存的文件;
  8. 浏览器触发downloading事件,然后开始下载这些资源。在下载的同时,周期性地触发progress事件,开发人员可以用编程的手段获取多少文件已被下载,多少文件仍然处于下载队列等信息;
  9. 下载结束后触发checked事件,表示首次缓存成功,存入所有要求本地缓存的资源文件。

再次访问网站,步骤(1)~(5)同上,在步骤(5)执行完之后,浏览器将核对manifest文件是否被更新,若没有被更新,触发noupdate事件,步骤(6)开始的交互过程不会被执行。如果被更新了,将继续执行后面的步骤,在步骤(9)中不触发checked事件,而是触发updateready事件,这表示下载结束,可以通过刷新页面来使用更新后的本地缓存,或调用swapCache()方法来立刻使用更新后的本地缓存。

另外,在访问缓存名单时如果返回一个HTTP404错误(页面未找到),或者401错误(永久消失),则触发obsolete事件。

在整个过程中,如果任何与本地缓存有关的处理中发生错误的话,都会触发error事件。可能会触发error事件的情况分为以下几种:

给我留言

您必须 登录 才能发表留言!