如何正确释放 Web Wake Lock 非移动端中的屏幕锁

本文详解在桌面端 Chrome 中使用 navigator.wakeLock 申请并安全释放屏幕唤醒锁的完整流程，重点解决 wakeLock.release is not a function 错误——根本原因是混淆了 Promise 对象与实际 WakeLock 实例。

本文详解在桌面端 chrome 中使用 `navigator.wakelock` 申请并**安全释放屏幕唤醒锁**的完整流程，重点解决 `wakelock.release is not a function` 错误——根本原因是混淆了 promise 对象与实际 wakelock 实例。

Web Wake Lock API 允许网页在用户处于活跃标签页时阻止设备进入休眠（如屏幕变暗或系统休眠），常用于视频播放、演示文稿、远程监控等场景。但其使用有明确的异步契约：navigator.wakeLock.request('screen') 返回的是一个 Promise，而非立即可用的 WakeLock 实例。若直接对 Promise 调用 .release()，自然会报错 is not a function。

✅ 正确做法是：先 await 获取实际的 WakeLock 对象，再在其上调用 .release()。以下是推荐的健壮实现：

let wakeLock = null;// ✅ 申请屏幕唤醒锁（需在用户交互或安全上下文中调用）async function requestWakeLock() {  try {    if ('wakeLock' in navigator) {      wakeLock = await navigator.wakeLock.request('screen');      console.log('✅ Screen wake lock acquired');      // 可选：监听释放事件（例如被系统强制释放时）      wakeLock.addEventListener('release', () => {        console.log('⚠️ Wake lock was released (e.g., tab blurred or system override)');        wakeLock = null;      });    } else {      console.warn('❌ Wake Lock API not supported');    }  } catch (err) {    console.error('❌ Failed to acquire wake lock:', err.name, err.message);  }}// ✅ 安全释放唤醒锁async function releaseWakeLock() {  if (!wakeLock) return;  try {    await wakeLock.release(); // ✅ 直接 await release() —— 它本身返回 Promise    console.log('✅ Wake lock released');    wakeLock = null;  } catch (err) {    console.warn('⚠️ Release failed (may already be released):', err.message);  }}// 示例：用户点击按钮触发document.getElementById('lock-btn').addEventListener('click', requestWakeLock);document.getElementById('unlock-btn').addEventListener('click', releaseWakeLock);

? 关键注意事项：

• 必须在安全上下文（HTTPS 或 localhost）中运行，否则 navigator.wakeLock 为 undefined；
• 需用户手势触发（如 click、tap），不可在页面加载时自动请求，否则会被浏览器拒绝；
• wakeLock.release() 是异步方法，应 await 调用，而非忽略其返回值；
• 不要对未 await 的 Promise（如 set_wakelock() 返回值）直接调用 .release() —— 这是原始错误的根源；
• 建议始终检查 navigator.wakeLock 是否可用，并捕获 NotAllowedError（权限拒绝）、NotSupportedError 等异常；
• 在单页应用中，建议在页面卸载（beforeunload）或标签页失焦（visibilitychange）时自动释放锁，避免资源泄漏。

通过遵循上述模式，即可在 Windows Chrome 等支持 Wake Lock 的桌面浏览器中，稳定、可维护地控制屏幕唤醒行为。