Async JavaScript を使用してインターネット接続の状態を確認する方法

JavaScript を使用して、アプリがインターネットに接続されているかどうかを確認できますか?

この記事では、このインターネット接続の検出に関する質問に対する最新の回答を提供します。 (うわー! 5 回早く言って!)

このソリューションでは、JavaScript の Fetch API と、Async &Await による非同期コードを使用します。しかし、最初に、受け入れられている解決策を見て、それがあなたのアプリケーションにとって最良の選択ではない理由を議論しましょう.

navigator.onLine

ナビゲータ インターフェイスのオンライン プロパティ navigator.onLine 、ブラウザのオンラインとオフラインのステータスを検出するためによく使用されます。

オンライン イベントとオフライン イベントのリスナーと組み合わせることで、実装が容易な開発者向けのシンプルなソリューションを提供するように見えます。

navigator.onLine の実装方法を見てみましょう

まず、load イベント リスナーを追加します。 load イベントが発生すると、リスナーはナビゲーター インターフェイスのオンライン プロパティをチェックし、オンライン ステータスを表示します。

navigator の online プロパティは、ブール値 (true または false) の応答を提供します。リスナーのアクションを終了するには、三項ステートメントを使用してステータス表示値を設定します。

window.addEventListener("load", (event) => {
  const statusDisplay = document.getElementById("status");
  statusDisplay.textContent = navigator.onLine ? "Online" : "OFFline";
});

では、なぜナビゲーターという言葉が使われるのでしょうか?これは、90 年代の Netscape Navigator ブラウザへの参照です。

「status」の ID を持つ h1 要素を HTML ページの中央に配置します。上記の JavaScript コードをページに適用すると、「オンライン」と表示されるはずです。

ただし、これはページの読み込み時に h1 要素のみを更新します。オフラインとオンラインのイベント リスナーを追加して、いずれかのイベントが発生するたびにステータス表示を更新しましょう。

window.addEventListener("offline", (event) => {
  const statusDisplay = document.getElementById("status");
  statusDisplay.textContent = "OFFline";
});

window.addEventListener("online", (event) => {
  const statusDisplay = document.getElementById("status");
  statusDisplay.textContent = "Online";
});

Chrome Dev Tools の [Application] タブに移動し、[ServiceWorker] をクリックして、ブラウザがオフラインであるかのように応答するように設定します。

[オフライン] チェックボックスを数回オンおよびオフにします。起動されたオフライン イベントとオンライン イベントに即座に応答するステータス表示が表示されるはずです。

もう少し掘り下げてみましょう

第一印象では、上記はかなり単純な良い解決策のように思えます。残念ながら、navigator のオンライン プロパティと、オンライン イベントとオフライン イベントについて詳しく調べてみると、問題があることがわかりました。

CanIUse.com で navigator.onLine を検索すると、オンライン |プロパティが提供するオフライン ステータス。ただし、サポート テーブルの下のメモを見ると、

「オンラインとは必ずしもインターネットへの接続を意味するわけではありません。また、何らかのネットワークへの接続を意味する場合もあります。」

うーん、それは少し仕事にレンチを投げます.

そのため、ブラウザのオンライン ステータスを本当に判断したい場合は、チェックするための追加の手段を開発する必要があります。

navigator.onLine の MDN ドキュメント リファレンスも見てみましょう。 MDN Web ドキュメントは、CanIUse.com 情報をバックアップし、追加のメモを追加します。

「ブラウザによってこのプロパティの実装は異なります... true 値が必ずしもブラウザがインターネットにアクセスできることを意味するとは限りません。誤検知が発生する可能性があります...」

これは、インターネット接続を検出するためのソリューションとして、navigator のオンライン プロパティを使用することに対する懸念を裏付けるものです。これは、外部データ ソースがいつ利用可能になるかを知ることに依存するアプリケーションに大混乱をもたらす可能性のあるソリューションです。

そのような例の 1 つは、プログレッシブ Web アプリがオンラインかどうかを判断しようとしている場合です。 MDN も推奨しています

