2012/08/25更新

[Web] Webページ上でオンライン/オフライン状態を知る、ネットワークの変化に気付く

このエントリーをはてなブックマークに追加            

こんにちは、@yoheiMuneです。
最近知った驚いた機能で、なんとJavaScriptでネットワーク状態を把握する機能があります。
今日はその紹介をブログを書きたいと思います。

Notify Web Online and Offline



現在のネットワーク状態をJavaScriptで知る

なんと、以下の1行で現在のネットワーク状態が、オンラインかオフラインかを知ることが出来ます。
var isOnline = navigator.onLine;
こんな簡単にできる事を知ってビックリしました。onLineプロパティを使えるか否かも考慮して、以下のようなコードを書くと、 現在のネットワーク状態を知ることが出来ます。
if (navigator.onLine === true) {
  alert("current network status is online");
} else if (navigator.onLine === false) {
  alert("current network status is offline");
} else {
  alert("current network status is unknown");
}



ネットワーク状態の変化に気付く

onlineとofflineというイベントが用意されており、そのイベントに関数を登録する事で、 ネットワークがオンライン→オフライン、オフライン→オンラインになった際に、イベントを拾うことが出来ます。
以下がサンプルソースとなります。
// オンラインになったら呼び出されるイベント
window.addEventListener("online", function(){
  alert("network became online");
}, false);

// オフラインになったら呼び出されるイベント
window.addEventListener("offline", function() {
  alert("network became offline");
}, false);
こんな仕組みがあるのかと知って、ビックリしました。
上記で紹介した機能を簡単に試せるページを作りました。もし良ければお試しください。
http://www.yoheim.net/labo/html5/other/onlineOffline.html



参考資料

今回の実装を書くにあたり、以下の記事を参考にしました。ありがとうございました。
- Online and Offline Event @Mozilla Developer Network



最後に

Webの進化ってスゴいですね。
この機能を使うと、HTML5 Offline Cacheを使ったアプリケーションで、 オフラインからオンラインに復帰した場合に処理を行う(データのロードなど)事が出来るようになります。

またオフラインの場合には、サーバーにリクエストを送らず(わざわざ失敗する事はせず)、 すぐにユーザーにアクションする事も可能となり、ユーザー体験を向上させることもできます。
Webアプリケーションがより、柔軟に作れそうです。

今回も最後までお読み頂きましてありがとうございました!!





こんな記事もいかがですか?

RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。