Network Information API

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

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

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

接続の変化の検出

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

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

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

connection.addEventListener('change', updateConnectionStatus);

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

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

let preloadVideo = true;
var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
if (connection) {
  if (connection.effectiveType === 'slow-2g') {
    preloadVideo = false;
  }
}

インターフェイス

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

仕様書

仕様書 状態 備考
Network Information API
Network Information API の定義
ドラフト 初回定義

ブラウザーの互換性

NetworkInformation

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
NetworkInformation
実験的
Chrome 完全対応 61Edge 完全対応 79Firefox 未対応 なしIE 未対応 なしOpera 完全対応 48Safari 未対応 なしWebView Android 完全対応 50Chrome Android 完全対応 38Firefox Android 完全対応 31Opera Android 完全対応 45Safari iOS 未対応 なしSamsung Internet Android 完全対応 3.0
downlink
実験的
Chrome 完全対応 61Edge 完全対応 79Firefox 未対応 なしIE 未対応 なしOpera 完全対応 48Safari 未対応 なしWebView Android 完全対応 50Chrome Android 完全対応 38Firefox Android ? Opera Android 完全対応 45Safari iOS 未対応 なしSamsung Internet Android 完全対応 3.0
downlinkMax
実験的
Chrome 完全対応 61
補足
完全対応 61
補足
補足 Only supported in Chrome OS
Edge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 完全対応 50Chrome Android 完全対応 38Firefox Android 未対応 なしOpera Android 完全対応 45Safari iOS 未対応 なしSamsung Internet Android 完全対応 3.0
effectiveType
実験的
Chrome 完全対応 61Edge 完全対応 79Firefox 未対応 なしIE 未対応 なしOpera 完全対応 48Safari 未対応 なしWebView Android 完全対応 50Chrome Android 完全対応 38Firefox Android 完全対応 ありOpera Android 完全対応 45Safari iOS 未対応 なしSamsung Internet Android 完全対応 3.0
onchange
実験的
Chrome 完全対応 61Edge 完全対応 79Firefox 未対応 なしIE 未対応 なしOpera 完全対応 48Safari 未対応 なしWebView Android 完全対応 50Chrome Android 完全対応 38Firefox Android 未対応 なし
補足
未対応 なし
補足
補足 On Firefox, the event handler property corresponding to the change event is ontypechange.
Opera Android 完全対応 45Safari iOS 未対応 なしSamsung Internet Android 完全対応 3.0
ontypechange
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera ? Safari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android ? Opera Android ? Safari iOS 未対応 なしSamsung Internet Android 未対応 なし
rtt
実験的
Chrome 完全対応 61Edge 完全対応 79Firefox 未対応 なしIE 未対応 なしOpera 完全対応 48Safari 未対応 なしWebView Android 完全対応 50Chrome Android 完全対応 38Firefox Android 未対応 なしOpera Android 完全対応 45Safari iOS 未対応 なしSamsung Internet Android 完全対応 3.0
saveData
実験的
Chrome 完全対応 65Edge 完全対応 79Firefox 未対応 なしIE 未対応 なしOpera 完全対応 ありSafari 未対応 なしWebView Android 完全対応 65Chrome Android 完全対応 65Firefox Android ? Opera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android 完全対応 9.0
type
実験的
Chrome 完全対応 61
補足
完全対応 61
補足
補足 Only supported in Chrome OS
Edge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 完全対応 50Chrome Android 完全対応 38Firefox Android 未対応 なしOpera Android 完全対応 45Safari iOS 未対応 なしSamsung Internet Android 完全対応 3.0
Available in workers
実験的
Chrome 完全対応 61Edge 完全対応 79Firefox 未対応 なしIE 未対応 なしOpera 完全対応 48Safari 未対応 なしWebView Android 完全対応 50Chrome Android 完全対応 38Firefox Android 完全対応 53Opera Android 完全対応 45Safari iOS 未対応 なしSamsung Internet Android 完全対応 3.0

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
connection
実験的
Chrome 完全対応 61Edge 完全対応 ≤79Firefox 完全対応 あり
無効
完全対応 あり
無効
無効 This feature is behind the dom.netinfo.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 ありSafari 未対応 なしWebView Android 完全対応 50Chrome Android 完全対応 38Firefox Android 完全対応 14
補足
完全対応 14
補足
補足 The Network API is enabled by default. Can be disabled using the dom.netinfo.enabled preference.
Opera Android 完全対応 37Safari iOS 未対応 なしSamsung Internet Android 完全対応 3.0

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報