「...ブラウザのオンライン ステータスを本当に判断したい場合は、確認するための追加手段を開発する必要があります。」

「navigator online not working」 のクイック Web 検索 このプロパティに依存しているユーザーが問題に遭遇したさまざまなフォーラム投稿を明らかにします。

解決策は?

アプリケーションがルーターやローカル ネットワークだけでなく、本当にインターネットに接続されているかどうかを知る必要があります。 JavaScript ファイルに戻り、最初からやり直しましょう。

アイデアは、リクエストを作成し、失敗した場合にエラーをキャッチして適切に処理することです。リクエストが成功するとオンラインになり、失敗するとオフラインになります。

オンライン ステータスを判断するために、一定間隔で小さな画像をリクエストします。最新の JavaScript は、Async と Await を使用して Fetch API と非同期コードを提供します。これらのツールを使用して目標を達成します。

checkOnlineStatus()

checkOnlineStatus という名前の非同期アロー関数を作成することから始めましょう。この関数は、navigator の online プロパティと同様に true または false を返します。

関数内で、1 ピクセルの画像のフェッチ要求を待機する try ブロックを設定します。 Service Worker がこのイメージをキャッシュしていないことを確認してください。

200 から 299 までの HTTP 応答コードは成功を示し、ステータス コード比較の結果が返されます。これは、応答ステータスが 200 から 299 の場合は true になり、それ以外の場合は false になります。

また、リクエストが失敗した場合にエラーをキャッチする catch ブロックを提供する必要があります。これが発生した場合に確実にオフラインであることを示すために、catch ブロックで false を返します。

const checkOnlineStatus = async () => {
  try {
    const online = await fetch("/1pixel.png");
    return online.status >= 200 && online.status < 300; // either true or false
  } catch (err) {
    return false; // definitely offline
  }
};

次に、setInterval メソッドを使用して、匿名の非同期関数を渡します。 async 関数は、checkOnlineStatus 関数の結果を待ちます。次に、現在のオンライン ステータスを表示するために、結果を含む 3 項ステートメントを使用します。

この例をテストするには、インターバル遅延を 3 秒 (3000 ミリ秒) ごとに設定します。ただし、これは非常に頻繁です。実際のニーズには、30 秒 (30000 ミリ秒) ごとにチェックするだけで十分な場合があります。

setInterval(async () => {
  const result = await checkOnlineStatus();
  const statusDisplay = document.getElementById("status");
  statusDisplay.textContent = result ? "Online" : "OFFline";
}, 3000); // probably too often, try 30000 for every 30 seconds

新しいコードを保存したら、Chrome Dev Tools の [アプリケーション] タブに戻ってオフライン レスポンスをテストしましょう。

非同期機能を備えたロード イベント リスナーを含めるのをほとんど忘れていました。負荷イベントの検出は、オフラインでの可用性のために Service Worker を利用するプログレッシブ Web アプリを使用している場合にのみ重要です。そうしないと、Web ページやアプリは接続なしでは読み込まれません。

新しいロード イベント リスナーは次のとおりです:

window.addEventListener("load", async (event) => {
  const statusDisplay = document.getElementById("status");
  statusDisplay.textContent = (await checkOnlineStatus())
    ? "Online"
    : "OFFline";
});

最終的な考え

上記の間隔コードは、アプリで接続ステータスを表示するのに適しています。とはいえ、アプリケーションで重要なデータ要求を行う 20 秒または 30 秒前にチェックされた接続ステータスに依存することはお勧めしません。

したがって、リクエストの直前に checkOnlineStatus 関数を呼び出し、データをリクエストする前にレスポンスを評価する必要があります。

const yourDataRequestFunction = async () => {
    const online = await checkOnlineStatus();
    if (online) {
    	// make data request
    }
}

結論

navigator.onLine は広くサポートされていますが、アプリケーションが本当にインターネットに接続されているかどうかを判断する際に信頼できない結果をもたらします。 Fetch API と非同期 JavaScript を利用することで、より信頼性の高いソリューションをすばやくコーディングできます。

ここに GitHub のコード要旨へのリンクと、私がまとめたビデオ チュートリアルがあります: