Screen Wake Lock

Your device may not fully support this feature

This feature works in Safari on iOS but not (yet) for installed web apps.

The Screen Wake Lock API enables web apps to prevent devices from dimming or locking the screen when the app needs to keep running.

Demo

Check the box below to prevent your screen from locking. The wake lock will be released when you minimize the app or focus another browser tab on desktop. To restore the wake lock when you focus the app or tab, check the "Restore wake lock on visibility change" box.

Prevent your screen from locking Restore wake lock on visibility change const wakeLockSwitch = document.querySelector('#wake-lock'); const restoreSwitch = document.querySelector('#restore-wake-lock'); let wakeLock = null; const requestWakeLock = async (onVisibilityChange = false) => { try { wakeLock = await navigator.wakeLock.request('screen'); wakeLock.addEventListener('release', () => { console.log('Wake Lock was released'); wakeLockSwitch.checked = false; wakeLock = null; }); console.log('Wake Lock is active'); // if the wake lock is restored on visibility change, check the checkbox if(onVisibilityChange) { wakeLockSwitch.checked = true; } } catch(err) { console.error(err); } }; const releaseWakeLock = () => { console.log('releasing wakeLock'); wakeLock.release(); wakeLock = null; }; wakeLockSwitch.addEventListener('change', ({detail}) => { const {checked} = detail; checked ? requestWakeLock() : releaseWakeLock(); }); const handleVisibilityChange = async () => { // add a delay to show the wake lock is restored on visibility change // so the user can see the checkbox is checked if (supported && restoreSwitch.checked && document.visibilityState === 'visible') { setTimeout(async () => { await requestWakeLock(true); }, 1000); } }; document.addEventListener('visibilitychange', handleVisibilityChange);

Documentation

Screen Wake Lock API on web.dev

Browser support

The Screen Wake Lock API is available from Chrome 84.