那些你可能不知道的Web APIs

1.Page Visibility(判斷網頁的可見性)

這個新的 API 的意義在於，經過監聽網頁的可見性，能夠預判網頁的卸載，還能夠用來節省資源，減緩電能的消耗

咱們以前在實現一個業務需求的時候，判斷一個頁面是否失焦，用的是 onblur、onfocus，有了這個 API，會方便不少。

window.addEventListener('visibilitychange', () => {
  /*if(document.hidden) {
    console.log('Tab呈現以前');
  }
  else {
    console.log('Tab被聚焦');
  }*/
  switch(document.visibilityState) {
    case 'prerender':
      console.log('Tab呈現以前');
      break;
    case 'hidden':
      console.log('Tab隱藏');
      break;
    case 'visible':
      console.log('Tab被聚焦');
      break;
  }
});複製代碼

使用場景:

• 聊天室，不可見時可以在瀏覽器標籤頭（document.title）中展現消息通知；
• 切換tab時暫停音頻或視頻

2.page lifecycle(網頁生命週期)

前面，我介紹了 Page Visibility API。有了它，就能夠監聽各類狀況的網頁卸載。

可是，它沒有解決一個問題。Android、iOS 和最新的 Windows 系統能夠隨時自主地中止後臺進程，及時釋放系統資源。也就是說，網頁可能隨時被系統丟棄掉。Page Visibility API 只在網頁對用戶不可見時觸發，至於網頁會不會被系統丟棄掉，它就無能爲力了。

爲了解決這個問題，W3C 新制定了一個 Page Lifecycle API，統一了網頁從誕生到卸載的行爲模式，而且定義了新的事件，容許開發者響應網頁狀態的各類轉換。

有了這個 API，開發者就能夠預測網頁下一步的狀態，從而進行各類針對性的處理。Chrome 68 支持這個 API，對於老式瀏覽器可使用谷歌開發的兼容庫 PageLifecycle.js。

生命週期階段

例子：

window.addEventListener('visibilitychange',() => {
    // visibilitychange事件在網頁可見狀態發生變化時觸發，通常發生在如下幾種場景
    switch(document.visibilityState){
        case'prerender': // 網頁預渲染 但內容不可見
        case'hidden':    // 內容不可見 處於後臺狀態，最小化，或者鎖屏狀態
        case'visible':   // 內容可見
        case'unloaded':  // 文檔被卸載
    }
})複製代碼

使用場景:

• 聊天室，不可見時可以在瀏覽器標籤頭（document.title）中展現消息通知；
• 切換tab時暫停音頻或視頻

3.Gamepad(遊戲手柄)

Gamepad API 能夠給予開發者一種簡單、統一的方式來識別並響應遊戲控制器（手柄）。其中包含了三個接口、兩個事件、一個特殊函數，用來響應控制器的鏈接與斷開、獲取其餘關於控制器的信息以及識別當前是哪一個按鍵或是哪一個控制器被按下了。

接口

• Gamepad 表示已鏈接的遊戲控制器。
  
• GamepadButton 表示已鏈接手柄上的一個按鍵。
  
• GamepadEvent 表示與控制器相關的事件的事件對象。
  

鏈接到遊戲手柄

當新遊戲手柄鏈接到計算機時，聚焦頁面首先接收gamepadconnected事件。若是在加載頁面時已鏈接遊戲手柄，則gamepadconnected當用戶按下按鈕或移動軸時，將事件分派到聚焦頁面：

window.addEventListener("gamepadconnected", function(e) {     
 console.log(e.gamepad.index) // 一個自增的整形數字，對於當前鏈接到系統的每個設備是惟一的
 console.log(e.gamepad.id) // 手柄ID 每一個遊戲手柄都有一個與之關聯的惟一ID，可在活動的gamepad屬性中找到 
 console.log(e.gamepad.buttons.length) // 一個 gamepadButton 對象的數組，表示設備上的按鍵的數組
 console.log(e.gamepad.axes.length) // 一個表示控制器設備上存在的座標軸的數組 (好比控制器搖桿)
});複製代碼

斷開遊戲手柄

當遊戲手柄斷開鏈接，而且若是頁面先前已經接收到該遊戲手柄的數據（例如 gamepadconnected），則將第二個事件分派到聚焦窗口， gamepaddisconnected：

window.addEventListener("gamepaddisconnected", function(e) {
  console.log("Gamepad disconnected from index %d: %s",
    e.gamepad.index, e.gamepad.id);
});複製代碼

4.Vibration（振動）

振動的API容許開發者直接調用設備震動，使用JavaScript，在給定時間的振動模式

一個單次振動

你能夠經過指定單個值或僅由一個值組成的數組來一次振盪振動硬件：

window.navigator.vibrate(200);
window.navigator.vibrate([200]);
複製代碼

振動模式

一組數值描述了設備振動而且不振動的交替時間段。數組中的每一個值都將轉換成一個整數，而後交替解釋爲設備應該振動的毫秒數和不振動的毫秒數。例如:

window.navigator.vibrate([200, 100, 200]);
複製代碼

中止振動

當調用 window.navigator.vibrate() 的參數爲「0」、空白?數組，或?數組全爲「0」時，便可取消目前?進行中的振動。

