Screen Wake Lock API
The Screen Wake Lock API provides a way to prevent devices from dimming or locking the screen when an application needs to keep running. This is essential for use cases like recipe apps, presentation tools, or QR code tickets where the user might not interact with the screen for a while but needs it to stay on.
1. Requesting a Wake Lock
To request a wake lock, you use the navigator.wakeLock.request() method. It returns a Promise that resolves to a WakeLockSentinel object.
let wakeLock = null;
async function requestWakeLock() {
try {
wakeLock = await navigator.wakeLock.request('screen');
console.log('Wake Lock is active!');
wakeLock.addEventListener('release', () => {
console.log('Wake Lock was released');
});
} catch (err) {
console.error(`${err.name}, ${err.message}`);
}
}
requestWakeLock();2. Releasing the Lock
You can manually release the lock using the release() method on the sentinel object.
function releaseWakeLock() {
if (wakeLock !== null) {
wakeLock.release();
wakeLock = null;
}
}3. Automatic Release and Re-acquisition
The browser automatically releases the wake lock when the page loses visibility (e.g., user switches tabs or minimizes the window).
To ensure the screen stays on when the user returns to your tab, you must listen for the visibilitychange event and re-request the lock.
document.addEventListener('visibilitychange', async () => {
if (wakeLock !== null && document.visibilityState === 'visible') {
await requestWakeLock();
}
});programming/javascript/vanilla/javascript programming/javascript/vanilla/page-visibility-api programming/javascript/vanilla/promises-async-await