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

Milica Mihajlija

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

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

사용

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

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

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

작동 방식

navigator.connection 객체에는 클라이언트의 연결에 관한 정보가 포함됩니다. 속성은 아래 표에 설명되어 있습니다.

브라우저 콘솔에서 실행하면 다음과 같이 표시됩니다.

effectiveType 값은 클라이언트 힌트를 통해서도 사용할 수 있으며 이를 통해 브라우저의 연결 유형을 서버에 전달할 수 있습니다.

onchange 이벤트 리스너를 사용하면 네트워크 품질의 변화에 동적으로 적응할 수 있습니다. 네트워크 상태가 좋지 않아 업로드 또는 다운로드를 지연한 경우 이벤트 리스너가 더 나은 네트워크 상태를 감지하면 전송을 다시 시작하도록 할 수 있습니다. 네트워크 품질이 변경될 때 사용자에게 알리는 데도 사용할 수 있습니다. 예를 들어 Wi-Fi 신호가 끊어지고 셀룰러 네트워크에 끊긴 경우 실수로 데이터를 전송 (및 💸)하는 일을 방지할 수 있습니다.

다른 이벤트 리스너와 마찬가지로 onchange 이벤트 리스너를 사용합니다.

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

결론

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