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

Milica Mihajlija

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

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

用途

このネットワーク情報を使用してユーザー エクスペリエンスを向上させる方法はいくつかあります。

• ユーザーのネットワークに基づいて、高精細と低精細のコンテンツを切り替えます。
• リソースをプリロードするかどうかを決定します。
• ユーザーの接続速度が遅い場合、アップロードとダウンロードを延期する。
• ネットワークの品質がアプリの読み込みや機能の使用に十分でない場合は、オフライン モードを有効にします。
• モバイル経由でなんらかの操作（動画の視聴など）を行うと費用が発生する可能性があることをユーザーに警告します。
• 分析で使用して、ユーザーのネットワーク品質に関するデータを収集します。

多くのアプリケーションでは、すでに同様の処理が行われています。たとえば、YouTube、Netflix、その他のほとんどの動画（またはビデオ通話）サービスでは、ストリーミング中に解像度が自動的に調整されます。Gmail の読み込み中に、[基本的な HTML を読み込む（接続速度が遅い場合）] へのリンクが表示されます。

仕組み

navigator.connection オブジェクトには、クライアントの接続に関する情報が含まれます。プロパティについては、下の表をご覧ください。

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

effectiveType 値は クライアント ヒントでも使用でき、ブラウザの接続タイプをサーバーに通知できます。

onchange イベント リスナーを使用すると、ネットワーク品質の変化に動的に適応できます。ネットワーク状態が悪いためにアップロードまたはダウンロードを延期した場合は、イベント リスナーを使用して、ネットワーク状態が改善されたときに転送を再開できます。また、ネットワーク品質が変化したときにユーザーに通知することもできます。たとえば、Wi-Fi の電波が途切れてモバイル ネットワークに切り替わった場合、データの誤送信（と請求 💸）を防ぐことができます。

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

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

まとめ

Network Information API の潜在的なメリットは大きく、特にネットワークが遅いユーザーや、帯域幅を大量に必要とするアプリケーションで効果を発揮します。何よりも、プログレッシブ エンハンスメントの手法として使用できます。