使用場景：移動應用中開發Web遊戲或多媒體應用時，能夠經過振動來提供感官反饋。

5.device orientation（陀螺儀）

經過綁定事件來獲取設備的物理朝向，能夠獲取到三個數值，分別是：

• alpha：設備沿着Z軸的旋轉角度
  
• beta：設備沿着X軸的旋轉角度
  
• gamma：設備沿着Y軸的旋轉角度
  

代碼：

window.addEventListener('deviceorientation',ev => {
    console.log('Beta:',ev.beta); // Z軸的旋轉角度
    console.log('Alpha:',ev.Alpha); // X軸的旋轉角度
    console.log('Gamma:',ev.gamma); // Y軸的旋轉角度
})複製代碼

6.Clipboard（剪貼板）

Clipboard API的Clipboard接口提供了一種讀寫操做系統剪貼板的方式。

複製：將文本寫入剪貼板

writeText() 能夠把文本寫入剪切板。writeText() 是異步的，它返回一個 Promise

navigator.clipboard.writeText('要複製的文本')
  .then(() => {
    console.log('文本已經成功複製到剪切板');
  })
  .catch(err => {
    // This can happen if the user denies clipboard permissions:
    // 若是用戶沒有受權，則拋出異常
    console.error('沒法複製此文本：', err);
  });
複製代碼

粘貼：從剪貼板中讀取文本

navigator.clipboard.readText()
  .then(text => {
    console.log('Pasted content: ', text);
  })
  .catch(err => {
    console.error('Failed to read clipboard contents: ', err);
  });
複製代碼

處理粘貼事件

有計劃推出檢測剪貼板更改的新事件，但如今最好使用「粘貼」事件。它很適合用於閱讀剪貼板文本的新異步方法

document.addEventListener('paste', event => {
  event.preventDefault();
  navigator.clipboard.readText().then(text => {
    console.log('Pasted text: ', text);
  });
});
複製代碼

7.document.execCommand（執行命令）

大多數命令影響document的 selection（粗體，斜體等），當其餘命令插入新元素（添加連接）或影響整行（縮進）。當使用contentEditable時，調用 execCommand() 將影響當前活動的可編輯元素,使用這個方法來執行一些命令，好比複製，剪切，修改、背景顏色、顏色，縮進，插入圖片、選中文字粗體、斜體等

let iframe = document.createElement('ifram');
let doc = iframe.contentDocument;
// 將HTML文檔切換成設計模式execCommand

doc.designMode = 'on';

// 而後就可使用execCommand 這個命令了；
// 執行復制命令

// 全選
doc.execCommand('selectAll')
// 將選中文字變成粗體，同時接下來輸入的文字也會成爲粗體，
doc.execCommand('bold')
// 將選中文字變成斜體，同時接下來輸入的文字也會成爲斜體，
doc.execCommand('italic')
// 設置背景顏色，，好比設置背景色爲紅色，就傳入 'red'便可
doc.execCommand('backColor',true,'red')
doc.execCommand('copy')
// 剪切選中區域
doc.execCommand('cut')
複製代碼

簡易的富文本編輯器

8.Ambient Light（環境光傳感器）

該 AmbinentLightSensor()構造函數建立一個新 AmbientLightSensor對象時，它返回主機裝置周圍的環境光的光電流電平或照度。

使用

let sensor = new AmbientLightSensor();
sensor.start();
sensor.onchange = (e) => {
  console.log(e.reading.illuminance);
};
sensor.stop();
複製代碼

9.battery status（電池狀態）

容許網頁從桌面和移動設備訪問電池信息。

// 首先去判斷當前瀏覽器是否支持此API
if ('getBattery' in navigator) {
    // 經過這個方法來獲取battery對象
    navigator.getBattery().then(battery => {
    // battery 對象包括中含有四個屬性
    // charging 是否在充電
    // level   剩餘電量
    // chargingTime 充滿電所需事件
    // dischargingTime  當前電量可以使用時間
    const { charging, level, chargingTime, dischargingTime } = battery;
    // 同時能夠給當前battery對象添加事件  對應的分別時充電狀態變化 和 電量變化
    battery.onchargingchange = ev => {
        const { currentTarget } = ev;
        const { charging } = currentTarget;
    };
    battery.onlevelchange = ev => {
        const { currentTarget } = ev;
        const { level } = ev;
    }
    })
} else {
    alert('當前瀏覽器不支持~~~')
}複製代碼

10.online state（網絡狀態）

判斷網頁是否連網。

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

function networkStatus(e) {
  console.log(e.type);
}複製代碼

十一、Web VR

WebVR API 能爲虛擬現實設備的渲染提供支持 — 例如像Oculus Rift或者HTC Vive 這樣的頭戴式設備與 Web apps 的鏈接。它能讓開發者將位置和動做信息轉換成3D場景中的運動。基於這項技術能產生不少有趣的應用, 好比虛擬的產品展現，可交互的培訓課程，以及超強沉浸感的第一人稱遊戲

詳細介紹請到MDN

參考

阮一峯的Page Visibility API 教程

MDN文檔

JS vibrate能讓手機振動的API