记录一些发现的知识

用 JavaScript 阻止屏幕睡眠

H5 端有需要保持手机屏幕常亮的需求,早在 chrome 85 中就已经支持的 Web API，截止到2024年3月18号时，Safari 仍不支持，尽管如此，在安卓端我们还是能调用这个 API 来节省设备电池电量（相对于 NoSleep.js 来说），ios 端使用 polyfill 的方式，在将来 Safari 支持该 API 后移除即可

Wake Lock 可防止屏幕关闭、变暗或锁定，仅适用于活动的选项卡/窗口，这可以防止后台选项卡使您的设备保持唤醒状态，也提供了函数以随时通过代码手动释放

调用 Wake Lock 之前，我们首先需要检查当前浏览器中是否存在该功能。我们可以使用以下简单函数来做到这一点。

const canWakeLock = () => 'wakeLock' in navigator;

请求唤醒锁

下面的示例演示如何请求 WakeLockSentinel 对象。WakeLock.request 方法是基于 Promise 的，因此我们可以创建一个异步函数。

const canWakeLock = () => 'wakeLock' in navigator;
let wakeLock = null;
const requestWakeLock = async() => {
  try {
    if (canWakeLock()) {
      wakeLock = await navigator.wakeLock.request('screen');
      console.log('Wake Lock is active!');
    }
  } catch (error) {
    console.log(`${err.name}, ${err.message}`);
  }
};
requestWakeLock()

释放唤醒锁

 wakeLock.release().then(()=> wakeLock = null);

侦听唤醒锁释放

如因任何原因（例如离开活动窗口/选项卡）而释放唤醒锁，将会触发 release 监听函数。

const canWakeLock = () => 'wakeLock' in navigator;
let wakeLock = null;
const requestWakeLock = async() => {
  try {
    if (canWakeLock()) {
      wakeLock = await navigator.wakeLock.request('screen');
      console.log('Wake Lock is active!');
      // 监听release事件
      wakeLock.addEventListener('release', () => {
        releaseWakeLock()
      });
    }
  } catch (error) {
    console.log(`${err.name}, ${err.message}`);
  }
};

const releaseWakeLock = () => {
  wakeLock && wakeLock.release().then(()=> wakeLock = null);
};
requestWakeLock()

重新获取唤醒锁

以下代码在文档的可见性发生更改并释放唤醒锁时重新获取唤醒锁。

document.addEventListener('visibilitychange', async () => {
  if (wakeLock !== null && document.visibilityState === 'visible') {
      requestWakeLock()
  }
});

完整代码

const canWakeLock = () => 'wakeLock' in navigator;
let wakeLock = null;
const requestWakeLock = async() => {
  try {
    if (canWakeLock()) {
      wakeLock = await navigator.wakeLock.request('screen');
      console.log('Wake Lock is active!');
       // 监听release事件
      wakeLock.addEventListener('release', () => {
        releaseWakeLock()
      });
    }
  } catch (error) {
    console.log(`${err.name}, ${err.message}`);
  }
};

const releaseWakeLock = () => {
  wakeLock && wakeLock.release().then(()=> wakeLock = null);
};
document.addEventListener('visibilitychange', async () => {
  if (wakeLock !== null && document.visibilityState === 'visible') {
      requestWakeLock()
  }
});
requestWakeLock()

参考

原创作者 => 你知道用 JavaScript 阻止屏幕睡眠有多难吗？