프로그레시브 웹 앱 내에서 현재 네트워크 속도를 읽는 방법

PWA용 네트워크 정보 API

단순한 온라인/오프라인 부울 값보다 현재 네트워크 상태에 대한 더 자세한 정보가 필요한 프로그레시브 웹 앱을 개발한 적이 있다면 이제 "네트워크 정보 API"라는 새로운 API를 사용할 수 있습니다.

기본적으로 모든 새로운 최신 브라우저 기능과 마찬가지로 몇 줄의 코드로 웹 응용 프로그램을 점진적으로 향상하여 현재 연결 속도에 대해 알아볼 수 있습니다.

네비게이터를 위한 새로운 속성

navigator-object는 "connection"이라는 새로운 속성으로 향상되었습니다. 이를 통해 네트워크 상태의 일회성 읽기와 구독이 네트워크 유형의 변경 사항에 대응할 수 있습니다. 글을 쓰는 현재로서는 Chrome만 API를 완벽하게 지원합니다. Safari와 Firefox는 전혀 지원하지 않습니다. Edge 또는 Opera와 같은 다른 Chromium 기반 브라우저는 가장 중요한 지표를 포함하여 거의 완전한 지원을 제공합니다.

웹 애플리케이션의 실제 네트워크 데이터

다음 코드는 이 새로운 네트워크 정보 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;
}