wake lock api 保持屏幕常亮需在用户交互中申请 screen 类型锁,先检测 navigator.wakelock 支持性及权限状态,通过 click 等手势触发 request('screen'),妥善管理锁生命周期并捕获 notallowederror、notsupportederror 等异常。

用 Wake Lock API 保持屏幕常亮,核心是申请 screen 类型的 wake lock,且必须在用户交互(如点击、触摸)触发的上下文中调用,否则会失败。
确认浏览器支持并检查权限
Wake Lock API 并非所有浏览器都支持,需先检测 navigator.wakeLock 是否存在,并建议检查权限状态(虽然目前多数浏览器不强制要求显式权限,但未来可能变化):
- 使用
if ('wakeLock' in navigator)判断基础支持 - 可选调用
navigator.permissions.query({ name: 'screen-wake-lock' })获取当前权限状态(返回'granted'、'prompt'或'denied')
在用户操作中申请锁(关键!)
必须由明确的用户手势(如 click、touchstart)触发,不能在页面加载、定时器或异步回调中直接调用,否则会抛出 NotAllowedError:
- 给按钮绑定点击事件:
document.getElementById('keepAwake').addEventListener('click', requestWakeLock) - 在事件处理函数中调用
navigator.wakeLock.request('screen'),返回 Promise - 成功后得到一个
WakeLockSentinel实例,可用于后续释放
管理锁的生命周期
拿到锁后要妥善管理:避免长时间持有、监听释放事件、提供手动释放入口:
- 保存锁引用(如
let wakeLock = null),防止重复申请 - 监听
sentinel.onrelease处理自动释放(例如系统休眠、用户手动关闭屏幕) - 提供“停止常亮”按钮,调用
wakeLock.release()并置空引用 - 页面卸载前建议主动释放:
window.addEventListener('beforeunload', () => wakeLock?.release())
处理常见错误和降级方案
不是每次申请都能成功,需捕获异常并给出反馈:
- 捕获
NotAllowedError:说明未在用户手势中调用,应检查触发时机 - 捕获
NotSupportedError:浏览器不支持,可降级为提示用户手动保持唤醒(如播放无声音频、轮询等 hack 方式,但不推荐) - 捕获其他错误(如
SecurityError):通常因页面非安全上下文(非 HTTPS)导致,需确保部署在 HTTPS 环境
大量免费API接口:立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游,为数据API应用能力赋能!











