使用 Screen Wake Lock API 不锁定屏幕

Pete LePage

Thomas Steiner

发布时间：2018 年 12 月 18 日

Browser Support

什么是 Screen Wake Lock API？

为避免消耗电池电量，大多数设备在处于空闲状态时会快速进入休眠模式。虽然大多数情况下这样做都没什么问题，但有些应用需要保持屏幕唤醒状态才能完成工作。例如，显示食谱步骤的烹饪应用，或者像 Ball Puzzle 这样的游戏，它们使用设备运动 API 进行输入。

Screen Wake Lock API 提供了一种防止设备屏幕变暗和锁定的方法。借助此功能，您可以打造新的体验，而在此之前，这些体验需要使用特定于平台的应用。

Screen Wake Lock API 可减少对可能耗电的权宜之计的需求。它弥补了旧版 API 的不足，旧版 API 只能保持屏幕开启，并且存在许多安全和隐私问题。

Screen Wake Lock API 的建议用例

由 The Guardian 开发的 Web 应用 RioRun 就是一个完美的用例（不过该应用已不再提供）。这款应用会带您进行里约热内卢的虚拟音频导览，沿着 2016 年奥运会马拉松的路线游览。如果没有唤醒锁定，用户在导览播放期间屏幕会频繁关闭，导致难以使用。

当然，还有许多其他用例：

一款食谱应用，可在您烘焙蛋糕或烹饪晚餐时保持屏幕开启状态
在条形码扫描完成之前，使屏幕保持开启状态的登机牌或票券应用
可使屏幕持续保持开启状态的信息亭式应用
一款基于 Web 的演示应用，可在演示期间保持屏幕开启状态

使用 Screen Wake Lock API

Screen Wake Lock API 仅提供一种唤醒锁定：screen。

`screen` 唤醒锁定

screen唤醒锁定可防止设备屏幕关闭，以便用户查看屏幕上显示的信息。

获取屏幕唤醒锁定

如需请求屏幕唤醒锁定，您需要调用返回 WakeLockSentinel 对象的 navigator.wakeLock.request() 方法。您可以选择传递类型 screen 作为参数。浏览器可能会因各种原因（例如电池电量过低）拒绝该请求，因此最好将该调用封装在 try...catch 语句中。如果失败，异常的消息会包含更多详细信息。

释放屏幕唤醒锁定

您还需要一种释放屏幕唤醒锁的方式，这可以通过调用 WakeLockSentinel 对象的 release() 方法来实现。如果您不存储对 WakeLockSentinel 的引用，则无法手动释放锁，但当当前标签页不可见时，锁会被释放。

如果您想在经过一段时间后自动释放屏幕唤醒锁定，可以使用 window.setTimeout() 调用 release()，如示例所示。

// The wake lock sentinel.
let wakeLock = null;

// Function that attempts to request a screen wake lock.
const requestWakeLock = async () => {
  try {
    wakeLock = await navigator.wakeLock.request();
    wakeLock.addEventListener('release', () => {
      console.log('Screen Wake Lock released:', wakeLock.released);
    });
    console.log('Screen Wake Lock released:', wakeLock.released);
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

// Request a screen wake lock…
await requestWakeLock();
// …and release it again after 5s.
window.setTimeout(() => {
  wakeLock.release();
  wakeLock = null;
}, 5000);

WakeLockSentinel 对象有一个名为 released 的属性，用于指示是否已发布 Sentinel。其初始值为 false，并在调度 "release" 事件后更改为 true。此属性可帮助 Web 开发者在无需手动跟踪的情况下了解锁何时已释放。

屏幕唤醒锁定的生命周期

当您使用屏幕唤醒锁定演示时，您会发现屏幕唤醒锁定对网页可见性非常敏感。这意味着，当您最小化标签页或窗口，或者切换到未启用屏幕唤醒锁定的标签页或窗口时，系统会自动释放屏幕唤醒锁定。

如需重新获取屏幕唤醒锁定，请监听 visibilitychange 事件，并在发生该事件时请求新的屏幕唤醒锁定：

const handleVisibilityChange = async () => {
  if (wakeLock !== null && document.visibilityState === 'visible') {
    await requestWakeLock();
  }
};

document.addEventListener('visibilitychange', handleVisibilityChange);

最大限度减少对系统资源的影响

您是否应在应用中使用屏幕唤醒锁定？所采用的方法取决于应用的需求。无论如何，您都应该为应用使用尽可能轻量的方法，以便最大限度减少应用对系统资源的影响。

在为应用添加屏幕唤醒锁定之前，请考虑您的用例是否可以通过以下某种替代解决方案来解决：

如果您的应用执行长时间运行的下载，请考虑使用后台提取。
如果您的应用同步来自外部服务器的数据，请考虑使用后台同步。

演示

查看屏幕唤醒锁定演示和演示源代码。请注意，当您切换标签页或应用时，屏幕唤醒锁定会自动释放。

操作系统任务管理器中的屏幕唤醒锁定

您可以使用操作系统的任务管理器来查看是否有应用阻止计算机进入睡眠状态。该视频显示了 macOS Activity Monitor，表明 Chrome 具有有效的屏幕唤醒锁定，可使系统保持唤醒状态。

反馈

您是否发现 Chrome 的实现存在 bug？还是实现与规范不同？

提交 bug。请尽可能详细地说明。提供清晰的 bug 重现说明，并将组件设置为 Blink>WakeLock。

资源

致谢

任务管理器视频由 Henry Lim 提供。