Prevent the device screen from dimming or locking using the Screen Wake Lock API.
Toggle the wake lock to keep your screen awake. The lock is automatically re-acquired when the page regains visibility.
Drop in the web component and wrap any clickable element. The <wake-lock> element toggles on click and exposes an active attribute.
<!-- 1. Add the component -->
<wake-lock>
<button>Toggle Wake Lock</button>
</wake-lock>
<script src="wake-lock.js"></script>
<!-- 2. Listen for events -->
<script>
const wl = document.querySelector('wake-lock');
wl.addEventListener('locked', () => {
console.log('Screen will stay awake');
});
wl.addEventListener('released', () => {
console.log('Wake lock released');
});
</script>Properties, methods, events, and CSS hooks.
// Properties
wl.active // boolean — whether the lock is held
wl.supported // boolean — whether the API is available
// Methods
wl.request() // acquire the wake lock
wl.release() // release the wake lock
// Events
'locked' // fired when lock is acquired
'released' // fired when lock is released
'error' // fired on failure (detail: error)
'unsupported' // fired if the API is not available
// CSS — style based on lock state
wake-lock[active] { /* lock is held */ }
wake-lock:not([active]) { /* lock is not held */ }