네트워크 정보 API로 네트워크 상태 확인하기

https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62에서 Amazon에서 내 책을 확인하십시오.

지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.

전화 및 태블릿과 같은 모바일 장치의 출현으로 연결 상태를 아는 것은 언제든지 변경될 수 있고 프로세스에서 사용자 경험에 영향을 미칠 수 있기 때문에 매우 중요합니다. 우리는 또한 속도가 매우 다양하기 때문에 다양한 종류의 인터넷 연결에 대해 알고 있어야 합니다.

다행히 인터넷 연결 상태를 확인하기 위해 브라우저에 네트워크 정보 API가 내장되어 있습니다.

이 API는 브라우저 및 작업자 컨텍스트에 사용할 수 있습니다.

이 기사에서는 API를 사용하여 네트워크 연결 유형 변경 및 연결 상태를 가져오는 방법을 살펴보겠습니다.

연결 변경 감지

연결 변경을 감지하는 것은 간단합니다. navigation.connection 개체를 사용하여 다음과 같이 네트워크 유형 변경을 수신할 수 있습니다.

const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
let type = connection.effectiveType;

const updateConnectionStatus = () => {
  console.log(`Connection type changed from ${type} to ${connection.effectiveType}`);
  type = connection.effectiveType;
}

connection.addEventListener('change', updateConnectionStatus);

그런 다음 F12를 눌러 Chrome 개발자 콘솔로 이동하여 연결 유형 변경 사항을 테스트할 수 있습니다. 그런 다음 네트워크 탭으로 이동한 다음 오른쪽 상단에 연결 유형을 변경할 수 있는 드롭다운이 있습니다.

그들 사이를 전환하면 다음과 같이 표시되어야 합니다.

Connection type changed from 4g to 3g
Connection type changed from 3g to 4g
Connection type changed from 4g to 2g

console.log 출력에서.
connection 개체는 NetworkInformation 개체 인스턴스이며 다음 속성을 가집니다.

downlink   -  가장 가까운 25kbps로 반올림된 초당 메가비트의 유효 대역폭 추정.

downlinkMax   -  기본 연결 기술에 대한 최대 다운링크 속도(Mbps)

effectiveType  — 최근에 관찰된 왕복 시간과 다운링크 값의 조합에 의해 결정되는 연결 유형. 'slow-2g', '2g', '3g', '4g' 중 하나일 수 있습니다.

rtt  — 현재 연결의 예상 유효 왕복 시간은 25밀리초의 가장 가까운 배수로 반올림됩니다.

saveData   -   데이터 사용량 감소 옵션이 설정되었는지 여부를 나타내는 부울

type  —  네트워크와 통신하기 위한 연결 유형입니다. bluetooth , cellular , ethernet , none , wifi , wimax , other , unknown 중 하나일 수 있습니다.

호환성

이 API는 새롭고 실험적이므로 사용할 때 주의해야 합니다. Chrome은 Chrome 61 이후 기본적으로 대부분의 속성을 지원합니다. downlinkMax 및 type와 같은 일부 옵션은 Chrome OS에서만 사용할 수 있습니다. Firefox 및 Edge는 이 API를 지원하지 않습니다.

Opera, Android Webview 및 Android용 Chrome과 같은 다른 Chromium 기반 브라우저에서도 사용할 수 있습니다.

네트워크 정보 API를 사용하여 네트워크 연결에 대한 정보를 얻을 수 있습니다. 이것은 모바일 장치의 연결 유형을 감지하는 데 유용하며 그에 따라 느린 연결을 수용하도록 웹 페이지를 변경할 수 있습니다.