Firefox 3のオンライン状態の変化を伝えるイベント

杉山貴章（オングス）
2008/12/02 08:00

Firefox 3でブラウザのオンライン／オフライン状態を知るには、navigatoe.onLineプロパティとonline/offlineイベントを利用すればいい。今回は実際にこれを使う簡単なサンプルコードを紹介する。

online/offlineイベントをキャッチする

　ブラウザの状態がオンラインからオフライン、またはその逆に変化した場合、offlineまたはonlineイベントが通知される。このイベントは通常通りリスナでキャッチすればよい。現在の状態はnavigator.onLineプロパティの値から把握できる。

　リスト1は、Mozilla CorporationのJohn Resig氏によるサンプルコードを元に作成した例である。最初にinit()でdocument.bodyに対してonlineイベントとofflineイベントのためのリスナを登録している。リスナではupdateOnlineStatus()を呼び出し、現在の状態と、受け取ったイベントの種類をページに表示する。

リスト1 オンライン状態の変化に応じて表示を変えるサンプルコード

<!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8" />
    <script>
      function updateOnlineStatus(msg) {
        // ステータスを表示
        var status = document.getElementById("status");
        var condition = navigator.onLine ? "オンライン" : "オフライン";
        var state = document.getElementById("state");
        state.innerHTML = condition;


        // ログを表示
        var log = document.getElementById("log");
        log.appendChild(document.createTextNode
                ("[" + msg + "イベント] ステータス：" + condition));
        log.appendChild(document.createElement("br"));
      }


      function init() {
        // ステータスを更新
        updateOnlineStatus("load");


        // offlineイベントを監視
        document.body.addEventListener("offline", function () {
              updateOnlineStatus("offline")
            }, false);
        // onlineイベントを監視
        document.body.addEventListener("online", function () {
              updateOnlineStatus("online")
            }, false);
      }
    </script>
   </head>


   <body onload="init()">
     <div id="status" align="center" 
          style="color:blue; font-weight:bold; 
                 border:3px solid blue; width:300px; height:100px">
       <p id="state"></p>
     </div>


     <div id="log" style="border:3px solid red; 
                          width:300px; min-height:80px"></div>
   </body>
 </html>

　初期状態ではブラウザはオンラインになっているはずなので、図1のように表示される。

図1 初期状態ではオンラインになっている 図1 初期状態ではオンラインになっている

　ここから、[ファイル]メニューでブラウザをオフライン状態にしてみる。するとofflineイベントが発生してupdateOnlineStatus()が呼び出され、表示は図2のように変わる。さらに、再びオンライン状態に戻すと図3のようになる。

図2 オフライン状態にすると、offlineイベントが発生して表示が変わる 図2 オフライン状態にすると、offlineイベントが発生して表示が変わる
図3 再びオンライン状態に戻した 図3 再びオンライン状態に戻した

　ウェブアプリケーションにおいてこのようにオンライン状態の変更を正確に把握できれば、オフラインの間はキャッシュやローカルストレージを利用し、オンラインになったらサーバと同期を取るなどといった処理が可能になる。オフライン対応のウェブアプリケーションを作成するためには必須の機能だ。

記事に関係する情報をコメントでお寄せください

ニックネーム : CNET_IDにログインしてコメントする

コメント本文（必須） :
  • 新着記事
  • 人気記事
  • 特集
  • ブログ
  • 話題のタグ
Ajax Flash RIA Chrome 開発環境 データベース Microsoft インストール Windows Vista OS Java 小技 Webサービス JavaScript Webデザイン Windows XP マイクロソフト プログラミング言語 Firefox iPod touch Firefox 3 Google UI WebKit Windows CSS セキュリティ Mac OS X オープンソース モバイル リファレンス Mozilla ブラウザ Opera Internet Explorer iPhone 3G iPhone ソフトウェア開発 脆弱性 Windows 7 仮想化 Safari HTML Apple Tips アプリケーション Linux Database クラウド Off Topic
  • 話題のタグを見る »