本文详解在桌面端 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 的桌面浏览器中，稳定、可维护地控制屏幕唤醒行为。
