ネットワーク品質に基づくアダプティブ サービング

Milica Mihajlija

ウェブサイトの読み込みエクスペリエンスは、ネットワークによって大きく異なる場合があります あります。高速ネットワークを使用すると通常は すべてがスムーズになりますが 外出先でデータプランが限られ接続が不安定な場合や、 ノートパソコンとコーヒーショップの Wi-Fi に接続している場合は、話は異なります。

これに対処する一つの方法は、ユーザーに提供するアセットを調整することです。 接続の質に応じて判断されますこれは、 Network Information API これにより、ウェブ アプリケーションがユーザーのネットワークに関する情報にアクセスできるようになります。

用途

このネットワーク情報をさまざまな方法で使用してユーザーを改善し、 体験できます。

• コンテンツの配信状況に基づいて、高解像度と低画質のコンテンツを切り替える アクセスします。
• リソースをプリロードするかどうかを決定します。
• ユーザーの接続速度が遅い場合、アップロードとダウンロードを延期する。
• ネットワーク品質がアプリの読み込みに十分でない場合は、オフライン モードを有効にします 説明します。
• モバイル接続での何か（動画の視聴など）を行うと費用がかかることをユーザーに警告する 考えています
• 分析で使用して、ユーザーのライフタイムに関するデータを収集し、通信品質が向上します。

多くのアプリケーションで、すでに似たようなことが行われています。たとえば YouTube、 Netflix などのほとんどのビデオ通話（またはビデオ通話）サービスでは、 ストリーミング中の解像度を調整できます。Gmail の読み込み中に、ユーザーは 「簡易 HTML を読み込む（接続速度が遅い場合）」へのリンク。

仕組み

navigator.connection オブジェクトには、クライアントの IP アドレス範囲に関する情報が 接続しますプロパティについては、以下の表で説明します。

ブラウザのコンソールで実行すると、次のようになります。

effectiveType の値は、 Client Hints ブラウザの接続タイプをサーバーに伝えることができます。

onchange イベント リスナーを使用すると、イベントの変化に動的に適応できます。 通信品質が向上します。ネットワークが不安定なためにアップロードやダウンロードを遅延した場合 通知を受け取ったら、イベント リスナーを使用して転送を再開できます。 より適切なネットワーク状態を検出します。また、問題が発生したときにユーザーに通知するために、 ネットワーク品質の変化に 対応できますたとえば、Wi-Fi 接続が失われ、 モバイル ネットワークに接続することで、偶発的なデータ転送を防止できます（ お問い合わせをいただきました。

他のイベント リスナーと同様に、onchange イベント リスナーを使用します。

navigator.connection.addEventListener('change', doSomethingOnChange);

まとめ

Network Information API の潜在的な利点は、特に 通信量の多いネットワークや 多数の帯域幅を必要とするアプリケーションでベスト 段階的なエンハンスメント手法として使用できます