HTML5: 웹 정보 API 탐색

소개

웹 디자인 분야에서 가장 많이 논의되는 개념 중 하나는 반응형 웹 디자인입니다. 반응형 웹 디자인에 관해 수천 개의 기사가 작성되었으므로 이 기사에서는 이에 대해 논의하지 않겠습니다. 그러나 반응형 웹 디자인에는 중요한 제한 사항이 있습니다. 반응형 웹 디자인은 대부분 브라우저 뷰포트의 크기를 기반으로 합니다.

이 방법은 올바른 크기와 해상도의 이미지를 전달하는 데 적합하지만 비디오 콘텐츠 등 모든 상황에 적합하지는 않습니다. 이러한 경우 실제로 필요한 것은 장치의 네트워크 연결에 대한 추가 정보입니다.

스마트폰이나 태블릿에서 YouTube에 접속하고 있다고 가정해 보세요. 집에 있고 Wi-Fi를 통해 연결되어 있습니다. 이 경우 다운로드되는 바이트 수에는 관심이 없으며 고품질 비디오 콘텐츠에만 관심이 있습니다. 느린 모바일 연결을 통해 연결하는 경우에는 그렇지 않습니다. 이 경우 비디오를 보고 싶다면 품질이 중요합니다.

자신의 웹사이트가 정말 훌륭해지기를 원하는 모든 개발자는 페이지가 가능한 한 빨리 로드될 수 있도록 제공되는 리소스를 최적화해야 한다는 점을 분명히 해야 합니다. 그러나 위의 예에서 고해상도 비디오를 제공하면 사용자의 대역폭이 낭비되지 않고 사용자 경험이 향상됩니다.

네트워크 정보 API는 장치의 네트워크 연결에 대해 더 자세히 알아야 하는 곳입니다.

1.무엇인가요?

네트워크 정보 API는 시스템이 네트워크, 셀룰러 네트워크, Wi-Fi, Bluetooth 등과 통신하는 데 사용하는 연결 유형에 대한 액세스를 제공합니다. 또한 연결 유형이 변경되면 스크립트에 알리는 방법도 제공합니다. 이는 개발자가 DOM을 동적으로 변경하거나 네트워크 연결 유형이 변경되었음을 사용자에게 알릴 수 있도록 하기 위한 것입니다.

네트워크 정보 API 사양은 2011년에 처음 발표되었지만 그 이후로 API가 여러 번 변경되었습니다. 증거로 현재 버전은 단지 편집 초안일 뿐이며 이는 향후 변경 사항이 발생할 수 있음을 의미합니다.

이러한 변경에도 불구하고 이 API의 사용 사례는 매우 흥미롭고 살펴볼 가치가 있습니다. 이 문서에서는 사양의 최신 버전에 대해 논의하지만 나중에 설명할 이유로 더 이상 사용되지 않는 일부 속성과 이벤트도 살펴보겠습니다.

2.구현

현재 버전의 네트워크 정보 API는 다음 값 중 하나를 가질 수 있는 window.navigator 对象的 connection 对象。 connection 对象包含一个属性，type，该属性返回用户代理的连接类型。 type에 속하는 속성을 노출합니다.

• 蓝牙

• cellular
• 以太网
• none
• wifi
• 其他
• 未知

bluetooth 및 bluetooth 和 wifi，而其他值则需要更多解释。 cellular 类型是指移动连接，例如 EDGE、3G、4G 等。 other 类型表示当前连接类型不是 unknown，但它也不是任何其他类型。 unknown와 같이 이러한 값 중 일부는 설명이 필요하지만 다른 값은 추가 설명이 필요합니다.

유형은 EDGE, 3G, 4G 등 모바일 연결을 나타냅니다. other 유형은 현재 연결 유형이 알 수 없음은 아니지만 다른 유형도 아님을 나타냅니다. unknown 유형은 사용자 에이전트가 네트워크 연결을 설정했지만 어떤 연결 유형인지 확인할 수 없음을 나타냅니다.

type 之外，网络信息 API 还公开 ontypechange

이벤트는 제외됩니다. 네트워크 연결 유형이 변경될 때마다 트리거됩니다.

html 元素，例如 high-bandwidth개발자는 네트워크 정보 API를 사용하여 현재 연결 유형에 따라 특정 기능을 변경할 수 있습니다. 예를 들어, 장치가 모바일 연결을 사용하고 있음을 감지하면 대역폭을 많이 사용하는 프로세스 속도를 늦출 수 있습니다. 또한 API를 사용하면 Modernizr과 동일한 방식으로 특정 클래스를

