JavaScript はインターネット接続の変化をどのように検出して対応できるのでしょうか?

JavaScript でのインターネット接続の検出: 包括的なガイド

今日の Web 開発環境では、堅牢で信頼性の高いユーザー エクスペリエンスを確保できるかどうかが、多くの場合、検出にかかっています。インターネット接続がオフラインかアクティブか。幸いなことに、JavaScript には、この重要な機能を実現するためのメソッドがいくつか用意されています。

window.navigator.onLine プロパティの紹介

ほとんどの主要なブラウザが window.navigator.onLine プロパティをサポートするようになりました。 、インターネット接続の現在の状態を示すブール値。このプロパティにアクセスして、ユーザーがインターネットに接続しているかどうかを確認します。

console.log('Initially ' + (window.navigator.onLine ? 'on' : 'off') + 'line');

接続イベントのリッスン

ブラウザには、オンライン イベントとオフライン イベントのイベント リスナーも用意されています。 、接続ステータスが変化したときにトリガーされます。これらのイベントをリッスンすることで、変更にリアルタイムで対応できます。

window.addEventListener('online', () => console.log('Became online'));
window.addEventListener('offline', () => console.log('Became offline'));

クリックで接続ステータスを確認する

これらのメソッドの動作をデモするには、クリックすると現在の window.navigator.onLine を確認して表示する HTML ボタンを作成します。 value:

<button>

document.getElementById('statusCheck').addEventListener('click', () => console.log('window.navigator.onLine is ' + window.navigator.onLine));

追加の考慮事項

• キャッシュと WebSocket のため、window.navigator.onLine プロパティは常に正確に反映するとは限りません。実際の接続ステータス。
• サーバー側 API の使用 (例: fetch() API) を使用し、その応答を定期的に監視することで、クライアント側のメソッドを補完して信頼性を高めることができます。

以上がJavaScript はインターネット接続の変化をどのように検出して対応できるのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。