The Silent Messenger: Why You Should Be Using the Beacon API

If you've ever built a web application that tracks user behavior—like how long someone stays on a page or where they click—you've likely run into the "Unload Problem."

Traditionally, sending data to a server right as a user closes a tab or navigates away is a nightmare. Standard fetch() or XMLHttpRequest calls are often canceled by the browser to speed up the transition to the next page. This leaves developers with "ghost" data and incomplete analytics.

Enter the Beacon API: a specialized tool designed to solve this exact problem without compromising performance.

What is the Beacon API?

The Beacon API provides a way to send small amounts of data to a server asynchronously. Unlike a standard request, a "beacon" is guaranteed to be initiated before the page unloads and is allowed to run to completion even after the page has disappeared.

The Syntax

It is incredibly simple to use via the navigator.sendBeacon() method:

JavaScript

navigator.sendBeacon(url, data);

• url: The destination address (e.g., /api/analytics).
• data: The payload (can be a Blob, FormData, String, or URLSearchParams).

Why It Outperforms fetch() and XHR

In the past, developers used "dirty hacks" to ensure data was sent before a page closed. These included:

1. Synchronous XHR: This literally froze the browser until the server responded, frustrating users.
2. Image Tags: Creating a dummy <img> tag and setting its src to a tracking URL, hoping the browser wouldn't kill the request.

The Beacon API replaces these with a "Fire and Forget" model:

Best Practices: The visibilitychange Event

A common mistake is placing beacons inside the unload or beforeunload events. Modern browsers (especially on mobile) don't always fire these.

The gold standard for reliable tracking is the visibilitychange event. This triggers whenever a tab is hidden, whether the user switches tabs, minimizes the browser, or closes the app entirely.

JavaScript

document.addEventListener('visibilitychange', function() {
  if (document.visibilityState === 'hidden') {
    const analyticsData = JSON.stringify({
      user: '123',
      timeSpent: 4500
    });
    navigator.sendBeacon('/log', analyticsData);
  }
});

The Fine Print (Limitations)

While powerful, the Beacon API isn't a replacement for every network call. Keep these constraints in mind:

• Size Limits: Most browsers limit the beacon payload to 64 KB. If you exceed this, the method returns false and the data isn't sent.
• POST Only: Beacons always use the HTTP POST method. You cannot send a GET or PUT request.
• No Response: You cannot see what the server said back. If you need a confirmation (like a "Success" message for the user), use fetch().

Summary

The Beacon API is the quiet workhorse of modern web analytics. By moving your tracking logic to sendBeacon(), you ensure that your data is captured reliably while keeping the user experience snappy and seamless.