使用 Screen Wake Lock API 不锁定屏幕

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

Pete LePage

Thomas Steiner

什么是 Screen Wake Lock API？

为了避免消耗电池电量，大多数设备会在设备闲置时快速进入休眠状态 空闲。虽然大多数情况下这没有问题，但有些应用程序需要保持 唤醒屏幕以完成工作。例如烹饪应用 显示食谱或游戏的制作步骤 例如 Ball Puzzle，它使用 以及用于输入的动作 API。

Screen Wake Lock API 可用于防止设备调暗 以及锁定屏幕本次 功能可实现新的体验，到目前为止，这些都需要针对具体平台的应用才能实现。

Screen Wake Lock API 可减少黑客入侵和潜在 解决方法。它解决了旧版 API 的缺点 仅限于让屏幕保持开启状态 安全和隐私问题

建议的 Screen Wake Lock API 用例

RioRun、 一款由《卫报》开发的 Web 应用， 是一个完美的用例（尽管已不再提供）。 这款应用带你沿着 2016 年的路线在里约热内卢进行虚拟语音导览 奥运会马拉松。 如果没有唤醒锁定，用户的屏幕会经常关闭， 使它难以使用

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

• 一款食谱应用，可在您烤蛋糕或烹饪时让屏幕保持开启状态 晚餐
• 可保留屏幕的登机牌或票务应用 保持开启状态，直到条形码扫描完毕
• 可使屏幕持续开启的自助服务终端式应用
• 一款基于网络的演示文稿应用，可保留屏幕 在演示期间开启

当前状态

使用 Screen Wake Lock API

唤醒锁定类型

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

screen唤醒锁定

screen 唤醒锁定可防止设备屏幕旋转 以便用户可以看到屏幕上显示的信息。

获取屏幕唤醒锁定

如需请求屏幕唤醒锁定，您需要调用 navigator.wakeLock.request() 方法 返回 WakeLockSentinel 对象的方法。 您将所需的唤醒锁定类型作为参数传递给此方法， （目前仅限于 '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 事件分派。此属性可帮助网站开发者了解 已经发布，因此他们无需手动跟踪此信息。 Chrome 87 及更高版本均提供此功能。

屏幕唤醒锁定生命周期

使用屏幕唤醒锁定演示时，您会发现屏幕唤醒锁定功能 对网页可见性敏感。 这意味着屏幕唤醒锁定 最小化按钮后， 标签页或窗口，或者切换到已启用屏幕唤醒锁定的标签页或窗口。

如需重新获取屏幕唤醒锁定，请按以下步骤操作： 监听 visibilitychange 事件 ，并在出现这种问题时请求新的屏幕唤醒锁定：

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

document.addEventListener('visibilitychange', handleVisibilityChange);

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

您应该在应用中使用屏幕唤醒锁定吗？ 具体采用何种方法取决于应用的需求。无论如何，您应该 尽可能使用最轻量级的方法 对系统资源的影响。

在为您的应用添加屏幕唤醒锁定之前，请考虑您的用例 使用以下替代解决方案之一来解决：

• 如果您的应用需要长时间下载，不妨考虑使用 后台提取。
• 如果您的应用同步了来自外部服务器的数据，请考虑使用 后台同步。

演示

查看屏幕唤醒锁定演示和演示源代码。 请注意，当您切换标签页时，屏幕唤醒锁定是如何自动解除的 或应用。

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

您可以使用操作系统的任务管理器，查看应用程序是否阻止 避免计算机进入休眠状态下面的视频展示了 活动监控器 表示 Chrome 已启用屏幕唤醒锁定，可将系统保持唤醒状态。

反馈

Web Platform Incubator 社区论坛 (WICG) Chrome 团队希望了解您的 使用 Screen Wake Lock API 的想法和体验。

向我们介绍 API 设计

API 是否存在无法按预期运行的地方？或 是否缺少实现自己的想法的方法或属性？

• 在 Screen Wake Lock API GitHub 代码库中提交规范问题 或添加您对现有问题的看法。

报告实现存在的问题

您在 Chrome 的实现过程中是否发现了错误？还是 与规范不同？

• 访问 https://new.crbug.com 提交 bug。务必尽可能多添加一些 提供重现错误的简单说明，以及 将 Components 设为 Blink>WakeLock。故障效果非常好 以便轻松快速地分享重现。

表示对 API 的支持

您打算使用 Screen Wake Lock API 吗？你的公开支持将帮助 Chrome 团队会优先处理各项功能，并向其他浏览器供应商展示如何操作 但为他们提供支持至关重要

• 在 WICG Discourse 会话中说明您计划如何使用此 API。
• 使用 # 标签向 @ChromiumDev 发送推文 #WakeLock 并告诉我们您使用它的地点和方式。

实用链接

• 规范候选建议 |编辑草稿
• 屏幕唤醒锁定演示 |屏幕唤醒锁定演示源代码
• 跟踪错误
• ChromeStatus.com 条目
• 试用 Wake Lock API
• Blink 组件：Blink>WakeLock

致谢

主打图片，作者 Kate Stone Matheson 在 Un 创立频道上播放。 任务管理器视频，提供者： Henry Lim。