那些你可能不知道的Web APIs

穆笙發表於2019-02-19

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);
}複製程式碼

11、Web VR

WebVR API 能為虛擬現實裝置的渲染提供支援 — 例如像Oculus Rift或者HTC Vive 這樣的頭戴式裝置與 Web apps 的連線。它能讓開發者將位置和動作資訊轉換成3D場景中的運動。基於這項技術能產生很多有趣的應用, 比如虛擬的產品展示，可互動的培訓課程，以及超強沉浸感的第一人稱遊戲

詳細介紹請到MDN