WakeLock API在iOS Safari中无法使用，Windows/Android平台正常

核心原因 #

Safari对WakeLock API的权限校验比其他浏览器更严格，必须同时满足以下条件才会授予权限：

• 必须由真实用户主动交互触发（脚本模拟的点击如button.click()不被认可）
• 页面处于前台活跃状态（document.visibilityState为visible）
• 页面运行在HTTPS环境（本地localhost开发环境除外）
• iOS版本需在16.4及以上（低于此版本完全不支持WakeLock API）

修正后的代码实现 #

HTML（添加真实可点击的按钮）

<button id="enableWakeLock">开启屏幕常亮</button>

JavaScript

let wakeLock = null;

// 请求WakeLock的核心函数
const requestWakeLock = async () => {
  // 先判断浏览器是否支持
  if (!('wakeLock' in navigator)) {
    console.log('当前浏览器不支持WakeLock API');
    return;
  }

  try {
    wakeLock = await navigator.wakeLock.request('screen');
    console.log('WakeLock已激活');
    
    // 监听WakeLock自动释放事件
    wakeLock.addEventListener('release', () => {
      console.log('WakeLock已释放');
    });
  } catch (err) {
    console.error(`${err.name}: ${err.message}`);
  }
};

// 页面回到前台时重新请求WakeLock
document.addEventListener('visibilitychange', () => {
  if (wakeLock && document.visibilityState === 'visible') {
    requestWakeLock();
  }
});

// 绑定真实用户点击事件（必须手动点击）
document.getElementById('enableWakeLock').addEventListener('click', requestWakeLock);

关键注意事项 #

• 禁止用脚本自动触发请求（比如button.click()），必须由用户手动点击按钮触发
• iOS 16.4以下版本无WakeLock支持，需提供降级提示（比如提示用户升级系统）
• 部署到线上时必须使用HTTPS协议，否则权限请求会被拒绝

内容的提问来源于stack exchange，提问作者Shriyank Mendpara