JavaScript阻止屏幕进入睡眠状态

1. 请求唤醒锁
2. 释放唤醒锁
3. 侦听唤醒锁释放
4. 重新获取唤醒锁

使用 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()
    }
});