【フロントエンド】JavaScriptでユーザーがオンラインかどうかを検出する方法【プログラミング】

この記事の最終更新日: 2022年12月30日

インターネット未接続の可能性をユーザーに通知したい場合があります。

例えば、ユーザーが Web サイトにアクセスしてキャッシュバージョンを受信していると、

インターネットがオフラインにもかかわらず、まだ機能しているように見えることがよくあります。

ここで、接続を確認する必要があることを知らせるメッセージを表示すると効果的です。

接続状態の検出法

API を利用して接続ステータスを検出できます。
APIはboolean値を返し、ユーザーがオンラインかどうかを示します。

注: ブラウザによって実装方法が異なるため、結果が異なる場合があることに注意してください。(Chrome想定)

書き方のサンプルは以下の通りです。

window.addEventListener('offline', (e) => {

  console.log('offline');

});

window.addEventListener('online', (e) => {

  console.log('online');

});

daigoro

大阪のエンジニアが書いているブログ。