你可能不知道的Web APIs

浏览 Youtube 的时候，看到了这个视频：Web APIs You [Probably] Didn't Know Existed，真的是如标题所说，我都不知道有某些 Web APIs 的存在（[捂脸].jpg）。视频中讲了10个API，列举如下。

1. Page Visibility

Provides an API to ask whether the current page is visible or not.
提供一个接口，可以判断网页的可见性。

话说我之前在实现一个业务需求的时候，判断一个页面是否失焦，用的是 onblur、onfocus，有了这个 API，会方便很多。

window.addEventListener('visibilitychange', () => {
  /*if(document.hidden) {
    console.log('Tab is hidden');
  }
  else {
    console.log('Tab is focused');
  }*/
  switch(document.visibilityState) {
    case 'prerender':
      console.log('Tab is pre-rendering');
      break;
    case 'hidden':
      console.log('Tab is hidden');
      break;
    case 'visible':
      console.log('Tab is focused');
      break;
  }
});

使用场景：

• 聊天室，不可见时能够在浏览器标签头（document.title）中展示消息通知；
• 切换tab时暂停音频或视频

Page Visibility API 教程
Page Lifecycle API 教程

2. Online State

Exposes a network connection availability information to the web.
判断网页是否连网。

console.log(navigator.onLine ? 'online' : 'offline');
window.addEventListener('offline', networkStatus);
window.addEventListener('online', networkStatus);

function networkStatus(e) {
  console.log(e.type);
}

使用场景：断网时提醒用户，提升用户体验。

Network Information API - MDN
Network Information API Sample

3. Vibration

Provides access to a form of tactile feedback.
提供振动反馈

// Vibrate for 1 second
navigator.vibrate(1000);

// Vibrate with a pattern
nagivator.vibrate([400/*vibrate*/, 300/*wait*/, 300/*vibrate*/, 200/*wait*/, 500/*vibrate*/]);

// Turn off vibration
navigator.vibrate(0);

使用场景：移动应用中开发Web游戏或多媒体应用时，可以通过振动来提供感官反馈。

JavaScript手机振动API
JS vibrate能让手机振动的API

4. Device Orientation

Pvovides access to device's physical orientation.
获取设备的物理方向。

let logo = document.querySelector('img');

window.addEventListener('deviceorientation', (e) => {
  let tiltLR = e.gamma;
  let tiltFB = e.beta;

  logo.style.transform = `rotate(${tiltLR}deg) rotate3d(1,0,0, ${tiltFB * -1}deg)`;
});

使用场景：通过手机的转向可以看到3D全景画面，如旅游场景

5. Clipboard

Standard APIs for interacting with the clipboard(copy/cut/paste).
复制、剪切、粘贴

// 1. User interaction is required
let button = document.querySelector('button');

button.addEventListener('click', () => {
  select();
  copy();
});

// 2. Programmatically select an element
function select() {
  let input = document.querySelector('input');

  input.focus();
  input.setSelectionRange(0, input.value.length);
}

// 3. Copy selected element text
function copy() {
  try {
    docuement.execCommand('copy');
  }
  catch(err) {
    console.error(err);
  }
}

☛ clipboard.js

6. Ambient Light

Exposes sensor data that captures the light intensity.
捕捉环境光强度

window.addEventListener('devicelight', (e) => {
  console.log(`${e.value} lux`);
});

Generic Sensor API
Generic Sensor API playground

let sensor = new AmbientLightSensor();

sensor.start();

sensor.onchange = (e) => {
  console.log(e.reading.illuminance);
};

sensor.stop();

使用场景：手机屏幕根据环境光进行调整。

7. Battery Status

Allows a web page to access battery information from desktop and mobile devices.

navigator.getBatter().then((battery) => {
  console.log(`${batter.level * 100}%`);

  batter.addEventListener('levelchange', () => {
    console.log(`${this.level * 100}%`);
  });
});

使用场景：1、类似pokeman游戏；2、很长的表单，提醒用户可以提前保存

8. Web Assembly

WebAssembly or wasm, is a low-level programming language for the client-side. (under develpment)
客户端底层开发语言（趋势？）

使用场景：大型网页游戏

9. Web VR

Experimental API that provides access to Virtual Reality devices, such as the Oculus Rift or Google Cardboard.
虚拟现实（已经流行。。）

A-Frame

10. Gamepad

Gives access to a game controller via USB.
通过 USB 的连接就能够对游戏进行操作

window.addEventListener('gamepadconnected', gameLoop);

function gameLoop() {
  let gp = navigator.getGamepad()[0];

  console.log('ID:', gp.id);
  console.log('Axes:', gp.axes.length);
  console.log('Buttons:', gp.buttons.length);

  if(gp.buttons[0].pressed) {
    console.log('X');
  }

  requestAnimationFrame(gameLoop);
}

Using the Gamepad API
Gamepad