Screen Wake Lock API — interactive playground

<div class="pg">
    <h1 class="pg-title">🔒 Does your screen stay awake?</h1>
    <p class="pg-sub">
      A mock phone screen locks itself every few seconds unless something is holding it open.
      Request a real <code>navigator.wakeLock.request("screen")</code> lock below, then switch
      to another tab (or another app) for a moment and come back — watch the log catch the
      browser silently releasing it, and re-acquiring it for you.
    </p>

<div id="unsupportedBanner" class="banner info" style="display:none;">
      This browser doesn't expose <code>navigator.wakeLock</code>. The controls below are
      disabled — this is exactly the branch a real feature-detect falls back on.
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Mock screen</div>
      <div class="screen-mock" id="screenMock">
        <div class="screen-face" id="screenFace">🌑</div>
        <div class="screen-caption" id="screenCaption">Idle — will lock on its own</div>
        <div class="timer-ring" id="timerText">auto-locks in 6s without a wake lock</div>
      </div>
      <p class="hint">This box isn't the real screen — no demo page can dim your actual
        display. It's a stand-in that "locks" every 6 seconds by itself, exactly like a phone
        would, so you can watch the wake lock hold it open.</p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Request / release</div>
      <div class="btn-row">
        <button class="btn primary" id="requestBtn">Request wake lock</button>
        <button class="btn ghost" id="releaseBtn" disabled>Release</button>
      </div>
      <p class="status" id="statusLine">
        <span class="dot" id="statusDot"></span>
        <span id="statusText">No lock requested yet</span>
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> Try it: switch tabs</div>
      <p class="hint">
        With the lock active, switch to a different browser tab for a couple of seconds, then
        come back. The log below will show the browser auto-releasing the lock the instant this
        tab was hidden, and this page re-requesting it the moment it became visible again —
        the exact behavior the post walks through.
      </p>
      <div class="log output" id="log">Click "Request wake lock" to begin…</div>
    </div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.