네트워크 품질에 따른 적응형 게재

웹사이트를 로드하는 환경은 네트워크 상태에 따라 매우 다를 수 있습니다. 빠른 네트워크를 사용하는 경우 일반적으로 모든 것이 원활하게 작동하지만, 제한된 데이터 요금제와 불안정한 연결을 사용해 이동 중이거나 느린 커피숍 Wi-Fi에서 노트북을 사용하고 있다면 얘기가 달라집니다.

이 문제를 해결하는 한 가지 방법은 사용자의 연결 품질에 따라 사용자에게 게재하는 확장 소재를 조정하는 것입니다. 이제 웹 애플리케이션이 사용자의 네트워크에 관한 정보에 액세스할 수 있는 Network Information API를 사용하여 이 작업을 할 수 있습니다.

브라우저 지원

  • Chrome: 61.
  • Edge: 79
  • Firefox: 지원되지 않음
  • Safari: 지원되지 않음

소스

이 네트워크 정보를 사용하여 사용자 환경을 개선하는 방법에는 여러 가지가 있습니다.

  • 사용자의 네트워크에 따라 고화질 콘텐츠와 저화질 콘텐츠를 전환합니다.
  • 리소스를 미리 로드할지 여부를 결정합니다.
  • 사용자가 느린 연결을 사용하는 경우 업로드 및 다운로드를 지연합니다.
  • 네트워크 품질이 앱을 로드하고 기능을 사용하기에 충분하지 않은 경우 오프라인 모드를 사용 설정합니다.
  • 사용자에게 모바일 데이터를 사용해 작업(예: 동영상 시청)을 하면 비용이 청구될 수 있다고 경고합니다.
  • 분석에서 이를 사용하여 사용자의 네트워크 품질에 관한 데이터를 수집하세요.

이미 많은 애플리케이션에서 비슷한 작업을 하고 있습니다. 예를 들어 YouTube, Netflix, 기타 대부분의 동영상(또는 영상 통화) 서비스는 스트리밍 중에 해상도를 자동으로 조정합니다. Gmail이 로드되면 사용자에게 '기본 HTML 로드 (연결 속도가 느린 경우)' 링크가 제공됩니다.

인터넷 연결이 느릴 때 기본 HTML 버전의 Gmail을 로드할 수 있는 링크

작동 방식

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의 잠재적 이점은 특히 느린 네트워크를 사용하는 사용자와 대역폭이 많이 필요한 애플리케이션에 큰 도움이 됩니다. 무엇보다도 점진적 개선 기법으로 사용할 수 있습니다.