所有浏览器现在都支持 Screen Wake Lock API

Screen Wake Lock API 现已正式登陆所有主流浏览器,包括 Chrome、 Safari 和 Firefox。利用此 API,您可以控制设备的屏幕唤醒行为, 确保与 Web 应用的交互不会中断。

浏览器支持

  • Chrome:84。 <ph type="x-smartling-placeholder">
  • 边缘:84。 <ph type="x-smartling-placeholder">
  • Firefox:126。 <ph type="x-smartling-placeholder">
  • Safari:16.4. <ph type="x-smartling-placeholder">

来源

现在可以实现以下两个用例。

  • 流畅的演示:该 API 可防止屏幕变暗 演示或幻灯片应用,这样演示者现在就可以 专业经验。
  • 食谱网站:该 API 可使屏幕保持开启状态,因此用户无需担心 屏幕关闭时,手上满是面团 按照烘焙食谱烹饪食物

有关使用 API 的完整详情,请查看 使用 Screen Wake Lock API 不锁定屏幕。 以下代码段展示了最常见的互动。

// The wake lock sentinel.
let wakeLock = null;

// Function that attempts to request a screen wake lock.
const requestWakeLock = async () => {
  try {
    wakeLock = await navigator.wakeLock.request();
    wakeLock.addEventListener('release', () => {
      console.log('Screen Wake Lock released:', wakeLock.released);
    });
    console.log('Screen Wake Lock released:', wakeLock.released);
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

// Request a screen wake lock…
await requestWakeLock();
// …and release it again after 5s.
window.setTimeout(() => {
  wakeLock.release();
  wakeLock = null;
}, 5000);

Screen Wake Lock API 的广泛采用是 Web 开发社区。得益于其多样化的应用和广泛的支持, 就能打造更可靠、更完善的 Web 体验,最终受益 不同浏览器上的用户。祝您畅享更流畅、无干扰的网络体验!