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

「点点赞赏,手留余香」

1

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » JavaScript阻止屏幕进入睡眠状态

发表回复

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们