ネットワーク情報 API
メモ: この機能はウェブワーカー内で利用可能です。
ネットワーク情報 API はシステムのネットワーク接続に関する情報を、一般的な接続の種類 ('wifi' や 'cellular' など) の観点から提供します。 これは、ユーザーの接続に基づき、高解像度コンテンツや低解像度コンテンツを選択するために使用することができます。
API は単一の NetworkInformation
オブジェクトで構成されます。これは Navigator.connection
または WorkerNavigator.connection
プロパティから返されるインスタンスです。
インターフェイス
NetworkInformation
-
端末がネットワーク通信に使用している接続方法の情報を提供します。また、接続の種類が変更された場合に、スクリプトへ通知する手段も提供します。
NetworkInformation
インターフェイスはインスタンス化できません。代わりに、Navigator
またはWorkerNavigator
インターフェイスを通してアクセスします。
他のインターフェイスの拡張
-
端末のネットワーク接続に関する情報を格納する
NetworkInformation
オブジェクトを返します。 -
端末のネットワーク接続に関する情報を格納する
NetworkInformation
オブジェクトを提供します。
例
接続の変化の検出
以下の例では、ユーザーの接続の変化を監視します。
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
プロパティを用いて接続速度を見積もることができます。
let preloadVideo = true;
const connection = navigator.connection;
if (connection) {
if (connection.effectiveType === "slow-2g") {
preloadVideo = false;
}
}
仕様書
Specification |
---|
Network Information API |
ブラウザーの互換性
api.NetworkInformation
BCD tables only load in the browser
api.Navigator.connection
BCD tables only load in the browser