Firefox 3のオンライン／オフライン状態を把握する

杉山貴章（オングス）
2008/11/28 17:00

ウェブアプリケーションをオフラインでも利用できるようにするためには、ウェブブラウザがいつオンライン／オフラインになったのかを正確に把握することが不可欠だ。ここではHTML 5で追加されるオンライン状態を知るための機能を紹介する。

オンライン状態を知るためのプロパティとイベント

　HTML 5ではウェブブラウザのオンライン／オフラインの状態をnavigatoe.onLineプロパティの値で保持する。オンラインならば"true"、オフラインならば"false"となる。ユーザエージェントがページを要求した際にネットワークに接続できなかった場合、この値はfalseに設定される。

　この値を手動で変更することもできる。図1のようにメニューから[ファイル]→[オフライン作業]と選択すればよい。現在がオンライン状態の場合は"false"に切り替わってオフライン状態になり、オフライン状態の場合は"true"に切り替わってオンライン状態になる。

図1 メニューからFirefoxのオンライン／オフライを切換え 図1 メニューからFirefoxのオンライン／オフライを切換え

　ブラウザの状態がオンラインに変更されたとき、document.bodyで"online"イベントが発生する。逆にオフラインに変更されたときは"offline"イベントが発生する。したがって、document.body、document、windowのいずれかに、addEventListenerを使ってでこれらのイベントを受け取るリスナを設定しておけば、ブラウザのオンライン状態の変化を検知することが可能となる。例えば、リスト1のようにする。

リスト1 ウェブブラウザのオンライン状態変更時の処理を定義

// オンラインに変わったとき
document.body.addEventListener("online", function () {
        リスナの処理
    }, false);

// オフラインに変わったとき
document.body.addEventListener("offline", function () {
        リスナの処理
    }, false);

　または、リスト2のようにbodyタグにononline/onoffline属性を指定することでもこのイベントを処理することが可能だ。

リスト2 bodyタグの属性でオンライン状態変更時の処理を設定

<body ... ononline="オンライン時の処理" onoffline="オフライン時の処理">

　次回は、実際にオンライン状態の変化を検知する簡単な例を紹介する。

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

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

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