无需登录 数据私有 本地保存

屏幕唤醒锁高级演示 - 锁定、释放与事件监听

API 开发工具 Wake Lock 事件 屏幕 锁定
4
0
0
0
00:00
未锁定
屏幕将按正常设置休眠
页面可见性
页面可见 - 唤醒锁可正常工作
可见
API 支持检测
正在检测...
检测中
事件日志
--:--:-- 🔍 工具已就绪，正在检测浏览器支持...
提示：切换标签页或最小化窗口后，唤醒锁会自动释放。移动端效果更明显。
常见问题

Screen Wake Lock API 是一个浏览器原生接口，允许网页请求设备屏幕保持常亮，防止自动调暗或锁定。它通过 navigator.wakeLock.request('screen') 方法实现，返回一个 WakeLockSentinel 对象用于管理和释放锁定。该 API 在移动设备上效果最显著，适用于视频播放、导航、演示文稿、在线阅读菜谱等场景。需要 HTTPS 环境（localhost 除外）和用户手势触发。

截至 2024 年，Chromium 内核浏览器（Chrome、Edge、Opera、Samsung Internet 等）全面支持该 API，包括桌面版和移动版。Firefox 在 Android 端有部分支持但桌面端尚在开发中。Safari（包括 iOS）支持有限，需要检查具体版本。建议始终使用特性检测 'wakeLock' in navigator 来判断当前浏览器是否可用，并提供降级方案。

唤醒锁会在以下情况自动释放：
① 页面不可见时（切换标签页、最小化窗口、锁屏）—— 这是浏览器的安全机制；
② 系统电池电量过低时，操作系统可能强制释放；
③ 用户通过系统设置开启了省电模式；
④ 设备温度过高触发系统保护；
⑤ 浏览器或标签页被关闭。开发者应始终监听 release 事件来感知锁定状态的意外变化。

Wake Lock API 不需要像通知或地理位置那样弹出权限提示框。但它必须由用户手势触发（如点击按钮），不能在页面加载时自动请求。如果在非用户手势的上下文中调用，浏览器会抛出 NotAllowedError。这有效防止了网站滥用该功能消耗用户设备电量。PWA 应用中行为类似，同样需要用户交互。

保持屏幕常亮会显著增加电量消耗，因为屏幕通常是移动设备最耗电的组件。在 OLED 屏幕上，深色界面可略微降低功耗。建议仅在必要时使用唤醒锁（如视频播放、导航），并在不需要时及时释放。浏览器也会在页面不可见时自动释放以保护电池。良好的实践是配合 visibilitychange 事件在页面恢复可见时重新评估是否需要锁定。

在 PWA（渐进式 Web 应用）中使用唤醒锁与普通网页基本一致，但有一些优势：PWA 可以以独立窗口运行，用户更可能长时间使用，唤醒锁的体验更接近原生应用。结合 manifest.json 的 display: standalone 模式，PWA 中的唤醒锁行为更稳定。建议在 PWA 中提供明显的开关让用户控制，并利用 AbortController 模式优雅管理锁的生命周期。

当用户设备的系统级省电模式开启时，浏览器的唤醒锁请求可能会失败或自动释放，具体行为取决于操作系统和浏览器实现。开发者无法覆盖系统级设置。建议做法：① 捕获 NotAllowedError 并向用户友好提示；② 监听 release 事件感知意外释放；③ 在 UI 中清晰显示当前锁定状态，让用户了解实际情况。这不是 API 的缺陷，而是操作系统对电池管理的合理优先权。

① 用户手势触发：始终在用户点击事件中调用 request()；
② 存储 Sentinel 引用：便于后续释放和事件监听；
③ 监听 release 事件：感知页面隐藏或系统强制释放；
④ 配合 visibilitychange：页面恢复可见时检查 released 属性并提示用户；
⑤ 使用 AbortController：通过 signal 优雅取消，适合复杂场景；
⑥ 提供清晰 UI 反馈：让用户始终知道屏幕锁定状态；
⑦ 按需使用：仅在必要时保持锁定，及时释放以节省电量。
🔧 相关工具