ネットワーク情報 API

インターフェイス

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;
  }
}

仕様書

ブラウザーの互換性

関連情報

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