@awaketab/wake: a wake lock that says when it works
@awaketab/wake keeps a web page's screen from dimming and tells you the truth about it: seven states,
a reason and an advice code on every change, and held only while the browser really holds the lock.
Zero dependencies, ≤ 3.4 KB gzipped with the fallback videos inlined, MIT. The maintained replacement for NoSleep.js.
npm install @awaketab/wake npm package coming soon Live state machine
Running awaketab-wake.iife.js v1.0.0, the build that will be published to npm.
state: idle Uses this browser’s own Screen Wake Lock API. Switch tabs for real to see it pause. Simulate tab hidden and visible work in the second scenario. An injected lock whose “tab hidden” releases it, so lost and the retry are visible. An injected lock that rejects with NotAllowedError, as Firefox does at 5 % battery or less while not charging. Simulate tab hidden and visible work in the second scenario. No Wake Lock API, so Request starts the inlined video fallback from your click. Simulate tab hidden and visible work in the second scenario.
-
idleReady -
requestingStarting… -
heldScreen awake -
lostPaused — tab hidden -
deniedBlocked — here's the fix -
unsupportedTap to use the fallback -
fallbackAwake via video fallback
release() returns to idle from any state. States you have visited stay lit.
Transition log
newest first · last 12No transitions yet. Press Request to ask for a lock.
Use it
ESM, for bundlers. Every change event carries the state it left, the state it entered, a reason and an advice code.
CDN, no build step. The IIFE build puts AwakeTabWake on the page.
Each adapter is < 400 B and imports the core, so you get one lock instance.
Each adapter is < 400 B and imports the core, so you get one lock instance.
Each adapter is < 400 B and imports the core, so you get one lock instance.
main.js import { createWakeLock } from '@awaketab/wake'; const lock = createWakeLock();lock.on('change', ({ from, to, reason, advice }) => { pill.textContent = to; // one of the seven states hint.textContent = advice ?? ''; // e.g. 'iframe_no_allow', 'hidden_document'});start.addEventListener('click', () => lock.request()); // a tap allows the fallbackstop.addEventListener('click', () => lock.release());index.html <!-- Once the npm package is published --><script src="https://cdn.jsdelivr.net/npm/@awaketab/wake@1/dist/awaketab-wake.iife.js"></script><script> const lock = AwakeTabWake.createWakeLock(); document.querySelector('#start').addEventListener('click', () => lock.request());</script>KeepAwake.jsx import { useWakeLock } from '@awaketab/wake/react'; export function KeepAwake() { const { state, request, release } = useWakeLock(); return state === 'held' || state === 'fallback' ? <button onClick={release}>Screen awake · Stop</button> : <button onClick={request}>Keep screen on</button>;}KeepAwake.jsx import { useWakeLock } from '@awaketab/wake/preact'; export function KeepAwake() { const { state, request, release } = useWakeLock(); return state === 'held' || state === 'fallback' ? <button onClick={release}>Screen awake · Stop</button> : <button onClick={request}>Keep screen on</button>;}KeepAwake.vue <script setup>import { useWakeLock } from '@awaketab/wake/vue';const { state, request, release } = useWakeLock();</script> <template> <button v-if="state === 'held' || state === 'fallback'" @click="release">Screen awake · Stop</button> <button v-else @click="request">Keep screen on</button></template>Compared with NoSleep.js
Both use the native Wake Lock when it exists. The difference is what you are told when it does not work.
@awaketab/wake NoSleep.js 0.12.0 isEnabled boolean classifyDenial() advice codes None - Last release
wakeMaintained; semverNoSleep.js16 December 2020- Native Wake Lock
wakeYes, firstNoSleep.jsYes (when present)- State reporting
wakeSeven states + change events with reason and adviceNoSleep.jsisEnabledboolean- Denial diagnosis
wakeclassifyDenial()advice codesNoSleep.jsNone- Fallback
wakeInlined 1-frame video, gesture-aware, pauses when hiddenNoSleep.jsLooping video, always on- Size (gzip)
wake≤ 3.4 KB, fallback includedNoSleep.js≈ 3.2 KB- TypeScript · SSR
wakeNative · inert on the serverNoSleep.jsCommunity typings · no- Adapters
wakeReact, Preact, Vue (< 400 B each)NoSleep.jsNo
A wake lock keeps the display on while the page is visible. Nothing more. It does not keep a hidden tab awake, does not stop a laptop sleeping when the lid closes, and does not keep Teams or Slack "Available" (presence follows input, and this library never fakes input).