警告: この記事の内容は古くなっている可能性があります。
Firefox 3 は WHATWG Web Applications 1.0 仕様に従い Online/Offline イベントを実装します。
概観
オフラインに対応する良い Web アプリケーションを構築するためには、アプリケーションが実際にいつオフラインなのか知る必要があります。ついでに言えば、アプリケーションが 'オンライン' の状態に再び戻ったのがいつかを知る必要もあります。効果的に、その要件は次のように分解されます。
- ユーザがいつオンラインに戻るか知らなければなりません。そうすることでサーバと再び同期を取ることができます。
- ユーザがいつオフラインになるのかを知らなければなりません。そうすることでサーバへの要求を後で用いるようキューに貯めることができます。
オンライン／オフラインイベントがこのプロセスを一般化することを手助けします。
あなたの Web アプリケーションは、オフラインリソースのキャッシュで確実に管理されるドキュメントを確立する必要があります。これを行うための方法を Firefox のオフラインリソースの記事で学んでください。
API
navigator.onLine
navigator.onLine は true/false の値を保持するプロパティで、true はオンラインを、false はオフラインを意味します。このプロパティはユーザが対応するメニューアイテム (ファイル→オフライン作業) を選択することによりオフラインモードに移行する度に更新されます。
加えて、このプロパティはブラウザがネットワークに接続することがそれ以降不可能になった時にもその度に更新される必要があります。次の仕様に従います。
navigator.onLine 属性はユーザがリンクを押した時やスクリプトが外部のページを要求したときに、ユーザエージェントがネットワークに連絡できない場合（またはそのような試みが失敗した場合）に必ず false を返す必要があります。
Firefox 2 はこのプロパティをブラウザのオフラインモードが切り替わる度に更新していました。また Windows と Linux においてネットワークへの接続が失われたとき、復活したときにも更新していました。
このプロパティは Firefox と Internet Explorer の古いバージョンにも存在しました。(仕様はこれらの先の実装を基にしました。) 従って今すぐこのプロパティを使い始めることができます。ネットワーク状態の自動判断は Firefox 2 にて実装されました。
"online" および "offline" イベント
Firefox 3の 2 つの新しいイベントを紹介します。"online" と "offline" です。これらの 2 つのイベントは各ページの <body> にてブラウザがオンラインとオフラインのモードを切り替えるたびに発生します。加えてこのイベントは document.body から document へと浮上し、window までたどり着きます。これらのイベントはキャンセルできません (ユーザのオンラインモードやオフラインモードへの移行を防ぐことはできません)。
これらのイベントに対するリスナを登録することもいくつかの馴染みのある方法にて可能です。
window,document,document.body上にてaddEventListenerを利用します。documentまたはdocument.bodyの.ononlineまたは.onofflineプロパティを JavaScript のFunctionオブジェクトに設定します。(注意：window.ononlineまたはwindow.onofflineを利用することは互換性が原因で動作しません)- HTML マークアップにて
<body>タグのononline="..."またはonoffline="..."属性を指定します。
実行例
簡単なテストケースを実行してこれらのイベントの動作を確認することができます。 XXX When mochitests for this are created, point to those instead and update this example -nickolay
<!doctype html>
<html>
<head>
<script>
function updateOnlineStatus(msg) {
var status = document.getElementById("status");
var condition = navigator.onLine ? "ONLINE" : "OFFLINE";
status.setAttribute("class", condition);
var state = document.getElementById("state");
state.innerHTML = condition;
var log = document.getElementById("log");
log.appendChild(document.createTextNode("Event: " + msg + "; status=" + condition + "\n"));
}
function loaded() {
updateOnlineStatus("load");
document.body.addEventListener("offline", function () {
updateOnlineStatus("offline")
}, false);
document.body.addEventListener("online", function () {
updateOnlineStatus("online")
}, false);
}
</script>
<style>...</style>
</head>
<body onload="loaded()">
<div id="status"><p id="state"></p></div>
<div id="log"></div>
</body>
</html>