웹 애플리케이션에서 네트워크 정보 API를 구현하려면 어떻게해야합니까? 예, 네트워크 정보 API를 사용하여 사용자의 장치가 오프라인 상태인지 감지 할 수 있습니다. Navigator.online 속성은 사용자의 장치가 온라인 또는 오프라인인지를 나타내는 부울 값을 반환합니다. 네트워크 정보 API를 서비스 작업자와 함께 사용할 수 있습니까?
반응 형 웹 디자인은 웹에 혁명을 일으켰습니다. 단일 사이트는 다양한 장치와 화면에서 볼 때 레이아웃을 조정할 수 있습니다. 스크린 크기를 감지하고 대체 스타일 또는 스타일 시트를로드하는 데 필요한 몇 가지 미디어 쿼리 만 있으면됩니다.
그러나 화면 크기를 사용하여 브라우저 기능을 감지하는 것은 라디오를 보면 자동차 속도를 판단하는 것과 유사합니다. 최신 스마트 폰과 태블릿은 점점 더 큰 해상도를 가지고 있으며 전형적인 데스크탑보기를 행복하게 보여줄 것입니다. 이보기가 수많은 글꼴, 이미지 또는 기타 자산을 추가하면 모바일 사용자는 느리거나 미터 연결에 있기 때문에 저하 된 - 및 비싸고
네트워크 정보 API 객체는 Navigator.connection에 의해 반환됩니다. 브라우저 크로스 브라우저 호환성을 보장하려면 다음이 필요합니다.
IE는 일반적으로 정제되지 않은 API를 구현하지만 해당 목록에 navigator.msconnection을 추가 할 수 있습니다.
우리의 연결
객체는 두 가지 읽기 전용 속성을 제공합니다.
대역폭 - MB/s (초당 메가 바이트)에서 현재 대역폭의 추정을 나타내는 이중. 사용자가 오프라인 상태 인 경우 값이 0이고 결정할 수없는 경우 무한대입니다. 참고 대부분의 네트워크 제공 업체는 초당 메가 비트로 값을 인용하며 일반적인 바쁜 모바일 3G 연결은 약 400Mbps ~ = 400,000 비트/S ~ = 50KB/S ~ = 0.05MB/s. <span>var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;</span>
예를 들어:
<span>var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;</span>
<span>if (connection && !connection.metered && connection.bandwidth > 2) {
</span><span>// load high-resolution image
</span><span>var img = document.getElementById("kitten");
</span>
img<span>.src = "/images/kitten_hd.jpg";
</span><span>}</span>
작성 당시 네트워크 정보 API에는 브라우저 지원이 거의 없으며 변경 될 수 있습니다. 즉, 모바일 장치에서 작동 해야하는 웹 사이트 나 응용 프로그램을 작성하는 경우 이제 약간의 계획을 통해 페이지가 1.7MB에 도달하지 못하게 할 수 있습니다. API가 변경되면 대역폭 체인지 기능을 업데이트하면 사이트가 적절하게 반응합니다.
네트워크 정보 API를 고려할 가치가 있다고 생각합니다. 당신은?
네트워크 정보 API를 사용하여 반응 형 웹 사이트를 개선 할 수 있습니까?
네트워크 정보 API는 응답 형 웹 사이트에서 사용자 경험을 향상시키는 데 사용될 수 있습니다. 사용자의 네트워크 조건을 감지하면 웹 사이트의 동작을 적절하게 조정할 수 있습니다. 예를 들어, 사용자의 네트워크가 느리면 해상도 이미지 이하 이하면 비디오 컨텐츠가 적은 것과 같이 보내는 데이터 양을 줄일 수 있습니다. 이는 웹 사이트의 로딩 속도와 전반적인 성능을 크게 향상시킬 수 있습니다. 네트워크 정보 API가 모든 브라우저에서 지원합니까?
네트워크 정보 API가 모든 브라우저에서 지원되는 것은 아닙니다. 현재 Chrome, Opera 및 Android 브라우저에서 지원됩니다. 새로운 API를 구현하기 전에 "내가 사용할 수 있는가"와 같은 웹 사이트에서 최신 브라우저 호환성 정보를 확인하는 것이 항상 좋은 생각입니다. 네트워크 정보 구현 API는 JavaScript를 사용하여 네트워크 정보 API의 속성 및 메소드에 액세스하는 것이 포함됩니다. navigator.connection 또는 navigator.mozconnection 속성을 사용하여 사용자의 연결을 나타내는 네트워크 인식 개체를 가져온 다음이 객체의 속성 및 이벤트 처리기를 사용하여 연결에 대한 정보를 얻고 연결 변경에 반응 할 수 있습니다.
네트워크 정보 API의 데이터 추정치이며 완전히 정확하지 않을 수 있습니다. 최근에 관찰 된 네트워크 조건을 기반으로하며 실제 현재 네트워크 조건을 반영하지 않을 수 있습니다. 따라서 네트워크 조건의 결정적인 척도가 아닌 가이드로 사용해야합니다.
네트워크 정보 API는 사용자의 네트워크 연결에 대한 정보를 제공하는 몇 가지 속성을 제공합니다. 여기에는 다운 링크, 이펙트 티브 타입 및 RTT가 포함됩니다. 초당 메가 비트의 대역폭, 유효 연결 유형 및 라운드 트립 시간이 각각 밀리 초의 왕복 시간을 제공합니다. 네트워크 정보 API가 사용될 수 있습니까? 오프라인 상태 감지? 예, 네트워크 정보 API를 사용할 수 있습니다. 서비스 근로자와 함께. 이를 통해 사용자가 느린 네트워크에있을 때 더 적극적으로 캐싱하는 것과 같은 사용자의 네트워크 조건에 따라 서비스 작업자의 동작을 조정할 수 있습니다.
네트워크 정보 API 사용의 개인 정보 영향은 무엇입니까? 네트워크 정보 API는 네트워크 조건에 따라 사용자 지문에 잠재적으로 사용될 수 있습니다. 그러나 API는 네트워크에 대한 거친 정보 만 제공 하며이 정보는 기본 애플리케이션에도 사용할 수 있으므로 추가 개인 정보 보호 위험이 최소화됩니다.
네트워크 정보 API는 사용자 경험을 향상시키기 위해 다양한 방법으로 사용할 수 있습니다. 예를 들어, 비디오 스트리밍 사이트는이를 사용하여 사용자의 네트워크 속도에 따라 적절한 비디오 품질을 자동으로 선택할 수 있습니다. 뉴스 사이트는이 사이트를 사용하여 고해상도 이미지를로드할지 여부를 결정할 수 있습니다. 웹 앱은이를 사용하여 느린 네트워크에있을 때 사용자에게 경고 할 수 있으며 일부 기능은 최적으로 작동하지 않을 수 있습니다.
위 내용은 네트워크 정보 API를 사용하여 반응 형 웹 사이트를 개선하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
