ネットワーク情報 API はシステムのネットワーク接続に関する情報を、一般的な接続の種類 ('wifi' や 'cellular' など) の観点から提供します。これは、ユーザーの接続に基づき、高解像度コンテンツや低解像度コンテンツを選択するために使用することができます。

API は単一のNetworkInformation オブジェクトで構成されます。これはNavigator.connection またはWorkerNavigator.connection プロパティから返されるインスタンスです。

インターフェイス

NetworkInformation

端末がネットワーク通信に使用している接続方法の情報を提供します。また、接続の種類が変更された場合に、スクリプトへ通知する手段も提供します。NetworkInformation インターフェイスはインスタンス化できません。代わりに、Navigator またはWorkerNavigator インターフェイスを通してアクセスします。

他のインターフェイスの拡張

Navigator.connection読取専用

端末のネットワーク接続に関する情報を格納するNetworkInformation オブジェクトを返します。

WorkerNavigator.connection読取専用

端末のネットワーク接続に関する情報を格納するNetworkInformation オブジェクトを提供します。

例

接続の変化の検出

以下の例では、ユーザーの接続の変化を監視します。

let type = navigator.connection.effectiveType;function updateConnectionStatus() {  console.log(    `接続の種類が ${type} から ${navigator.connection.effectiveType} に変化`,  );  type = navigator.connection.effectiveType;}navigator.connection.addEventListener("change", updateConnectionStatus);

大きなリソースを事前読み込み

接続オブジェクトは、大きな帯域幅やメモリーが使われるリソースを事前読み込みするかどうか決める場合に便利です。以下の例は、ページの読み込み直後に呼び出され、動画の事前読み込みが望ましくない場合の接続の種類を確かめます。携帯電話回線接続が見つかると、preloadVideo フラグはfalse に設定されます。コードをわかりやすくするために、この例ではひとつの接続の種類だけをテストしました。実際に使う場合には、 switch 文その他のやり方で、NetworkInformation.type の可能な値すべてを確かめることになるでしょう。type の値にかかわらず、NetworkInformation.effectiveType プロパティを用いて接続速度を見積もることができます。

let preloadVideo = true;const connection = navigator.connection;if (connection) {  if (connection.effectiveType === "slow-2g") {    preloadVideo = false;  }}

仕様書

ブラウザーの互換性

関連情報

• オンライン／オフラインイベント