オンライン、オフラインに応じて処理を振り分ける方法

今回の記事ではJavaScriptでネットワーク通信がオンラインの時とオフラインの時で処理を振り分ける方法を紹介します。

WEBサイトを閲覧している際に、オフライン状態で画面が表示されなかった場合に何かしらのアラートがあったら安心すると思います。

最近のWEBサイトにはあまり見かけないですが、実はプログラムでオフライン状態を検知して、ネットワーク通信が出来ていない場合に「ネットワークに繋がっていません」などの任意のアラートを表示する技術は存在します。

今回はその方法を紹介します。

JSでオンライン/オフラインに応じて処理を振り分ける方法

JavaScriptでネットワーク環境の状況を取得するにはnavigator.onLineを使用します。
そしてtrue（真）の時には通常通り「オンライン」、それ以外の場合は「ネットワークに繋がっていません」とのアラートを出します。

実際の記述は以下。

const isOnline = navigator.onLine;
if (isOnline === true) {
    console.log('オンラインです')
} else {
    alert('❎ ネットワークに繋がっていません')
}

オフラインの場合は以下の様に「❎ ネットワークに繋がっていません」とアラートが表示されます。

オンラインの時は表面では何も表示されません。コンソールを確認すると「オンラインです」と表示されています。

以上が「オンライン、オフラインに応じて処理を振り分ける方法」でした。

例えば地下鉄に乗っていてネットワークが切れた際にこのアラートが出てきてくれれば、ユーザーは戸惑わずにしばらく待ってからまたアクセスしてくれるでしょう。