Service worker deploy — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 Why your users are still seeing the old bug</h1>
    <p class="pg-sub">
      Three open tabs, one deploy. Pick a caching strategy and a lifecycle option, hit
      <strong>Deploy new version</strong>, and watch which tabs actually get the fix.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Service worker settings</div>
      <p class="hint">This is the config the fetch handler and lifecycle hooks are built with — exactly like the article's two code blocks.</p>

<div class="field">
        <div class="ctl-label">Caching strategy for the HTML/JS bundle</div>
        <div class="seg" id="strategySeg">
          <button aria-pressed="true" data-val="cache-first">cache-first</button>
          <button aria-pressed="false" data-val="network-first">network-first</button>
          <button aria-pressed="false" data-val="swr">stale-while-revalidate</button>
        </div>
      </div>

<div class="btn-row" style="margin-top:14px">
        <label class="toggle">
          <input type="checkbox" id="skipWaiting" /><span class="switch"></span>
          <span><code>skipWaiting()</code> in install</span>
        </label>
        <label class="toggle">
          <input type="checkbox" id="clientsClaim" /><span class="switch"></span>
          <span><code>clients.claim()</code> in activate</span>
        </label>
        <label class="toggle">
          <input type="checkbox" id="versionBump" /><span class="switch"></span>
          <span>versioned cache name (evicts old cache)</span>
        </label>
      </div>

<div class="presets" style="margin-top:14px">
        <button class="btn sm" data-preset="broken">Preset: the common broken setup</button>
        <button class="btn sm" data-preset="fixed">Preset: the full fix</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Three users, mid-session</div>
      <p class="hint">Each tab loaded the site before today's deploy and has been sitting open since.</p>
      <div class="tabs" id="tabs"></div>
      <div class="btn-row">
        <button class="btn primary" id="deploy">🚀 Deploy new version</button>
        <button class="btn ghost" id="reset">Reset</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> What the cache actually holds</div>
      <div class="lifecycle" id="lifecycle">
        <span class="step" data-step="idle">idle</span>
        <span class="step" data-step="install">install</span>
        <span class="step" data-step="waiting">waiting</span>
        <span class="step" data-step="activate">activate</span>
        <span class="step" data-step="controlling">controlling</span>
      </div>
      <div class="cache-list" id="cacheList">—</div>
      <div class="status" id="status" style="margin-top:12px">
        <span class="dot info" id="dot"></span><span id="statusText">Ready — set your options, then deploy.</span>
      </div>
      <p class="hint" id="hint">Caption: this narrates exactly what each tab would receive on its next request.</p>
    </div>
  </div>

preview

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