> 这篇文章专门讲解在桌面端 Chrome 环境下，如何使用 `navigator.wakeLock` 申请并安全释放屏幕唤醒锁的完整流程。核心目标是帮你避开那个令人头疼的 `wakeLock.release is not a function` 报错——说白了，就是搞混了 Promise 对象与真正的 WakeLock 实例。 Web Wake Lock API 的诞生，让网页在用户停留在活跃标签页时能够阻止设备进入休眠（比如屏幕变暗或系统直接睡眠），视频播放、PPT 演示、远程监控等场景都离不开它。不过，它的调用方式隐藏了一个容易踩坑的地方：`navigator.wakeLock.request('screen')` 返回的是一个 **Promise**，而不是可直接使用的 WakeLock 对象。如果你拿到 Promise 后直接调用 `.release()`，必然会报 `is not a function`——这就太冤了。 ✅ 正确做法其实很简单：**先 `await` 获取到实际的 WakeLock 实例，再对该实例调用 `.release()`**。下面这段代码是经过实战验证的健壮写法： ```javascript let wakeLock = null; // ✅ 申请屏幕唤醒锁（必须在用户交互或安全上下文中调用） async function requestWakeLock() { try { if ('wakeLock' in navigator) { wakeLock = await navigator.wakeLock.request('screen'); console.log('✅ 成功获取屏幕唤醒锁'); // 可选：监听释放事件（比如被系统强制释放时） wakeLock.addEventListener('release', () => { console.log('⚠️ 唤醒锁已被释放（例如标签页失去焦点或系统覆盖）'); wakeLock = null; }); } else { console.warn('❌ 当前浏览器不支持 Wake Lock API'); } } catch (err) { console.error('❌ 获取唤醒锁失败:', err.name, err.message); } } // ✅ 安全释放唤醒锁 async function releaseWakeLock() { if (!wakeLock) return; try { await wakeLock.release(); // ✅ 直接 await release() —— 它本身返回 Promise console.log('✅ 唤醒锁已成功释放'); wakeLock = null; } catch (err) { console.warn('⚠️ 释放失败（可能已自动释放）:', err.message); } } // 示例：用户点击按钮触发 document.getElementById('lock-btn').addEventListener('click', requestWakeLock); document.getElementById('unlock-btn').addEventListener('click', releaseWakeLock); ``` 关键注意事项： - **必须在安全上下文（HTTPS 或 localhost）中运行**，否则 `navigator.wakeLock` 会直接返回 `undefined`，连调用都无法进行； - **必须由用户手势触发**（比如点击、触摸），页面一加载就自动请求很可能被浏览器拒绝； - `wakeLock.release()` 是一个异步方法，请务必使用 `await` 调用，不要偷懒忽略返回值； - 千万不要对未 `await` 的 Promise（比如某个 `requestWakeLock()` 的返回值）直接调用 `.release()` —— 这是绝大多数 `is not a function` 错误的根源； - 建议始终先检查 `navigator.wakeLock` 是否可用，并捕获 `NotAllowedError`（权限拒绝）、`NotSupportedError` 等异常； - 在单页应用中，最好在页面卸载（`beforeunload`）或标签页失焦（`visibilitychange`）时自动释放锁，以避免资源泄漏。 按照上面这套模式来写，在 Windows Chrome 这类支持 Wake Lock 的桌面浏览器里，就能稳稳当当地控制屏幕唤醒行为，后续维护也更加省心。