これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

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 の定義
ドラフト 最初の仕様

ブラウザ実装状況

現在、互換性データを可読形式の JSON フォーマットに置き換えているところです。 この互換性一覧は古い形式を使っており、これに含まれるデータの置き換えが済んでいません。 手助けしていただける場合は、こちらから!

機能 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,