これは実験段階の機能です。
この機能は複数のブラウザーで開発中の状態にあります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザーの将来のバージョンで変更になる可能性があることに注意してください。

Network Information API はシステムのネットワーク接続に関する情報を、一般的な接続タイプ (例: 'wifi' や 'cellular' など) の観点から提供します。これは、ユーザの接続を元に高解像度コンテンツまたは低解像度コンテンツを選択するために使用できます。API の全体像は NetworkInformation インタフェースの追加と、Navigator インタフェースに追加された 1 個のプロパティ Navigator.connection で構成されます。

註: この機能は Web Workers 内で利用可能です。

接続の変化を検出する

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

var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
var type = connection.type;

function updateConnectionStatus() {
    console.log("接続タイプが" + type + "から" + connection.type + "に変更");
}

connection.addEventListener('typechange', updateConnectionStatus);

大きなリソースをプリロードする

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

let preloadVideo = true;
var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
if (connection) {
  if (connection.type === 'cellular') {
    preloadVideo = false;
  }
}

インタフェース

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

仕様

仕様書 策定状況 コメント
Network Information API
Network Information API の定義
勧告改訂案 最初の仕様

ブラウザ実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 61 未サポート 未サポート 未サポート 未サポート
workersで使用可 61 未サポート 未サポート 未サポート 未サポート
機能 Android Webview Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート 50 61 12.0 (12)[1] 未サポート 37 未サポート
workersで使用可 50 61 53.0 (53) 未サポート 37 未サポート

[1] 設定項目 dom.netinfo.enabled を使用して、Network API を無効化できます。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: FumioNonaka, yyss
最終更新者: FumioNonaka,