灏天阁

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

· Yin灏

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

- Book Lists -