bfcache eligibility — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 Will this page get bfcache?</h1>
    <p class="pg-sub">
      A simulated page with a running timer. Toggle the listeners real apps actually ship,
      then navigate away and back — and watch whether the browser freezes the page (instant)
      or destroys it (full reload).
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> What's registered on this page</div>

<div class="listener-row">
        <div>
          <div class="name">Always-on <code>beforeunload</code> listener</div>
          <div class="why">Mounted at load, regardless of unsaved changes. Costly in browsers that penalize a registered-but-inert listener — a rule that's shifted over time, so don't rely on it going either way.</div>
        </div>
        <label class="toggle">
          <input type="checkbox" id="beforeunload" /><span class="switch"></span>
        </label>
      </div>

<div class="listener-row">
        <div>
          <div class="name"><code>unload</code> listener</div>
          <div class="why">Legacy cleanup pattern — the reliable one: some engines block bfcache for the page's whole lifetime if this is present anywhere.</div>
        </div>
        <label class="toggle">
          <input type="checkbox" id="unload" /><span class="switch"></span>
        </label>
      </div>

<div class="listener-row">
        <div>
          <div class="name"><code>Cache-Control: no-store</code> response header</div>
          <div class="why">Not JavaScript at all — used to block bfcache outright; Chrome now allows it unless cookies/auth change while parked (shorter hold either way). Simplified here as a blocker.</div>
        </div>
        <label class="toggle">
          <input type="checkbox" id="nostore" /><span class="switch"></span>
        </label>
      </div>

<div class="presets" style="margin-top:14px">
        <button class="btn sm" data-preset="broken">Load "the naive form" (broken)</button>
        <button class="btn sm" data-preset="fixed">Load "the fix" (pagehide + dynamic beforeunload)</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> The page, and what happens when you leave and come back</div>

<div class="stage" id="stage">
        <div class="muted" style="font-size:0.85rem">seconds this page has been alive</div>
        <div class="counter" id="counter">0</div>
      </div>

<div class="btn-row" style="margin-top:12px">
        <button class="btn primary" id="navAway">Navigate away →</button>
        <button class="btn good" id="navBack" disabled>← Navigate back</button>
        <button class="btn ghost" id="reset">Reset</button>
      </div>

<div class="status" id="status" style="margin-top:12px">
        <span class="dot info" id="dot"></span><span id="statusText">The page is live — its counter is ticking. Navigate away, then come back.</span>
      </div>
      <p class="hint" id="hint">Caption: on a real bfcache hit, this whole page — including that running counter — is frozen in memory, not destroyed. Coming back just un-pauses it.</p>

preview

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