プログレッシブウェブアプリ内で現在のネットワーク速度を読み取る方法

PWA用のネットワーク情報API

単純なオンライン/オフラインブール値だけでなく、現在のネットワーク状態に関するより詳細な情報を必要とするプログレッシブWebアプリを開発したことがある場合は、「ネットワーク情報API」と呼ばれる新しいAPIが利用可能になりました。

基本的にすべての新しい最新のブラウザ機能と同様に、わずか数行のコードでWebアプリケーションを段階的に拡張して、現在の接続速度を知ることができます。

ナビゲーターの新しいプロパティ

navigator-objectは、「connection」と呼ばれる新しいプロパティで拡張されました。これにより、ネットワーク状態の1回限りの読み取りと、ネットワークタイプの変更に対応するサブスクリプションの両方が可能になります。執筆時点では、ChromeのみがAPIを完全にサポートしていることに注意してください。 SafariとFirefoxはそれをまったくサポートしていません。 EdgeやOperaなどの他のChromiumベースのブラウザは、最も重要な指標を含め、ほぼ完全にサポートされています。

Webアプリケーションの実際のネットワークデータ

次のコードは、この新しいネットワーク情報APIを使用する方法の完全な例を示しています。実際のデモンストレーションについては、このPWAのページの一番下までスクロールしてください。ブラウザがAPIをサポートしている場合は、信号アイコンと、現在のネットワーク速度の分類を示すラベルが表示されます。この機能がブラウザでサポートされていない場合は、適切なラベルも表示されます。

もちろん、ブラウザのDevToolsを開き、[ネットワーク]タブを介してネットワークスロットルをシミュレートすることで、この機能を試すことができます。

//
// Description:
//
// This is the exact React-hook I'm
// using on flaming.codes to classify
// the current network state.
//
// Note that the 'Network Information API'
// doesn't provide a flag for offline
// scenarios, therefore I added one to
// the network state object.
//
// This hook also only uses a subset of all
// (possible) available information, please
// see the MDN-docs for more information:
// 👉 https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation
//

/**
 * Read the current network classification
 * provided by the browser via the navigator.
 * 
 * @returns   The network state.
 */
export function useNetworkInformation() {
  const [state, setState] = useState<{
    isEnabled?: boolean;
    type?: string;
    // Directly taken from
    // 👉 https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation/effectiveType
    effectiveType?: "slow-2g" | "2g" | "3g" | "4g" | "offline";
  }>({});

  useEffect(() => {
    const connection =
      // @ts-ignore
      navigator?.connection || navigator?.mozConnection || navigator?.webkitConnection;

    if (connection) {
      setState({
        isEnabled: true,
        type: connection.type,
        effectiveType: connection.effectiveType,
      });
    }

    function updateConnectionStatus() {
      setState({
        isEnabled: true,
        type: connection.type,
        effectiveType: navigator?.onLine ? connection.effectiveType : "offline",
      });
    }

    connection?.addEventListener("change", updateConnectionStatus);
    return () => {
      connection?.removeEventListener("change", updateConnectionStatus);
    };

    // Only run on mount explicitly.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return state;
}