前言

在移动设备上，屏幕常亮是一个常见的需求，尤其是在使用 Web 应用时。为了满足这一需求，开发者可以使用JavaScript中的 Wake Lock API 来阻止屏幕进入睡眠状态。本文将详细介绍如何使用这一 API，并讨论其在不同浏览器上的兼容性情况。

检查Wake Lock功能的支持情况

在使用Wake Lock API之前，我们需要确认当前浏览器是否支持这一功能。可以通过以下代码进行检查：

const isWakeLockSupported = 'wakeLock' in navigator;

如果isWakeLockSupported为true，则表示当前浏览器支持Wake Lock功能。

浏览器兼容性

Wake Lock API的兼容性因浏览器和操作系统而异。截至目前，以下是主流浏览器对Wake Lock API的支持情况：

• Chrome: 从Chrome 85版本开始支持Wake Lock API。
• Firefox: 支持Wake Lock API，但可能需要在设置中启用相应的功能。
• Safari: 截至目前，Safari尚未支持Wake Lock API。不过，可以使用第三方库如NoSleep.js作为替代方案。
• Edge: 作为基于Chromium的浏览器，Edge的兼容性与Chrome类似。
• Opera: 同样基于Chromium，支持情况与Chrome相似。

请求屏幕保持唤醒状态

要请求屏幕保持唤醒状态，可以使用navigator.wakeLock.request方法。这个方法是基于 Promise 的，因此需要在异步函数中调用。

let wakeLock = null;

const requestScreenWakeLock = async () => {
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    console.log('屏幕保持唤醒状态成功！');
  } catch (err) {
    console.error(`错误：${err.name}, 消息：${err.message}`);
  }
};

requestScreenWakeLock();

释放屏幕唤醒锁

当不再需要保持屏幕唤醒状态时，应该释放唤醒锁。可以使用wakeLock.release方法来实现：

if (wakeLock) {
  wakeLock.release().then(() => {
    wakeLock = null;
    console.log('屏幕唤醒锁已释放');
  });
}

监听唤醒锁的释放

如果因为某些原因（如用户切换到其他窗口或标签页）导致唤醒锁被释放，可以通过添加事件监听器来监听这一事件：

if (wakeLock) {
  wakeLock.addEventListener('release', () => {
    console.log('屏幕唤醒锁已被释放');
  });
}

根据文档可见性重新获取唤醒锁

在某些情况下，当文档的可见性发生变化时（例如用户切换回当前标签页），可能需要重新获取唤醒锁。可以通过监听visibilitychange事件来实现：

document.addEventListener('visibilitychange', async () => {
  if (document.visibilityState === 'visible' && !wakeLock) {
    await requestScreenWakeLock();
  }
});

结论

通过以上步骤，开发者可以使用JavaScript中的Wake Lock API来保持屏幕常亮，从而提升用户体验。需要注意的是，这一API在不同的浏览器和平台上的支持情况可能不同，因此在实际使用时需要进行充分的测试和兼容性处理。同时，开发者应当注意合理使用这一API，避免对用户的设备电池寿命造成不必要的影响。