WorkerNavigator.onLine

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

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

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

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

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

online は論理値の true または false です。

基本的な使用

ワーカーでオンラインかどうかを調べるには、以下の例のように navigator.onLine を問い合わせます。

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

ブラウザーが navigator.onLine に対応していない場合、上記の例は常に false/undefined として出力されます。

ネットワーク状態の変化を待ち受けする

ネットワーク状態の変化を監視する場合は、 addEventListener を使用して online および offline のイベントを待ち受けしてください。以下の例のようにします。

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

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

仕様書

Specification
HTML
# dom-navigator-online-dev

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
onLine

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
See implementation notes.