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

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

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

対応ブラウザ

  • Chrome: 61。
  • Edge: 79.
  • Firefox: サポートされていません。
  • Safari: サポートされていません。

ソース

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

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

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

ユーザーの接続速度が遅い場合に Gmail の簡易 HTML 形式を読み込むためのリンク

仕組み

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

プロパティ 説明
downlink 帯域幅の見積もり(メガビット/秒)。
effectiveType 接続の有効なタイプ。有効な値は 'slow-2g''2g''3g''4g' です(4G 以上をカバー)。往復時間とダウンリンク速度の組み合わせに基づいて決定されます。たとえば、高速ダウンリンクと高いレイテンシを組み合わせると、レイテンシが原因で effectiveType が低下します。
onchange 接続情報が変更されたときに呼び出されるイベント ハンドラ。
rtt 接続の推定ラウンドトリップ レイテンシ(ミリ秒単位)。
saveData ユーザーがデータ使用量の削減モードをリクエストしたかどうかを定義するブール値。

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

navigator.connection オブジェクトのプロパティの値が表示されている Chrome DevTools コンソール

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

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

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

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

まとめ

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