Navigator: onLine プロパティ

ブラウザーのオンライン状態を返します。このプロパティは、オンラインを意味する true とオフラインを意味する false の論理値を返します。このプロパティは、ブラウザーのネットワークへの接続状態が変化するたびに更新を送信します。更新は、ユーザーがリンクをたどったときや、スクリプトがリモートページを要求したときに発生します。例えば、ユーザーがインターネット接続を失った直後にリンクをクリックした場合、このプロパティは false を返します。

このプロパティの実装は、ブラウザーにより異なります。

Chrome および Safari は、ブラウザーがローカルエリアネットワーク (LAN) またはルーターに接続できないときにオフライン、それ以外の状況では true を返します。従って、false 値が返る場合はブラウザーがオフラインであると考えることができますが、true 値は必ずインターネットにアクセスできると考えることはできません。仮想イーサネットアダプタを持つ仮想化ソフトウェアを実行しているコンピュータでは常に「接続中」になるなど、誤検出になる可能性があります。よって、本当にブラウザーのオンラインである状態を検出したい場合は、チェックするための追加の手段を開発する必要があります。

Firefox では、ブラウザーをオフラインモードに切り替えると、 false 値が送信されます。 Firefox 41 までは、それ以外の条件では true 値が返されます。 Windows の Nightly 68 で実際の動作を確認したところ、 Chrome や Safari のように LAN 接続のみを確認しているため、誤検出が発生していました。

online および offline イベントを待ち受けすることにより、ネットワーク接続状態の変化を確認することができます。

if (navigator.onLine) {
  console.log("online");
} else {
  console.log("offline");
}

window.addEventListener("offline", (e) => {
  console.log("offline");
});

window.addEventListener("online", (e) => {
  console.log("online");
});