The Screen Wake Lock API is now supported in all browsers

Screen Wake Lock API reaches cross-browser support

As of May 2024, the Screen Wake Lock API is available in every major browser: Chrome, Safari, and Firefox. This gives web developers a standards-based way to keep a device's display active while users are engaged with their applications.

The API opens up practical scenarios that were previously awkward to handle:

• Presentation tools and slideshow apps can now prevent the screen from dimming mid-talk.
• Recipe and how-to sites can keep the display on so users don't have to touch the screen with messy hands while following instructions.

For a complete walkthrough of the API and its edge cases, refer to the official guide, "Stay awake with the Screen Wake Lock API." The typical implementation pattern is straightforward:

// 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);

With consistent support now in place across browsers, the Screen Wake Lock API removes a source of friction for both developers and end users. It is another small step toward web applications that behave as reliably as their native counterparts, regardless of which browser someone happens to be using.