ウェブサイトの読み込みは、ネットワークの状態によってまったく異なる場合があります。通常、高速ネットワークに接続しているときはすべてがスムーズですが、外出先でデータプランが限られ接続が不安定な場合や、コーヒーショップの Wi-Fi が低速な Wi-Fi でノートパソコンが固い場合は、状況が変わります。
これに対処する 1 つの方法は、接続の品質に基づいて、ユーザーに提供するアセットを適応させることです。これは、ウェブ アプリケーションがユーザーのネットワークに関する情報にアクセスできるようにする Network Information API によって可能になりました。
用途
このネットワーク情報を使用して、ユーザー エクスペリエンスを向上させる方法は多数あります。
- ユーザーのネットワークに応じて、高精細コンテンツの提供と低精細コンテンツの配信を切り替えます。
- リソースをプリロードするかどうかを決定します。
- ユーザーの接続速度が遅い場合は、アップロードとダウンロードを遅らせる。
- ネットワークの品質がアプリの読み込みと機能の使用に十分でない場合は、オフライン モードを有効にします。
- モバイル通信経由でなんらかの操作（動画の視聴など）を行うと料金が発生する可能性があることをユーザーに警告する。
- 分析で使用して、ユーザーのネットワーク品質に関するデータを収集します。
多くのアプリケーションで、すでに同じようなことが行われています。たとえば、YouTube、Netflix などのほとんどの動画（またはビデオ通話）サービスでは、ストリーミング中に解像度が自動的に調整されます。Gmail の読み込み時には、[簡易 HTML を読み込む（接続速度が遅い場合）] というリンクがユーザーに表示されます。
仕組み
navigator.connection オブジェクトには、クライアントの接続に関する情報が格納されます。そのプロパティについては、以下の表で説明します。
| プロパティ | 解説 |
|---|---|
downlink |
推定帯域幅（Mbps）。 |
effectiveType |
接続の有効なタイプ。有効な値は 'slow-2g'、'2g'、'3g'、または '4g'（4g 以上をカバー）です。ラウンドトリップ時間とダウンリンク速度の組み合わせに基づいて決定されます。たとえば、高速ダウンリンクと高レイテンシの組み合わせは、レイテンシのために EffectiveType が低くなります。 |
onchange |
接続情報が変更されたときに起動するイベント ハンドラ。 |
rtt |
接続の推定ラウンドトリップ レイテンシ（ミリ秒）。 |
saveData |
ユーザーがデータ使用量の節約モードをリクエストしたかどうかを定義するブール値。 |
これをブラウザのコンソールで実行すると、次のように表示されます。
effectiveType 値は Client Hints でも使用でき、これによりブラウザの接続タイプをサーバーに伝えることができます。
onchange イベント リスナーを使用すると、ネットワーク品質の変化に動的に対応できます。ネットワーク状態が悪いためにアップロードまたはダウンロードを延期した場合は、イベント リスナーを利用して、より良好なネットワーク状態を検出したときに転送を再開できます。また、ネットワーク品質が変化したときにユーザーに通知することもできます。たとえば、Wi-Fi 信号が失われ、モバイル ネットワークにドロップされた場合、誤ったデータ転送（および充電 Ж）を防ぐことができます。
onchange イベント リスナーは、他のイベント リスナーを使用する場合と同じように使用します。
navigator.connection.addEventListener('change', doSomethingOnChange);
まとめ
Network Information API の潜在的なメリットは、特に低速なネットワークや多くの帯域幅を必要とするアプリケーションのユーザーにとっては大きなものです。特に、段階的なエンハンスメント手法として使用できます。