掘金上發現的有趣web api

本篇文章主要選取了幾個有趣且有用的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

連接：https://juejin.im/post/5c1606d9f265da613d7bf7a4 來源：掘金 著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。