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