Online and offline events
出典: MDC
この記事は Firefox 3 の新機能について述べています
Firefox 3はWHATWG Web Applications 1.0 specificationに従いOnline/Offline eventsを実装します。
目次 |
[編集] 概観
オフラインに対応する良いWebアプリを構築するためには、アプリがいつ本当にオフラインなのか知る必要があります。ついでに言えば、アプリがオンラインの状態にいつ再び戻ったのかを知る必要もあります。効果的に、その要件は次のように分解されます。
- ユーザがいつオンラインに戻るか知らなければなりません。そうすることでサーバと再び同期を取ることができます。
- ユーザがいつオフラインになるのかを知らなければなりません。そうすることでサーバへの要求を後で用いるようキューに貯めることができます。
オンライン／オフラインイベントがこのプロセスを一般化することを手助けします。
[編集] API
[編集] navigator.onLine
navigator.onLineはtrue/falseの値を保持するプロパティでtrueはオンラインを、falseはオフラインを意味します。このプロパティはユーザが対応するメニューアイテム（ファイル→オフライン作業）を選択することによりオフラインモードに移行する度に更新されます。
navigator.onLine属性はユーザがリンクを押した時やスクリプトが外部のページを要求したときに、ユーザエージェントがネットワークに連絡できない場合に（またはそのような試しが失敗した場合に）必ずfalseを戻す必要があります。Firefox 2はこのプロパティをブラウザのオフラインモードがスイッチされる度に更新していました。またWindowsとLinuxにおいてネットワークへの接続が失われたとき、復活したときにも更新していました。
このプロパティはFirefoxとInternetExplorerの古いバージョンにも存在しました。（仕様はこれらの先の実装を基にしました。）従って今すぐこのプロパティを使うことを始められます。ネットワーク状態の自動判断は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="..."属性を指定します
[編集] 実行例
簡単なテストケースを実行してこれらのイベントが働いていることを確認することができます。
<!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>
[編集] References
- 'Online/Offline events' section from the WHATWG Web Applications 1.0 Specification
- The bug tracking online/offline events implementation in Firefox and a follow-up
- A simple test case
- An explanation of Online/Offline events
カテゴリ: AJAX | DOM | Web Development