HTML5 - 离线应用的创建与使用详解2（使用js检测连接、监听更新）

作者：hangge | 2017-07-12 08:10

一、使用 JavaScript 检测连接情况

1，实现原理

使用 JavaScript 检测浏览器当前是否在线的一个诀窍，就是利用后备区块。让浏览器根据应用是否在线分别加载相同 JS 函数的不同版本。

注意：这里的在线除了指计算机连接了英特网，浏览器还要能连接到 Web 服务才行。否则也属于离线。

2，实现步骤

（1）首先在描述文件后备区块中添加如下文件对：

FALLBACK:
online.js offline.js

（2）这两个 js 文件内容很简单，就包含一个简单的函数：

--- online.js ---

function isSiteOnline() {
  return true;
}

--- offline.js ---

function isSiteOnline() {
  return false;
}

（3）在原始的网页中引用 online.js，同时页面加载完毕后将当前的连接状态弹出显示。

<!DOCTYPE html>
<html manifest="hangge.appcache">
  <head>
    <meta charset="utf-8">
    <title>hangge.com</title>
    <script type="text/javascript" src="online.js"></script>
    <script type="text/javascript" src="js/jquery.js"></script>
  </head>
  <script type="text/javascript">
    $(document).ready(function(){
      if(isSiteOnline()){
        alert("当前能连上Web服务器!");
      }else{
        alert("当前无法连上Web服务器!");
      }
    });
  </script>
  <body>
  </body>
</html>

3，运行效果

下面是当应用在线时的效果：

二、使用 javascript 监听更新

通过 applicationCache 对象的 status 属性，可以知道浏览器当前在干什么，是在检测更新的描述文件，还是在下载新文件，或者做替他事情。

同时不同属性值都会有对应的事件，这些事件会在 applicationCache 的状态变化时触发，具体事件见下方。

1，缓存事件

onChecking：浏览器在发现网页中的 manifest 属性时，会触发这个事件，并向 web 服务器请求描述文件。
onNoUpdate：如果浏览器已经下载了描述文件，而描述文件并未改变，浏览器就会触发这个事件，然后不再做什么了。
onDownloading：浏览器在开始下载描述文件（以及其中列出的文件）之前会触发这个事件。除了第一次下载描述文件时，更新文件时都会触发这个事件。
onProgress：下载文件期间，浏览器会不断地触发这个事件，以报告进度。
onCached：当新离线应用的所有文件第一次下载完成后，会触发这个事件。此后，不会再发生事件。
onUpdateReady：这个事件表示已经取得了更新的内容。此时，新内容已经可以使用了，但除非重新加载页面，否则不会在浏览器窗口中出现。此后，不会再发生事件。
onError：缓存期间发生任何问题都会触发这个事件。可能是无法连接 Web 服务器（这种情况下，会把页面切换到离线浏览模式），或者描述文件包含错误的语法，或者缓存的资源不存在。此后，不会再发生事件。
onObsolete：在检测更新时，浏览器发现描述文件不存在了，就会触发这个事件。然后，它会清除缓存。下次再加载页面时，浏览器会从 web 服务器取得实时、最新的在线版页面。

2，onUpdateReady事件使用

上面各个事件中最有用的便是 onUpdateReady 了，表示浏览器已经下载了新版本的应用。虽然新版本已经可以使用了，但浏览器窗口中显示的仍然是旧版本的内容。

利用这个事件可以告诉访客刷新页面，浏览新版本的内容，就像桌面应用下载完毕更新之后做的那样。

<!DOCTYPE html>
<html manifest="hangge.appcache">
  <head>
    <meta charset="utf-8">
    <title>hangge.com</title>
  </head>
  <script type="text/javascript">
    window.onload = function() {
      applicationCache.onupdateready = function() {
        if(confirm("当前有可用的新版本。是否重新加载？")){
          window.location.reload();
        }
      }
    }
  </script>
  <body>
  </body>
</html>

上面样例代码，当离线应用有新版本可以使用时会提示用户。在用户确认后会重新加载页面。

3，update()方法介绍

除了 status 属性和上述事件之外，applicationCache 对象还有两个方法：update() 和 swapCache()。

（1）调用 update 方法只会让浏览器检测是否有新的描述文件。如果有，浏览器就会在后台下载新文件。否则，什么也不做。

applicationCache.update();

（2）虽然浏览器能自动检测更新，但我们也可以调用 update() 方法让它去检测，以便及时发现更新的描述文件。这个方法很适合那些生命期长的Web应用，比如一打开就是一整天的页面。

HTML5 / CSS3