에 할당할 수 있습니다. CSS를 사용하여 배경 이미지와 같은 요소의 하나 이상의 속성을 변경할 수 있습니다.

이제 네트워크 정보 API의 기능과 이점을 알았으니 어떤 브라우저가 API를 지원하는지 살펴보겠습니다.

3.

브라우저 지원

이 글을 쓰는 시점에서 네트워크 정보 API는 공급업체 접두사를 사용하는 Firefox 및 Chrome Canary에서만 지원됩니다. Chrome Canary에서 API를 사용하려면 실험적 웹 플랫폼 기능

플래그를 활성화해야 합니다. Paul Irish가 작성한 이 기사에서 자세한 내용을 확인할 수 있습니다.

Network Information API에 대한 지원이 충분히 나쁘지 않은 것처럼 Firefox의 최신 버전인 버전 30은 이전 API 사양을 지원합니다. 따라서 지금 Network Information API를 사용하려면 이전 API 사양에서 노출된 속성 및 이벤트를 검토해야 합니다. 🎜

이전 사양에서는 두 가지 속성을 노출했습니다. bandwidth 和 metered。 bandwidth 属性是一个双精度值，表示当前带宽的估计值（以兆字节每秒 (MB/s) 为单位）。 metered 属性是一个布尔值，指定设备的网络连接是否受到任何限制。之前的规范还定义了 onchange 위 속성의 변경 사항을 모든 청취자에게 알리는 이벤트.

사양의 새 버전과 이전 버전에 대한 아이디어를 제공하기 위해 다음 섹션에서는 두 버전을 모두 사용하여 데모를 구축하겠습니다.

4. 데모

지금까지 API에서 노출하는 속성과 이벤트, API의 사용 사례를 소개했습니다. 이 섹션에서는 API가 실제로 작동하는 모습을 볼 수 있는 간단한 웹 페이지를 만들어 보겠습니다.

데모는 세 가지 목록 항목의 순서가 지정되지 않은 목록을 포함하는 HTML5 페이지로 구성됩니다. 각 프로젝트에는 네트워크 메시징 API의 이전 사양과 새 사양에 의해 노출된 속성 값의 유효성을 검사하는 텍스트 조각이 포함되어 있습니다. 목록 항목은 기본적으로 숨겨져 있으며 해당 속성이 지원되는 경우에만 표시됩니다.

데모에서는 브라우저가 이전 API 사양(Firefox용)을 구현하는지 여부와 브라우저가 네트워크 정보 API를 지원하는지 여부도 감지합니다. 첫 번째 경우에는 이전 API 버전 지원 메시지가 표시되고, 두 번째 경우에는 API 지원되지 않음 메시지가 표시됩니다.

Network Information API에서 지원하는 테스트는 아래와 같이 매우 간단합니다.

으아아아

구현된 버전이 이전 사양인지 확인하기 위해 다음과 같이 metered 속성이 있는지 테스트할 수 있습니다.

으아아아

네트워크 정보 API에 대한 지원을 테스트하고 브라우저에서 지원하는 사양 버전을 식별한 후에는 올바른 이벤트에 핸들러를 연결할 수 있습니다. 핸들러 내에서 새 API 사양에 대해 type와 같은 해당 목록 항목의 텍스트를 업데이트합니다.

아래에서 데모의 전체 코드를 찾을 수 있으며 원할 경우 사용할 수 있습니다.

으아아아

결론

이 글에서는 Network Information API에 대해 소개했습니다. 이 기사의 첫 번째 부분에서는 API가 무엇인지, 그리고 API가 우리에게 무엇을 할 수 있는지에 대해 논의했습니다. 또한 Network Information API가 노출하는 속성과 이벤트도 배웠습니다. 브라우저 지원에서 언급했듯이 API 사양의 일부 변경으로 인해 API는 현재 제대로 지원되지 않습니다.

네트워크 정보 API는 사용이 매우 간단하며, 더 많은 브라우저에서 이를 지원하면 제공되는 정보를 활용하지 않을 이유가 없습니다. 이 API에 대해 어떻게 생각하시나요? 더 많은 브라우저가 지원하면 사용하시겠습니까?

위 내용은 HTML5: 웹 정보 API 탐색의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!