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

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

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

なんと、以下の１行で現在のネットワーク状態が、オンラインかオフラインかを知ることが出来ます。

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アプリケーションがより、柔軟に作れそうです。

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