ネットワーク情報 API

メモ: この機能はウェブワーカー内で利用可能です。

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

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

インターフェイス

NetworkInformation

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

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

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

WorkerNavigator.connection 読取専用

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

接続の変化の検出

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

js
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 プロパティを用いて接続速度を見積もることができます。

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

仕様書

Specification
Network Information API

ブラウザーの互換性

api.NetworkInformation

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
NetworkInformation
change event
downlink
downlinkMax
Experimental
effectiveType
rtt
saveData
type
Experimental
typechange event
DeprecatedNon-standard
Available in workers

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.
See implementation notes.

api.Navigator.connection

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
connection

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

関連情報