5 JavaScript API의 모바일 웹 페이지에 권한을 부여합니다

키 포인트

배터리 상태 API : 장치 배터리 레벨 또는 상태 정보를 제공하고 배터리 레벨이 낮을 때 변경 사항을 더 자주 저장하여 데이터 손실을 방지합니다.

웹 알림 API :

개발자가 사용자에게 알리는 방법을 정상화하여 웹 페이지의 컨텍스트 외부에서 알림 (예 : 이메일 배송)을 발행 할 수 있습니다. 그러나 다른 브라우저의 디스플레이 스타일은 다를 수 있습니다.
• 근접 센서 API : 객체와 웹 페이지를 실행하는 장치 사이의 거리를 현재 Firefox에서만 지원하는 객체와 웹 페이지를 실행하는 장치 사이의 거리를 감지합니다. 진동 API :
를 사용하면 장치가 진동 할 수 있으며 게임의 특정 효과를 시뮬레이션하는 데 사용할 수 있습니다. 장치 방향 API 는 내비게이션 응용 프로그램 및 게임에 도움이되는 장치 방향을 감지합니다.
• "모바일 시장 성장"및 "모바일 장치 (스마트 폰 및 태블릿 등)를 통해 네트워크에 액세스하는 사용자는 데스크탑이나 랩톱을 통해 네트워크에 액세스하는 사용자가 더 이상 인상적이지 않습니다. 오늘날 우리는 (적어도) 웹을 위해 무엇이든 개발할 때 모바일 시장이 중요하다는 것을 깨달아야합니다.
수년 동안, 기본 응용 프로그램 및 웹 응용 프로그램에 대한 토론과 의견은 크게 다르며, 어느 것이 더 나은지 논란의 여지가 있습니다. 귀하의 관점에 관계없이, 기본 모바일 애플리케이션은 과거에 웹 페이지가 액세스 할 수없는 하드웨어 구성 요소에 액세스 할 수 있다는 것이 사실입니다. 그러나이 격차가 오늘날에도 여전히 유효합니까? Web Technology는 개발자로서 HTML, CSS 및 JavaScript를 사용하여 인코딩 할 수 있도록 충분히 개발 되었습니까?
• 이 기사에서는 웹 페이지가 모바일 장치의 하드웨어 구성 요소에 액세스하거나 모바일 장치의 웹 애플리케이션 기능을 향상시킬 수있는 JavaScript API를 소개합니다. 배터리 상태 api
배터리 상태 API는 시스템의 배터리 레벨 또는 상태에 대한 정보를 제공합니다. 이 API를 사용하면 배터리가 충전되는지, 배터리가 완전히 방전되기 전 또는 현재 용량 만 알 수 있습니다. 이러한 세부 사항은
• 객체에 속하는 4 가지 속성을 통해 액세스 할 수 있습니다. 이 API는 또한 위의 속성이 변경 될 때 트리거 될 수있는 이벤트를 정의합니다. 이 API는 예를 들어, 귀하 (또는 사용자)가 버스에서 웹 애플리케이션을 사용하려고 애 쓰고 변경 사항을 저장하는 것을 잊어 버릴 때 유용합니다. 갑자기 스마트 폰이 꺼지고 많은 시간과 모든 작업을 낭비하여 좌절합니다. 이 API를 사용하면 배터리 전원이 낮거나 불충분 할 때 데이터 손실을 방지하기 위해 현재 배터리 전원을 감지하고 변경 사항을 더 자주 저장할 수있는 페이지를 개발할 수 있습니다. 이 ​​글을 쓰는 시점에서 배터리 상태 API는 Firefox에서만 지원되지만 아래와 같이이 API에 대한지지를 감지하는 것은 매우 쉽습니다. 이 API를 사용하는 간단한 예는 다음과 같습니다.

  <code class="language-javascript">if (window.navigator && window.navigator.battery) {
     // API 受支持
  } else {
     // 不受支持
  }</code>

  이 API를 시도하고 싶다면 데모가 있습니다. 더 조사하려면 Sitepoint에서 배터리 상태 API를 여기에서 소개했습니다.

  웹 알림 API

  모바일 장치에서 우리는 알림 개념과 장치에 설치된 많은 응용 프로그램에 익숙합니다. 웹에서 웹 사이트는 다양한 방식으로이를 구현합니다. Google과 Twitter에 대해 생각하면 모두 알림 메커니즘이 있지만 다르게 구현합니다.

  웹 알림 API는 개발자가 사용자에게 알리는 방법을 정상화하기 위해이 목적을 위해 생성 된 API입니다. 알림을 통해 사용자는 이메일 배송과 같은 웹 페이지 외부의 이벤트를 사용자에게 상기시킬 수 있습니다. 개발자는 같은 방식으로 알림을 작성하지만 사양은 UI가 어떻게 그리고 어디에 표시 해야하는지 설명하지 않습니다. 이것은 우리가 다른 브라우저에서 다른 스타일을 볼 것임을 의미합니다. 예를 들어, 모바일 장치에서는 알림 표시 줄에 볼 수 있습니다. 웹 알림 API는 객체의 속성을 통해 노출됩니다. 알림 인스턴스를 만들 수있는 생성자입니다. 새 알림을 만들려면 다음 코드를 작성할 수 있습니다.

  현재 Chrome, Firefox 및 Safari는이 API를 지원합니다. 웹 알림 API를 지원하는 모바일 브라우저에는 Firefox, Android 4.4 및 BlackBerry가 포함됩니다. 이상한 것을 본 적이 있습니까? Chrome Mobile 은이 API를 지원하지 않습니다! 슬프지만 사실입니다.

  이 API를 지원하는 브라우저는 시장의 절반 이상을 커버하지만 JavaScript 코드가 지원되지 않는 방법을 호출하려고 시도하지 않도록 지원 상황을 테스트해야합니다. 다음 코드 스 니펫을 사용 하여이 작업을 수행 할 수 있습니다.

  이 API에 흥분합니까? 매우 좋은! 웹 알림 API를 시작하는 기사에서 자세한 내용을 배울 수 있으며 라이브 데모를 시도 할 수도 있습니다.
  근접 센서 api

  window 근접 센서 API는 객체와 웹 페이지를 실행하는 장치 사이의 거리를 감지하는 데 사용할 수있는 JavaScript API입니다. 거리는 근접 센서 (장치에 근접 센서가있는 경우)로 측정됩니다. 근접 센서 API는 속성이나 메소드를 제공하지 않으며 Notification 객체의 두 이벤트 만 트리거합니다. 우리는 그들의 말을 듣고 작업을 수행 할 수 있습니다. 첫 번째 이벤트

  는 장치와 인근 객체 사이의 실제 거리에 대한 정보를 제공하는 반면, 두 번째 이벤트는 근처에 객체가 있는지 여부 만 지정합니다.

  <code class="language-javascript">// 打印电池是否正在充电
  console.log("电池" + (navigator.battery.charging ? "" : "未") + "充电");</code>

  이 API를 지원하는 유일한 브라우저는 버전 15부터 시작하여 Firefox (데스크탑 및 모바일)입니다. 불행히도, 많은 랩톱과 데스크탑에는 근접 센서가 없기 때문에 주로 모바일 장치를 대상으로합니다.

  이 API에 대한지지의 감지 :

  간단한 사용 예는 다음과 같습니다

  근접 센서 API에 대해 자세히 알고 싶다면 "근접 센서 API로 시작"이라는 제목의 기사를 썼습니다. 실제로이 작업을 수행하려면이 데모를 사용할 수 있습니다.

  <code class="language-javascript">var notification = new Notification('收到电子邮件', {
    body: '您收到了一封电子邮件。立即阅读！'
  });</code>

  진동 api

  진동 API는 장치를 진동시킬 수있는 방법을 포함하는 매우 간단한 API입니다. 한 가지 분명한 사용은 10 년 전에 일부 콘솔에서 도입 한 효과를 재현 할 수있는 게임에서 사용됩니다. 그러나 이것이이 API의 유일한 목적은 아닙니다.

  내가 언급했듯이, 진동 API는 라는 메소드 만 노출됩니다. 후자는 가장 간단한 형태로

  객체에 속합니다. 장치가 진동 해야하는 밀리 초의 수를 지정하는 정수를 받아들입니다.

  인터넷 익스플로러와 사파리를 제외 하고이 API는 모든 주요 브라우저에서 지원됩니다. 그럼에도 불구하고 이제 다음 프로젝트에 사용하기에 좋은시기가 될 수 있습니다. 실제로 지원되는 경우 사용자에게 더 나은 경험을 제공합니다 (이 기능을 남용하지 않는 한). 아래 그림과 같이 탐지 지지대는 매우 쉽습니다 vibrate() API를 사용하는 매우 간단한 방법의 매우 간단한 사용은 다음과 같습니다. window.navigator 이 API에 대해 자세히 알아 보려면 "HTML5 진동 API를 사용하는 방법"을 읽고 데모를 시도하는 것을 잊지 마십시오.

  장치 방향 api

  내가 논의하고 싶은 마지막 API는 장치 방향 API입니다. 장치의 방향을 감지하는 것은 내비게이션 애플리케이션에서 게임에 이르기까지 다양한 상황에 유용합니다. 이 API는 장치의 물리적 방향 및 이동에 대한 정보를 제공하는 여러 이벤트를 정의합니다. 이 API는 W3C 작업 드래프트입니다. 즉, 사양이 불안정하고 향후 약간의 변화를 기대할 수 있습니다.

  <code class="language-javascript">if (window.navigator && window.navigator.battery) {
     // API 受支持
  } else {
     // 不受支持
  }</code>

  API는 다음 세 가지 이벤트를 노출시킵니다. 첫 번째 이벤트는 가속도계가 장치 방향의 변화를 감지하면 트리거됩니다. 두 번째 이벤트는 장치가 가속 또는 감속 할 때마다 트리거됩니다. 마지막 이벤트는 사용자 에이전트가 나침반을 보정해야한다고 결정하면 트리거됩니다.

  
  거의 모든 주요 브라우저 (사파리 제외)는이 API를 지원하지만 지원은 부분적이거나 불일치가 있습니다. 예를 들어, 글을 쓰는 시점에서

  이벤트를 지원하는 브라우저는 거의 없습니다. 따라서 각 이벤트가 각 이벤트가 지원되는지 테스트하는 것입니다. 이벤트의 존재를 테스트하려면 다음을 쓸 수 있습니다.

  <code class="language-javascript">// 打印电池是否正在充电
  console.log("电池" + (navigator.battery.charging ? "" : "未") + "充电");</code>

  또는 :

  예를 들어

  이벤트를 테스트하려면 다음을 쓸 수 있습니다. 이 API를 사용하려면 사용할 수있는 데모가 있습니다. 당신이 그것을 배우고 싶다면, 우리는 "html5에서 장치 방향을 사용하여"기사가 있습니다. 결론

  이 기사에서는 모바일 방문자 웹 페이지를 향상시킬 수있는 API를 보여줍니다.

  이 API의 사용 사례는 끝이 없으며, 모두 상상력과 개발중인 응용 프로그램 또는 웹 사이트의 유형에 달려 있습니다. 이 게시물을 즐겼기를 바랍니다. 다른 유용한 API가 무엇인지 알려주십시오.

  모바일 웹 JavaScript API deviceorientation devicemotion에 대한 질문이 자주 묻습니다 JavaScript API는 무엇이며 모바일 웹 페이지를 어떻게 향상 시키는가?

  JavaScript API (Application Programming Interface)는 다양한 소프트웨어 응용 프로그램이 서로 통신 할 수있는 일련의 규칙 및 프로토콜입니다. 모바일 웹 페이지가 장치 하드웨어 및 기타 소프트웨어 응용 프로그램과 상호 작용하여 기능 및 사용자 경험을 향상시켜 모바일 웹 페이지를 향상시킵니다. 예를 들어, JavaScript API를 사용하면 웹 페이지가 장치의 카메라, 지리적 위치 및 배터리 상태에 액세스 할 수 있습니다. 이를 통해 개발자가 상호 작용, 참여 및 사용자 친화적 인 모바일 웹 페이지를 상호 작용할 수있는 더 많은 가능성을 만듭니다.

  모바일 페이지에서 지리적 위치 API를 사용하는 방법은 무엇입니까?

  Geolocation API는 장치의 지리적 위치에 액세스 할 수있는 강력한 도구입니다. 이를 사용하려면 먼저 사용자의 브라우저가 지원하는지 확인해야합니다. 이것은 속성을 ​​사용하여 수행 할 수 있습니다. 를 반환하면

  메소드를 사용하여 사용자의 현재 위치를 얻을 수 있습니다. 사용자의 위치 데이터에 액세스하기 전에 항상 사용자의 권한을 얻는 것을 잊지 마십시오.

  배터리 상태 API는 무엇이며 사용 방법은 무엇입니까?

  배터리 상태 API는 호스트 장치의 배터리 상태에 대한 정보를 제공합니다. 이는 장치의 배터리 레벨을 기반으로 웹 페이지의 성능을 최적화하는 데 매우 유용합니다. 예를 들어, 배터리가 낮은 경우 업데이트 주파수를 낮추거나 특정 기능을 비활성화하여 전원을 절약 할 수 있습니다. 이 API를 사용하려면

  메소드를 사용할 수 있습니다.이 방법은 배터리 관리자 객체로 해결되는 약속을 반환합니다. navigator.geolocation 모바일 웹 페이지에서 진동 API를 사용하는 방법은 무엇입니까? true 진동 API를 사용하면 호스트 장치의 진동 메커니즘을 제어 할 수 있습니다. 이것은 사용자에게 촉각 피드백을 제공하는 데 매우 유용합니다. 이 API를 사용하려면 getCurrentPosition() 메소드를 사용할 수 있습니다. 특정 시간을 진동시키기 위해 단일 값을 전달하거나 일련의 값을 전달하여 진동 및 일시 정지 모드를 생성 할 수 있습니다.

  주변 광 센서 API는 무엇이며 사용 방법은 무엇입니까?

  주변 광 센서 API는 장치의 주변 광도 수준에 대한 정보를 제공합니다. 이것은 다양한 조명 조건에서 가독성을 향상시키기 위해 웹 페이지의 밝기 또는 대비를 조정하는 데 유용합니다. 이 API를 사용하려면 새 메소드를 사용하여 조명 레벨을 감지해야합니다.

  모바일 웹 페이지에서 웹 정보 API를 사용하는 방법은 무엇입니까? navigator.getBattery() 네트워크 정보 API는 장치의 네트워크 연결에 대한 정보를 제공합니다. 이는 네트워크 상태에 따라 웹 페이지의 성능을 최적화하는 데 매우 유용합니다. 예를 들어, 네트워크 연결이 느려지면 이미지 나 비디오의 품질을 줄여 부드러운로드를 보장 할 수 있습니다. 이 API를 사용하려면 네트워크 인식 객체를 반환하는

  속성을 ​​사용할 수 있습니다.

  장치 방향 API는 무엇이며 사용 방법은 무엇입니까?

  장치 방향 API는 장치의 물리적 방향에 대한 정보를 제공합니다. 이것은 장치 움직임에 반응하는 대화식 경험을 만드는 데 매우 유용합니다. 이 API를 사용하려면 장치 방향이 변경 될 때 발생하는

  이벤트에 이벤트 리스너를 추가 할 수 있습니다.

  모바일 웹 페이지에서 페이지 가시성 API를 사용하는 방법은 무엇입니까? deviceorientation 페이지 가시성 API를 사용하면 웹 페이지가 표시되거나 숨겨진시기를 감지 할 수 있습니다. 이것은 페이지의 가시성에 따라 활동을 일시 중지하거나 재개하는 데 유용합니다. 예를 들어, 사용자가 다른 탭으로 전환 할 때 비디오를 일시 중지하고 비디오가 돌아올 때 비디오를 재개 할 수 있습니다. 이 API를 사용하려면 속성과

  이벤트를 사용할 수 있습니다.

  전체 화면 API는 무엇이며 사용 방법은 무엇입니까?

  전체 화면 API를 사용하면 전체 화면 모드로 요소를 표시 할 수 있습니다. 이것은 비디오 나 게임 등에 대한보다 몰입 형 경험을 제공하는 데 매우 유용합니다. 이 API를 사용하려면 모든 요소의

  메소드를 사용하여 전체 화면에 표시 할 수 있습니다. document.visibilityState 내 모바일 페이지에서 웹 알림 API를 사용하는 방법은 무엇입니까? visibilitychange 웹 알림 API를 사용하면 사용자에게 알림을 표시 할 수 있습니다. 페이지에 초점이 맞지 않더라도 사용자에게 중요한 이벤트를 상기시키는 데 매우 유용합니다. 이 API를 사용하려면 먼저

  메소드를 사용하여 사용자의 권한을 요청해야합니다. 사용자가 권한을 부여하면 알림을 표시 할 새 알림 개체를 만들 수 있습니다.

위 내용은 5 JavaScript API의 모바일 웹 페이지에 권한을 부여합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!