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

Milica Mihajlija

웹사이트에 따라 웹사이트를 로드하는 것은 네트워크에 따라 매우 다를 수 있습니다. 조건일 수 있습니다 빠른 네트워크를 사용하면 일반적으로 모든 것이 원활하지만 제한된 데이터 요금제로 이동 중이거나 연결이 불안정하거나 컴퓨터를 사용하는 경우와는 다른 이야기가 될 것입니다.

이 문제를 처리하는 한 가지 방법은 사용자에게 게재하는 애셋을 조정하는 것입니다. 연결 품질에 따라 달라집니다. 이제 네트워크 정보 API 이 API를 사용하면 웹 애플리케이션이 사용자의 네트워크에 관한 정보에 액세스할 수 있습니다.

사용

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

• 사용자 네트워크를 설정할 수 있습니다.
• 리소스를 미리 로드할지 결정합니다.
• 인터넷 연결이 느릴 때 업로드 및 다운로드를 지연시킵니다.
• 네트워크 품질이 앱을 로드할 만큼 좋지 않은 경우 오프라인 모드를 사용 설정합니다. 이러한 기능을 사용할 수 있습니다.
• 모바일 데이터 연결을 통해 동영상 시청과 같은 작업을 하면 비용이 발생할 수 있음을 사용자에게 경고 있습니다.
• 이를 분석에 사용해 네트워크 품질을 개선하는 데 도움이 됩니다.

이미 많은 애플리케이션이 이와 유사한 작업을 수행하고 있습니다. 예를 들어 YouTube, Netflix 및 대부분의 다른 동영상 (또는 영상 통화) 서비스에서 자동으로 조정됩니다. 해상도를 낮춥니다. Gmail이 로드될 때 사용자에게 '기본 HTML 로드 (연결 속도가 낮은 경우)' 링크를 클릭하세요.

작동 방식

navigator.connection 객체에는 클라이언트의 연결 속성은 아래 표에 설명되어 있습니다.

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

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

onchange 이벤트 리스너를 사용하면 네트워크 품질. 네트워크 연결 상태가 좋지 않아 업로드 또는 다운로드를 지연한 경우 요청이 있을 때 이벤트 리스너를 사용해 전송을 다시 시작할 수 있습니다. 더 나은 네트워크 상태를 감지합니다. 또한 영향을 줄 수 있습니다. 예를 들어 사용자가 Wi-Fi 신호가 끊겨 셀룰러 네트워크에 떨어뜨려서 실수로 데이터를 전송하는 일을 방지할 수 있습니다. 요금 💸).

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

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

결론

Network Information API의 잠재적 이점은 특히 많은 대역폭을 필요로 하는 느린 네트워크와 애플리케이션 사용자에게 적합합니다. 최고 점진적 개선 기법으로 사용할 수 있습니다.