navigator.sendBeacon — interactive playground

<div class="pg-shell">
  <header class="pg-header">
    <div class="pg-badge">navigator.sendBeacon</div>
    <h1 class="pg-title">Reliable analytics on page exit</h1>
    <p class="pg-subtitle">Trigger events, then "navigate away" to see the delivery difference between fetch and sendBeacon.</p>
  </header>

<div class="scenario-toggle">
      <button class="scenario-btn active" id="btn-beacon" onclick="setMode('beacon')">
        ✅ sendBeacon (guaranteed)
      </button>
      <button class="scenario-btn" id="btn-fetch" onclick="setMode('fetch')">
        ⚠️ fetch in beforeunload
      </button>
    </div>

<div class="session-panel">
      
      <div class="panel-box">
        <h3>Session events</h3>
        <div class="event-btns">
          <button class="event-btn" onclick="addEvent('page_view')">
            <span class="icon">👁️</span>
            <span class="label">Page view</span>
            <span class="count" id="cnt-page_view">0</span>
          </button>
          <button class="event-btn" onclick="addEvent('click')">
            <span class="icon">🖱️</span>
            <span class="label">Button click</span>
            <span class="count" id="cnt-click">0</span>
          </button>
          <button class="event-btn" onclick="addEvent('scroll_depth')">
            <span class="icon">📜</span>
            <span class="label">Scroll depth</span>
            <span class="count" id="cnt-scroll_depth">0</span>
          </button>
          <button class="event-btn" onclick="addEvent('search')">
            <span class="icon">🔍</span>
            <span class="label">Search query</span>
            <span class="count" id="cnt-search">0</span>
          </button>
        </div>
      </div>

<div class="panel-box">
        <h3>Event queue</h3>
        <div class="queue-box" id="queue-log">
          <span style="color:var(--faint);font-style:italic">Queue is empty — trigger some events</span>
        </div>
        <div class="queue-count">Queued: <span id="queue-size">0</span> event(s)</div>
        <button class="exit-btn" id="exit-btn" onclick="simulateExit()" disabled>
          🚪 Navigate away (flush analytics)
        </button>
      </div>
    </div>

<div class="panel-box">
      <h3>Network / delivery log</h3>
      <div class="network-log" id="net-log">
        <span style="color:var(--faint);font-style:italic">Delivery log appears here after navigating away</span>
      </div>
    </div>

<div class="explanation" id="explanation">
      <strong>sendBeacon mode:</strong> When you click "Navigate away", the queue is flushed with
      <code>navigator.sendBeacon('/analytics/batch', blob)</code>. The browser queues the POST and
      delivers it even as the page is torn down. The return value (<code>true</code>) confirms it was accepted.
    </div>

<div class="code-block" id="code-preview"><span class="cm">// visibilitychange + sendBeacon pattern</span>
<span class="kw">const</span> eventQueue = [];

<span class="fn">document</span>.<span class="fn">addEventListener</span>(<span class="str">'visibilitychange'</span>, () => {
  <span class="kw">if</span> (<span class="fn">document</span>.visibilityState === <span class="str">'hidden'</span>) {
    <span class="kw">const</span> body = <span class="kw">new</span> <span class="fn">Blob</span>(
      [<span class="fn">JSON</span>.stringify(eventQueue)],
      { type: <span class="str">'application/json'</span> }
    );
    navigator.<span class="fn">sendBeacon</span>(<span class="str">'/analytics/batch'</span>, body);
  }
});</div>

<button class="reset-btn" onclick="resetAll()">↺ Reset playground</button>
  </main>
</div>

preview

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