Js屏幕常亮设置指南：Wake Lock API 详细教程
你是否遇到过这样的情况：用户正在你的网页上看视频教程，或者用你的工具做演示，屏幕却突然暗了、甚至锁屏了？这不仅打断体验，还可能让人烦躁。好在，现代浏览器提供了一个实用的功能：Wake Lock api。它能让开发者用 JavaScript 告诉设备：“这个页面很重要，请保持屏幕亮着！”
Wake Lock API 有什么用？
简单说，这个 API 就是阻止屏幕自动变暗或锁屏的开关。它特别适合需要用户持续关注屏幕的场景：
看视频或直播： 用户专心看球赛直播或电影，不希望屏幕熄灭。
演示或阅读： 做幻灯片展示、阅读长篇文章或电子书时。
导航或健身： 使用网页版导航应用，或者跟着健身教程运动。
实时数据监控： 显示股票行情、服务器状态等需要持续刷新的信息。
游戏： 一些基于浏览器的游戏需要用户持续操作或观看。
重要提醒：兼容性与安全限制
在你急着用之前，有几件事必须知道：
HTTPS 是必须的： 这个 API 只对通过 HTTPS 安全连接加载的网页有效。本地开发环境 (http://localhost) 通常也可以使用。
浏览器支持度： 主流浏览器的新版本基本都支持了，但旧版本不行。具体支持情况如下（截至 2024 年中）：
怎么用 JavaScript 保持屏幕常亮？
核心步骤是：请求一个“屏幕唤醒锁”，需要时释放它，并处理好页面状态变化。下面是详细做法：
1. 请求屏幕唤醒锁
你需要使用 navigator.wakeLock.request('screen') 这个方法。它会返回一个 Promise（异步操作结果），所以我们通常用 async/await 或 .then/.catch 来处理。
let screenLock = null; // 用于保存唤醒锁对象
async function requestWakeLock() {
try {
// 1. 检查浏览器是否支持 Wake Lock API
if ('wakeLock' in navigator) {
// 2. 请求屏幕唤醒锁
screenLock = await navigator.wakeLock.request('screen');
console.log('屏幕唤醒锁已激活！屏幕不会自动熄灭了。');
// 3. 监听释放事件（可选，了解锁何时失效）
screenLock.addEventListener('release', () => {
console.log('屏幕唤醒锁已被释放');
});
} else {
console.warn('抱歉，你的浏览器不支持屏幕唤醒锁功能。');
// 这里可以给用户一个提示，比如显示一个消息或备用方案（如提醒用户手动设置设备常亮）
}
} catch (err) {
// 4. 处理请求失败
console.error('获取屏幕唤醒锁失败:', err);
// 失败原因可能是：电量过低、省电模式开启、用户拒绝权限（部分设备可能需要）、标签页不可见等。
}
}
// 在需要保持屏幕常亮时调用这个函数，例如播放视频按钮点击后
requestWakeLock();关键点解释：
try...catch 很重要： 请求可能会因为各种原因失败（设备电量低、开了省电模式、标签页被切到后台等）。用 try...catch 能捕获错误，避免程序崩溃，也方便调试或提示用户。
权限： Wake Lock API 通常不需要用户明确点击授权（不像摄像头麦克风）。但系统可能会基于电量、省电模式或标签页可见性自动拒绝请求，这本质上是设备层面的权限控制。
保存 screenLock 对象： 你需要把这个对象存起来（如 screenLock 变量），后面释放锁时要用到它。
2. 释放屏幕唤醒锁
当你的应用不再需要屏幕常亮时（比如视频暂停或播放结束），应该主动释放锁，节省设备电量。这很关键！
function releaseWakeLock() {
if (screenLock !== null && screenLock.released === false) {
screenLock.release()
.then(() => {
screenLock = null;
console.log('屏幕唤醒锁已手动释放');
});
}
}
// 在需要让屏幕可以自动熄灭时调用这个函数，例如暂停视频
releaseWakeLock();3. 处理页面隐藏/显示（重要！）
浏览器有个重要规则：当用户切换标签页、最小化浏览器窗口或锁屏时，当前页面的唤醒锁会被自动释放。 这是为了省电。当用户再次切回这个页面时，屏幕又会恢复自动熄灭。
如果你希望用户一回来，屏幕又自动保持常亮（比如看视频时切出去查个消息再回来），你需要监听页面的可见性变化事件 (visibilitychange)，并在页面重新可见时重新请求唤醒锁。
// 监听页面可见性变化
document.addEventListener('visibilitychange', async () => {
// 当页面重新变得可见（用户切换回标签页）且我们之前持有锁（或需要锁）时
if (document.visibilityState === 'visible' && screenLock === null) {
await requestWakeLock(); // 再次调用我们之前写的请求锁函数
}
// 注意：当页面隐藏时，锁会被浏览器自动释放，我们不需要手动释放，但可以把 screenLock 设为 null 标记一下（在 release 事件或这里处理）
});完整使用示例
假设一个简单的视频播放页面：
const videoPlayer = document.getElementById('myVideo');
let screenLock = null;
async function requestWakeLock() {
try {
if ('wakeLock' in navigator) {
screenLock = await navigator.wakeLock.request('screen');
console.log('屏幕常亮开启');
}
} catch (err) {
console.error('保持屏幕常亮失败:', err);
alert('无法保持屏幕常亮：' + err.message); // 简单提示用户
}
}
function releaseWakeLock() {
if (screenLock !== null) {
screenLock.release().then(() => {
screenLock = null;
console.log('屏幕常亮已关闭');
});
}
}
// 播放视频时请求锁
videoPlayer.addEventListener('play', requestWakeLock);
// 暂停或结束视频时释放锁
videoPlayer.addEventListener('pause', releaseWakeLock);
videoPlayer.addEventListener('ended', releaseWakeLock);
// 处理用户切换标签页后返回的情况
document.addEventListener('visibilitychange', async () => {
if (document.visibilityState === 'visible' && !videoPlayer.paused && screenLock === null) {
// 页面可见、视频在播放中、且当前没有锁，就重新请求
await requestWakeLock();
}
});总结与最佳实践
检查兼容性： 使用前先判断 'wakeLock' in navigator。
务必用 HTTPS： 本地开发可用 localhost。
始终处理错误 (try...catch)： 请求可能因电量、省电模式或页面不可见而失败。
及时释放锁 (release())： 不需要时主动释放，省电是美德。
处理页面可见性 (visibilitychange)： 用户切回页面时，如果需要，记得重新请求锁。
用户告知： 对于需要长时间常亮的应用（如导航），考虑告知用户设备可能耗电稍快。
优雅降级： 对于不支持的浏览器，可以提示用户“请确保设备未设置自动锁屏”作为备用方案。
使用 JavaScript 的 Wake Lock API 可以显著提升用户在特定网页上的体验，避免不必要的屏幕熄灭干扰。遵循上面的指南和代码示例，你就能轻松实现这个功能。记住，合理使用，及时释放，善待用户设备的电量！
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
