ウェブサイトの読み込みエクスペリエンスは、ネットワークによって大きく異なる場合があります できます。高速ネットワークを使用すると通常は すべてがスムーズになりますが 外出先でデータプランが限られ接続が不安定な場合や、 ノートパソコンとコーヒーショップの Wi-Fi に接続している場合は、話は異なります。
これに対処する一つの方法は、ユーザーに提供するアセットを調整することです。 接続の質に応じて判断されますこれは、 Network Information API これにより、ウェブ アプリケーションがユーザーのネットワークに関する情報にアクセスできるようになります。
用途
このネットワーク情報をさまざまな方法で使用してユーザーを改善し、 体験できます。
- コンテンツの配信状況に基づいて、高解像度と低画質のコンテンツを切り替える アクセスします。
- リソースをプリロードするかどうかを決定します。
- ユーザーの接続速度が遅い場合、アップロードとダウンロードを延期する。
- ネットワーク品質がアプリの読み込みに十分でない場合は、オフライン モードを有効にします 説明します。
- モバイル接続での何か（動画の視聴など）を行うと費用がかかることをユーザーに警告する 考えています
- 分析で使用して、ユーザーのライフタイムに関するデータを収集し、通信品質が向上します。
多くのアプリケーションで、すでに似たようなことが行われています。たとえば YouTube、 Netflix などのほとんどのビデオ通話（またはビデオ通話）サービスでは、 ストリーミング中の解像度を調整できます。Gmail の読み込み中に、ユーザーは 「簡易 HTML を読み込む（接続速度が遅い場合）」へのリンク。
仕組み
navigator.connection オブジェクトには、クライアントの IP アドレス範囲に関する情報が
接続しますプロパティについては、以下の表で説明します。
| プロパティ | 説明 |
|---|---|
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 の潜在的な利点は、特に 通信量の多いネットワークや 多数の帯域幅を必要とするアプリケーションでベスト 段階的なエンハンスメント手法として使用できます