NoSleep.js vs @awaketab/wake

Side by side

When NoSleep.js was written, a silent video was the only way to keep most phones awake. The Screen Wake Lock API arrived in Chrome and Edge 84 (July 2020), Safari 16.4 (March 2023) and Firefox 126 (May 2024). For the API itself, see Screen Wake Lock API: a practical guide with error handling. Facts about NoSleep.js come from its source on GitHub. Rows marked Same are real ties.

When NoSleep.js is the better choice

It is a good library. In these cases we would send you there.

1. 1 It already works and you only show an on/off switch On current browsers it makes the same API call. Switching buys you status reporting, not a stronger lock.
2. 2 You need a package from npm today @awaketab/wake isn't published yet, and some teams can't vendor source.

When @awaketab/wake is the better choice

These are the jobs @awaketab/wake was built for.

1. 1 Your users see the status A kiosk or dashboard that says "awake" should only say it while the lock holds. held means a live lock, and fallback means the video is really playing.
2. 2 You need to know why it failed A missing allow="screen-wake-lock" on an iframe, a hidden page and an http origin each get their own advice code.
3. 3 You use a framework @awaketab/wake/react, /preact and /vue export a useWakeLock() hook that returns the state with request and release.

The same job in code

NoSleep.js:

import NoSleep from 'nosleep.js';const noSleep = new NoSleep();startButton.addEventListener('click', () => {  noSleep.enable().catch((err) => console.warn(err.name));});stopButton.addEventListener('click', () => noSleep.disable());

@awaketab/wake:

import { createWakeLock } from '@awaketab/wake';const lock = createWakeLock();lock.on('change', ({ from, to, reason, advice }) => {  console.log(`${from} -> ${to} (${reason})`, advice ?? '');});startButton.addEventListener('click', () => lock.request());stopButton.addEventListener('click', () => lock.release());

request() does not throw. It resolves with the resulting state: held when the browser grants the lock, fallback when the video is playing, denied or unsupported when neither worked. When a state changes for a reason you can act on, advice names it, for example hidden_document, permissions_policy, iframe_no_allow or insecure_context.

The @awaketab/wake library page has a live demo of every state.