フロントエンドネットワークのステータス

フロントエンドはどのようにしてオンライン状態とオフライン状態を取得するのか

`online` そして `offline` イベント

onlineとofflineイベントはブラウザに付属する 2 つのイベントで、イベントリスナーを追加することで現在のネットワーク接続ステータスを検出できます。これら 2 つのイベントは、オンラインからオフラインへの切り替え、またはその逆の切り替えなど、ブラウザーのネットワーク接続が変化したときに発生します。サンプルコードは次のとおりです。

window.addEventListener('online', () => {
  console.log('Online');
});

window.addEventListener('offline', () => {
  console.log('Offline');
});

上記のコードでは、イベントリスナーonlineとofflineイベントリスナーをそれぞれ追加し、イベントがトリガーされたときに対応する情報をコンソールに出力します。

`navigator.onLine`

イベントリスナーの使用に加えて、JavaScript はブラウザのネットワーク接続ステータスを検出する別の方法、つまりnavigator.onLineプロパティ。このプロパティは、ブラウザがインターネットに接続されているかどうかを示すブール値を返します。サンプルコードは次のとおりです。

if (navigator.onLine) {
  console.log('Online');
} else {
  console.log('Offline');
}

上記のコードでは、navigator.onLine属性を現在のネットワーク接続ステータスを検出し、返されたブール値に従って対応する情報をコンソールに出力します。navigator.onLineこの属性は現在のネットワーク接続状態を検出することしかできず、ネットワーク接続状態の変化を監視することはできないことに注意してください。フロントエンドを通じてより多くのネットワーク情報を取得する方法navigator.connection

`navigator.connection`それは何ですか

navigator.connectionネットワーク接続に関する情報を取得するためにWeb APIで提供されるインターフェースです。このインターフェイスは、ネットワークタイプ、帯域幅、往復時間など、ユーザー機器のネットワーク接続ステータスに関する複数の属性を含むNetworkInformationオブジェクト。

APIを通じてnavigator.connection取得できる主なネットワーク接続属性は次のとおりです。

downlink: 現在のネットワーク接続の推定下り速度 (Mbps)
downlinkMax: デバイスのネットワーク接続の最大可能ダウンリンク速度 (Mbps)
effectiveType: 現在のネットワーク接続の推定速度タイプ (slow-2g、2g、3g、4g など)
rtt: 現在のネットワーク接続の推定ラウンドトリップ時間 (ミリ秒)
saveData：データセーブモードかどうか

除此之外，还有其他诸如 type、onchange 等属性，用于获取设备网络连接的类型和注册网络连接状态变化事件等功能。

如何使用 `navigator.connection`？

在使用 navigator.connection API 之前，需要先进行是否支持的判断。可以通过以下方式判断浏览器是否支持该 API：

if ('connection' in navigator) {
  // 支持 navigator.connection API
} else {
  // 不支持 navigator.connection API
}

如果返回结果为 true，则表示当前浏览器支持 navigator.connection API。

使用 navigator.connection API 需要注意的是，该接口的返回值是一个只读对象，因此不能直接修改其中的属性值。同时，在某些浏览器中可能会出现某些属性不被支持的情况，需要根据实际需求进行选择和测试。

以下是一个示例代码，用于获取当前设备的网络连接信息并将其输出到控制台：

if ('connection' in navigator) {
  const networkInfo = navigator.connection;
  console.log('Network downlink:', networkInfo.downlink);
  console.log('Network effective type:', networkInfo.effectiveType);
  console.log('Network round-trip time:', networkInfo.rtt);
  console.log('Network data saving mode:', networkInfo.saveData);
} else {
  console.log('navigator.connection is not supported.');
}

总结

navigator.connection API 是一种用于获取用户设备当前的网络连接状态信息的 JavaScript 接口，能够提供多种有助于优化网络应用程序的关键性能指标，如带宽、往返时间等。通过该 API 您可以针对用户当前的网络环境进行优化，从而提高应用程序的性能和用户体验。值得注意的是，由于不同浏览器兼容性问题的存在，需要在使用前进行检测以保证代码正常运行。