WorkerNavigator.onLine

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

例えば、ユーザーがインターネット接続を失った直後にリンクをクリックした場合、このプロパティは false を返します。

ブラウザーでは、このプロパティを異なる形で実装しています。

Chrome と Safari では、ブラウザーがローカルエリアネットワーク (LAN) またはルーターに接続できない場合にオフラインになり、それ以外の条件ではすべて true を返します。つまり、 false の値を返した場合は、ブラウザーがオフラインであるとみなされますが、 true の値を返した場合は、必ずしもブラウザーがインターネットにアクセスできることを意味するとは想定できません。例えば、コンピューターが仮想イーサネットアダプターを保有する仮想化ソフトウェアを実行しており、常に「接続」されている場合などには、誤った値を取得する可能性があります。したがって、実際にブラウザーのオンライン状態を判断したいのであれば、調べるための手段を追加開発する必要があります。詳しくは、 2011 年の記事、 Working Off the Grid をご覧ください。

Firefox と Internet Explorer では、ブラウザーをオフラインモードに切り替えると、 false の値が送信されます。

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

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

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