@awaketab/wake: the honest wake lock library

Use it

ESM (bundlers)

import { createWakeLock } from '@awaketab/wake';

const lock = createWakeLock();
lock.on('change', ({ from, to, reason, advice }) => {
  pill.textContent = to;            // idle · requesting · held · lost · denied · unsupported · fallback
  hint.textContent = advice ?? '';  // e.g. 'battery_saver', 'iframe_no_allow'
});
start.addEventListener('click', () => lock.request()); // a gesture keeps the video fallback available
stop.addEventListener('click', () => lock.release());

CDN (no build step)

<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>

React, Preact and Vue

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>;
}

Compared with NoSleep.js