如何防止浏览网页时设备休眠？适配Chrome、Safari及移动端

需求目标 #

实现网页浏览时阻止设备自动休眠，需覆盖iOS（Safari）、Android（Chrome）两大平台的主流浏览器。

现有方案分析 #

1. 原生唤醒锁API（Wake Lock API） #

• 浏览器原生支持，实现逻辑简洁高效
• 局限性：iOS Safari当前支持度不足，Android Chrome需确保版本≥84
• 实际验证：已有开发者成功在Android Chrome环境下稳定使用，但iOS场景暂无法作为核心依赖

2. NoSleep.js #

• 实现原理：通过播放隐藏的静音视频维持设备唤醒状态
• 现状：曾是业内广泛应用的方案，但项目已4年未更新，遗留大量未处理问题，无官方维护
• 兼容性：Android Chrome仍可生效，但长期来看存在失效风险

适配策略建议 #

1. 优先采用原生API #

针对Android Chrome（版本≥84），直接使用Wake Lock API，代码示例：

let wakeLock = null;

async function requestWakeLock() {
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    wakeLock.addEventListener('release', () => {
      console.log('唤醒锁已释放');
    });
  } catch (err) {
    console.error(`请求唤醒锁失败: ${err.message}`);
  }
}

// 必须在用户交互事件中触发（如按钮点击）
document.querySelector('#enable-wake').addEventListener('click', requestWakeLock);

2. 降级兼容NoSleep.js #

针对iOS Safari及低版本Android Chrome，引入NoSleep.js做兼容处理，注意需在用户交互中初始化：

const noSleep = new NoSleep();

// 用户点击时启用唤醒
document.querySelector('#enable-wake').addEventListener('click', () => {
  noSleep.enable();
});

// 关闭唤醒
document.querySelector('#disable-wake').addEventListener('click', () => {
  noSleep.disable();
});

关键注意事项 #

• 所有唤醒操作必须由用户主动交互触发（点击、触摸等），浏览器会拦截无交互触发的唤醒请求
• 定期跟进浏览器版本更新，当iOS Safari完善Wake Lock API支持后，可逐步移除NoSleep.js依赖

内容的提问来源于stack exchange，提问作者Jack McKay Fletcher