navigator.sendBeacon() — reliable unload data

<div class="pg">
    <h1 class="pg-title">🎮 navigator.sendBeacon()</h1>
    <p class="pg-sub">
      Simulate a page navigating away. See how <code>fetch()</code> gets silently
      cancelled and <code>sendBeacon()</code> delivers through the unload.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Pick a method</div>
      <div class="method-toggle">
        <button class="method-btn active-bad" id="btnFetch" onclick="setMethod('fetch')">
          ❌ fetch() in beforeunload
        </button>
        <button class="method-btn" id="btnBeacon" onclick="setMethod('beacon')">
          ✅ navigator.sendBeacon()
        </button>
      </div>
      <p class="hint" id="methodHint">
        <strong>fetch() in beforeunload:</strong> The call starts, but the browser cancels
        in-flight async requests the moment it navigates away. Your data is silently dropped.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Simulate a page exit</div>
      <div class="scene">
        <div class="page-box">
          <div class="box-label">Your Page</div>
          <div class="page-status alive" id="pageStatus">🟢 alive</div>
          <div style="font-size:0.75rem;color:var(--muted);margin-top:8px;" id="pageDetail">
            Waiting for navigation…
          </div>
        </div>
        <div class="wire">
          <div class="packet" id="packet">📦</div>
        </div>
        <div class="server-box">
          <div class="box-label">Server / API endpoint</div>
          <div class="server-log" id="serverLog">
            <div style="color:var(--muted);font-size:0.78rem;">No requests received yet.</div>
          </div>
        </div>
      </div>
      <div class="result-banner" id="resultBanner"></div>
      <div class="btn-row" style="margin-top:10px;">
        <button class="btn primary" id="btnSimulate" onclick="runSim()">
          ▶ Navigate Away (send data)
        </button>
        <button class="btn" onclick="reset()">↺ Reset</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> Code comparison</div>
      <div class="code-compare">
        <div class="code-pane">
          <div class="code-pane-label bad-label">❌ fetch() — silently dropped</div>
          <div class="code">
<span class="tok-kw">window</span>.<span class="tok-fn">addEventListener</span>(<span class="tok-str">'beforeunload'</span>, () => {
  <span class="tok-fn">fetch</span>(<span class="tok-str">'/api/log'</span>, {
    method: <span class="tok-str">'POST'</span>,
    body: <span class="tok-fn">JSON.stringify</span>(payload),
  });
  <span class="tok-cmt">// ⚠ browser navigates away</span>
  <span class="tok-cmt">// request is cancelled mid-flight</span>
});</div>
        </div>
        <div class="code-pane">
          <div class="code-pane-label good-label">✅ sendBeacon() — always delivered</div>
          <div class="code">
<span class="tok-kw">window</span>.<span class="tok-fn">addEventListener</span>(
  <span class="tok-str">'visibilitychange'</span>, () => {
  <span class="tok-kw">if</span> (document.visibilityState === <span class="tok-str">'hidden'</span>) {
    <span class="tok-kw">navigator</span>.<span class="tok-fn">sendBeacon</span>(
      <span class="tok-str">'/api/log'</span>,
      blob  <span class="tok-cmt">// Blob, FormData, string…</span>
    );
    <span class="tok-cmt">// ✓ browser queues & delivers</span>
  }
});</div>
        </div>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">4</span> What you can send</div>
      <div class="code">
<span class="tok-cmt">// Plain string (Content-Type: text/plain)</span>
<span class="tok-kw">navigator</span>.<span class="tok-fn">sendBeacon</span>(<span class="tok-str">'/api/log'</span>, <span class="tok-str">'user-exited'</span>);

<span class="tok-cmt">// JSON (wrap in Blob to set Content-Type correctly)</span>
<span class="tok-kw">const</span> blob = <span class="tok-kw">new</span> <span class="tok-fn">Blob</span>([<span class="tok-fn">JSON.stringify</span>({ event: <span class="tok-str">'exit'</span> })], {
  type: <span class="tok-str">'application/json'</span>,
});
<span class="tok-kw">navigator</span>.<span class="tok-fn">sendBeacon</span>(<span class="tok-str">'/api/log'</span>, blob);

<span class="tok-cmt">// FormData (Content-Type: multipart/form-data)</span>
<span class="tok-kw">const</span> form = <span class="tok-kw">new</span> <span class="tok-fn">FormData</span>();
form.<span class="tok-fn">append</span>(<span class="tok-str">'event'</span>, <span class="tok-str">'exit'</span>);
<span class="tok-kw">navigator</span>.<span class="tok-fn">sendBeacon</span>(<span class="tok-str">'/api/log'</span>, form);

<span class="tok-cmt">// Returns true if queued, false if payload > 64 KB</span>
<span class="tok-kw">const</span> queued = <span class="tok-kw">navigator</span>.<span class="tok-fn">sendBeacon</span>(<span class="tok-str">'/api/log'</span>, blob);
      </div>
    </div>
  </div>

preview

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