掘金上发现的有趣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 来源：掘金 著做权归做者全部。商业转载请联系做者得到受权，非商业转载请注明出处。