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

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

ブラウザ実装状況

NetworkInformation

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

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
connection
実験的
Chrome 完全対応 61Edge ? Firefox ? IE 未対応 なしOpera 完全対応 ありSafari 未対応 なしWebView Android 完全対応 50Chrome Android 完全対応 38Edge Mobile ? Firefox 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 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。

あわせて参照

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

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