使用JavaScript阻止屏幕进入睡眠状态

使用JavaScript阻止屏幕进入睡眠状态

最近在H5端有需要保持手机屏幕常亮的需求，辗转之下，发现了一个早在 chrome 85中就已经支持的Web API，不过，截止到今天发文时，Safari 仍不支持，尽管如此，在安卓端我们还是能调用这个API来节省设备电池电量（相对于 NoSleep.js 来说），ios端使用polyfill的方式，在将来 Safari 支持该 API 后移除即可。

Wake Lock可防止屏幕关闭、变暗或锁定，仅适用于活动的选项卡/窗口，这可以防止后台选项卡使您的设备保持唤醒状态，也提供了函数以随时通过代码手动释放。

调 Wake Lock之前，我们首先需要检查当前浏览器中是否存在该功能。我们可以使用以下简单函数来做到这一点。

const canWakeLock = () => 'wakeLock' in navigator

请求唤醒锁

下面的示例演示如何请求 WakeLockSentinel 对象。WakeLock.request 方法是基于 Promise 的，因此我们可以创建一个异步函数。

let wakeLock = null
const requestWakeLock = async () => {
    try {
        wakeLock = await navigator.wakeLock.request('screen')
        console.log('Wake Lock is active!')
    } catch (err) {
        console.log(`${err.name}, ${err.message}`)
    }
}

requestWakeLock()

释放唤醒锁

下面的示例演示如何释放以前获取的唤醒锁。

wakeLock.release().then(() => wakeLock = null)

侦听唤醒锁释放

如因任何原因（例如离开活动窗口/选项卡）而释放唤醒锁，将出触发 release 监听函数。

wakeLock.addEventListener('release', () => {
    console.log('Wake Lock has been released')
})

重新获取唤醒锁

以下代码在文档的可见性发生更改并释放唤醒锁时重新获取唤醒锁。

document.addEventListener('visibilitychange', async () => {
    if (wakeLock !== null && document.visibilityState === 'visible') {
        requestWakeLock()
    }
})

本文章由javascript技术分享原创和收集