Page Visibility API — interactive playground

<div class="pg">
    <h1 class="pg-title">👀 Is anyone still looking at this tab?</h1>
    <p class="pg-sub">
      This page polls a mock endpoint every 2 seconds while it thinks someone can see it,
      using <code>document.visibilityState</code> and the <code>visibilitychange</code> event —
      not <code>window.blur</code>/<code>focus</code>. Switch to another tab (or minimize this
      window) for 5–10 seconds, then come back, to watch it react in real time.
    </p>

<div class="instructions">
      <strong>Try it:</strong> click <em>Start polling</em> below, then switch to a different
      browser tab for a few seconds. Come back and check the log — it will show exactly when
      polling stopped and resumed, with no guesswork.
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Controls</div>
      <div class="btn-row">
        <button class="btn primary" id="startBtn">Start polling</button>
        <button class="btn ghost" id="resetBtn">Reset</button>
      </div>
      <p class="hint">Once started, a fake request fires every 2 seconds — but only while
        <code>document.visibilityState === "visible"</code>.</p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Live state</div>
      <p class="badge">
        <span class="dot good" id="dot"></span>
        <span id="visText">Not started</span>
      </p>

<div class="stats">
        <div class="stat">
          <div class="num" id="pollCount">0</div>
          <div class="lbl">requests sent</div>
        </div>
        <div class="stat">
          <div class="num" id="hiddenSeconds">0.0s</div>
          <div class="lbl">total time hidden</div>
        </div>
        <div class="stat">
          <div class="num" id="savedCount">0</div>
          <div class="lbl">requests skipped while hidden</div>
        </div>
      </div>

<p class="hint" id="caption">The "skipped" count is the requests that <em>would</em> have
        fired on the same 2s schedule during the time the tab was hidden — computed from real
        timestamps, not from counting timer ticks, since background tabs can throttle those ticks.</p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> Event log</div>
      <div class="log output" id="log">Waiting for you to click Start…</div>
    </div>
  </div>

preview

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