使用 Screen Wake Lock API 不锁定屏幕

Screen Wake Lock API 提供了一种方法,可防止设备在应用需要继续运行时调暗或锁定屏幕。

什么是 Screen Wake Lock API?

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

Screen Wake Lock API 提供了一种防止设备调暗和锁定屏幕的方式。此功能可实现到现在为止需要平台专用应用的新体验。

Screen Wake Lock API 减少了需要黑客入侵和可能非常耗电的解决方法的需求。它解决了旧版 API 的缺点,该 API 只能保持屏幕开启,并且存在许多安全和隐私问题。

Screen Wake Lock API 的建议用例

RioRunThe Guardian 开发的一款 Web 应用,是一个完美的用例(尽管已不再提供)。该应用会带您跟随 2016 年奥运会马拉松路线,跟随里约的虚拟音频游览之旅。 如果没有唤醒锁定,用户的屏幕会在游览播放期间频繁关闭,这使得用户很难使用。

当然,还有许多其他用例:

  • 一款食谱应用,可让您在烤蛋糕或做晚餐时让屏幕保持开启状态
  • 一个登机牌或票务应用,在条形码扫描完毕之前,屏幕会保持开启状态
  • 一种自助服务终端式应用,屏幕会持续开启
  • 一款基于网络的演示文稿应用,可在演示过程中让屏幕保持开启状态

当前状态

步骤 状态
1. 创建铺垫消息 不适用
2. 创建规范的初始草稿 完成
3. 收集反馈并迭代设计 完成
4. 源试用 全面完整
5. 启动 完成

使用 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 的属性,该属性用于指示标记是否已释放。其值最初为 false,在分派 "release" 事件后会更改为 true。此属性可帮助 Web 开发者了解锁定的释放时间,这样他们就无需手动跟踪锁定状态。适用于 Chrome 87 版及更高版本。

屏幕唤醒锁定生命周期

播放屏幕唤醒锁定演示时,您会注意到屏幕唤醒锁定对页面可见性敏感。这意味着,当您将某个标签页或窗口最小化,或者从启用了屏幕唤醒锁定的标签页或窗口移开时,屏幕唤醒锁定会自动释放。

如需重新获取屏幕唤醒锁定,请监听 visibilitychange 事件并在发生此类事件时请求新的屏幕唤醒锁定:

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

document.addEventListener('visibilitychange', handleVisibilityChange);

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

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

在向应用添加屏幕唤醒锁定之前,请考虑您的用例是否可以通过以下替代解决方案之一来解决:

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

演示

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

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

您可以使用操作系统的任务管理器来查看某个应用是否正在阻止计算机进入休眠状态。下面的视频展示了 macOS 活动监视器,它指出 Chrome 具有使系统保持唤醒的有效屏幕唤醒锁定。

反馈

Web 平台孵化器社区小组 (WICG) 和 Chrome 团队希望了解您对 Screen Wake Lock API 的想法和体验。

向我们介绍 API 设计

是否存在 API 无法正常运行的问题?或者,是否缺少某些方法或属性来实现您的想法?

报告实施方面的问题

您是否发现了 Chrome 实现方面的错误?或者实现方式是否不同于规范?

  • https://new.crbug.com 上提交 bug。请务必提供尽可能多的详细信息,提供重现 bug 的简单说明,并将组件设为 Blink>WakeLockGlitch 非常适合快速轻松地分享重现的视频。

显示对该 API 的支持

您打算使用 Screen Wake Lock API 吗?您的公开支持有助于 Chrome 团队确定各项功能的优先级,并向其他浏览器供应商显示支持这些功能的重要性。

实用链接

致谢

主打图片Kate Stone Matheson 在 Unsplash 用户发布。 任务管理器视频,由 Henry Lim 提供。