• 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来去做出对应的响应，暂停视频，游戏暂停等等。

window.addEventListener('online',onlineHandler)

window.addEventListener('offline',offlineHandler)

window.addEventListener('deviceorientation',e => {

    console.log('Gamma:',e.gamma);

    console.log('Beta:',e.beta);

    console.log('Alpha:',e.Alpha);

})

// 首先去判断当前浏览器是否支持此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('当前浏览器不支持~~~')