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