웹사이트 로드는 네트워크 상태에 따라 매우 다를 수 있습니다. 빠른 네트워크를 사용하면 일반적으로 모든 것이 원활하지만 이동 중에 데이터 요금제 제한이 있고 연결이 불안정하거나 느린 커피숍 Wi-Fi에 연결된 노트북에서 멈춘 경우에는 상황이 달라집니다.
이 문제를 처리하는 한 가지 방법은 연결 품질에 따라 사용자에게 제공할 애셋을 조정하는 것입니다. 이제 웹 애플리케이션이 사용자의 네트워크 정보에 액세스할 수 있도록 하는 Network Information API를 사용하면 가능합니다.
사용
이 네트워크 정보를 사용하여 사용자 환경을 개선할 수 있는 방법은 다양합니다.
- 사용자의 네트워크를 기반으로 고화질 또는 저해상도 콘텐츠 제공 간에 전환합니다.
- 리소스를 미리 로드할지 결정합니다.
- 사용자의 인터넷 연결이 느릴 때 업로드 및 다운로드를 연기합니다.
- 네트워크 품질이 앱을 로드하고 기능을 사용하기에 좋지 않은 경우 오프라인 모드를 사용 설정합니다.
- 모바일 데이터를 통해 동영상 시청 등의 작업을 하면 비용이 발생할 수 있음을 사용자에게 경고합니다.
- 이 측정항목을 분석에 사용하여 사용자의 네트워크 품질에 대한 데이터를 수집합니다.
많은 애플리케이션이 이미 비슷한 작업을 수행하고 있습니다. 예를 들어 YouTube, Netflix 및 대부분의 다른 동영상 (또는 영상 통화) 서비스는 스트리밍 중에 자동으로 해상도를 조정합니다. Gmail이 로드될 때 사용자에게 '기본 HTML 로드 (연결 속도가 느린 경우)' 링크가 표시됩니다.
사용 방법
navigator.connection 객체에는 클라이언트의 연결에 대한 정보가 포함되어 있습니다. 속성은 아래 표에 설명되어 있습니다.
| 속성 | 설명 |
|---|---|
downlink |
대역폭 추정치(초당 메가비트)입니다. |
effectiveType |
유효한 연결 유형으로, 가능한 값이 'slow-2g', '2g', '3g' 또는 '4g'입니다 (4g 이상 적용). 왕복 시간과 다운링크 속도의 조합에 따라 결정됩니다. 예를 들어 높은 지연 시간과 결합된 빠른 다운링크는 지연 시간으로 인해EffectiveType이 더 낮습니다. |
onchange |
연결 정보가 변경될 때 실행되는 이벤트 핸들러입니다. |
rtt |
연결의 예상 왕복 지연 시간(밀리초)입니다. |
saveData |
사용자가 데이터 사용량 절감 모드를 요청했는지 여부를 정의하는 불리언입니다. |
브라우저의 콘솔에서 실행하면 다음과 같이 표시됩니다.
effectiveType 값은 클라이언트 힌트를 통해서도 사용할 수 있으며 이 값을 사용하여 브라우저의 연결 유형을 서버에 전달할 수 있습니다.
onchange 이벤트 리스너를 사용하면 네트워크 품질 변화에 동적으로 적응할 수 있습니다. 네트워크 상태가 좋지 않아 업로드 또는 다운로드를 연기한 경우 더 나은 네트워크 상태가 감지되면 이벤트 리스너를 사용하여 전송을 다시 시작할 수 있습니다. 네트워크 품질이 변경될 때 사용자에게 알릴 수도 있습니다. 예를 들어 Wi-Fi 신호가 끊겨서 셀룰러 네트워크에 연결되면 실수로 데이터가 전송되거나 요금이 청구되는 일을 방지할 수 있습니다. 💸
다른 이벤트 리스너와 마찬가지로 onchange 이벤트 리스너를 사용합니다.
navigator.connection.addEventListener('change', doSomethingOnChange);
결론
Network Information API의 잠재적 이점은 많은 대역폭이 필요한 느린 네트워크 및 애플리케이션을 사용하는 사용자에게 특히 유용합니다. 무엇보다도 점진적 개선 기법으로 사용할 수 있습니다.