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にログインしてコメントする

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