JavaScriptでネットワークがオンライン状態かどうか調べる

ネットワークがオンライン状態かどうかを調べる方法をメモ。

対応ブラウザ

navigator.onLineの対応ブラウザはこちら
基本的には主要ブラウザは問題なさそうに見えますが、デスクトップのFirefoxでは「オフライン作業モード」無効化時はtrue、有効化時はfalseを返すようです。(Windows環境のFirefox55.0.3で確認。)
「オフライン作業モード」はファイル > オフライン作業 から変更できます。

サンプルコード

ボタンクリック時にオンライン状態かどうかを調べるようにしてみます。

HTML

<button id="check">調べる</button>

オンライン状態かどうかをconsoleに表示させます。

JavaScript

document.getElementById('check').addEventListener('click', function() {
	if (navigator.onLine) {
		console.log('onlineです。');
	} else {
		console.log('offlineです。');
	}
}, false);

オンライン状態かどうか調べるデモページ1

ネットワークの接続状態の変更を確認したい場合、onlineとofflineでイベントが用意されています。

JavaScript

window.addEventListener('online', function(e) {
	console.log('onlineです。');
});

window.addEventListener('offline', function(e) {
	console.log('offlineです。');
});

これで接続状態に変更があった場合にconsoleが表示されるようになりました。
オンライン状態かどうか調べるデモページ2

アプリでオンライン状態かどうかを判別したい場合などに使えそうです。
　

【参考サイト】

• window.navigator.onLine – Web API インターフェイス | MDN