本篇文章主要選取了幾個有趣且有用的webapi進行介紹，分別介紹其用法、用處以及瀏覽器支持度

• page lifecycle

• onlineState（網絡狀態）

• device orientation（陀螺儀，獲取用戶手機朝向）

• battery status 獲取用戶手機電量

用法

window.addEventListener(‘blur‘,() => {})
window.addEventListener(‘visibilitychange‘,() => {
    // 通過這個方法來獲取當前標簽頁在瀏覽器中的激活狀態。
    switch(document.visibilityState){
        
 
case‘prerender‘: // 網頁預渲染 但內容不可見
        case‘hidden‘:    // 內容不可見 處於後臺狀態，最小化，或者鎖屏狀態
        case‘visible‘:   // 內容可見
        case‘unloaded‘:  // 文檔被卸載
    }
});

用處：在當前標簽頁是count數量會自動增加，不在當前標簽頁時count會停止增加，這個API的用處就是用來響應我們網頁的狀態，比如說我們的頁面是在播放視頻或者是一個網頁的遊戲，你可以通過這個API來去做出對應的響應，暫停視頻，遊戲暫停等等。

online state（網絡狀態）

這個API就很簡單了，就是獲取當前的網絡狀態，同時也有對應的事件去響應網絡狀態的變化。

用法：網絡中斷了，我們可以通過這個API去響應

window.addEventListener(‘online‘,onlineHandler)
window.addEventListener(‘offline‘,offlineHandler)

device orientation（陀螺儀）

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

• alpha：設備沿著Z軸的旋轉角度

• beta：設備沿著X軸的旋轉角度

• gamma：設備沿著Y軸的旋轉角度

用法

window.addEventListener(‘deviceorientation‘,e => {
    console.log(
 
‘Gamma:‘,e.gamma);
    console.log(‘Beta:‘,e.beta);
    console.log(‘Alpha:‘,e.Alpha);
})

battery status

這個API就使用來獲取當前的電池狀態

用法：

// 首先去判斷當前瀏覽器是否支持此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(‘當前瀏覽器不支持~~~‘)

這是demo的URL：https://github.com/1921622004/webapi

文章來源，我這只做個個人的標記，挺有趣的

作者：awesome23

掘進上發現的有趣web api