使用 Array.prototype.with 更新不可变数组

JavaScript 中的一些新功能非常值得期待，唤醒锁定 api 就是其中之一。它允许我们与主机系统进行交互，可以帮助开发人员使用 JavaScript 指示操作系统保持屏幕唤醒状态！

这对于希望用户的设备不会因非活动超时而被锁定的情况尤其有用。浏览器可以指示操作系统用户正在进行某项活动，例如录制或观看视频。

防止屏幕休眠或变暗

然后就可以使用唤醒锁定 API 来防止屏幕休眠或变暗。用于请求权限：

let screenLock;


try {
  screenLock = await navigator.wakeLock.request('screen');
} catch (err) {
  console.log('Error with wake lock: ', err);
}

如果请求成功，主机将不会休眠，直到唤醒锁以编程方式被释放。这就是使用 JavaScript 保持屏幕唤醒所需的全部功能。

我们将代码封装在 try-catch 中，因为如果主机设备处于省电模式、电池电量不足或当前标签不可见，屏幕唤醒锁请求可能会被拒绝。

释放唤醒锁

await screenLock.release()

值得注意的是，如果文档处于非活动状态（用户更换标签页/窗口等），锁定会自动解除。为了处理这个问题，我们可以添加一个可见性变化事件：

document.addEventListener('visibilitychange', async () => {
  try {
    screenLock = await navigator.wakeLock.request('screen');
  } catch (err) {
    console.log('Error with wake lock: ', err);
  }
});

请注意

该 API 仅在应用程序通过 HTTPS 提供时可用。

虽然该 API 已经存在了一段时间，但并非所有浏览器都支持它。您可以查看 MDN 兼容性，了解哪些浏览器支持。在撰写本文时，iOS 上的 firefox 和 Safari 尚不支持。

在设备上使用此功能可确保设备不会进入休眠状态。