Published: May 14, 2024
The Screen Wake Lock API has officially landed in all major browsers—Chrome, Safari, and Firefox. This API lets you control a device's screen wake behavior, ensuring uninterrupted interactions with web applications.
The following two use cases are now possible.
- Seamless presentations: The API prevents screens dimming in web-based presentation or slideshow apps, so presenters can now deliver a polished and professional experience.
- Recipe sites: The API can keep the screen on, so users don't need to worry about the screen turning off while their hands are full of dough when following a baking recipe.
For full details about using the API, check out Stay awake with the Screen Wake Lock API. The following code snippet shows the most common interactions.
// 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);
The universal adoption of the Screen Wake Lock API is a positive step forward for the web development community. With its diverse applications and widespread support, you can create more reliable and polished web experiences, ultimately benefiting users across different browsers. Cheers to a smoother, interruption-free web!