Ping Requests in the Browser Network Panel
Ping requests pop up in Chrome DevTools all the time. I wanted to know what triggers them and what they actually do, so here’s the breakdown.
navigator.sendBeacon
A little digging shows that those ping entries come from navigator.sendBeacon. The call can carry data, and under the hood it still issues an HTTP POST, so the server should treat it exactly like any other POST.
The browser sends the request asynchronously via navigator, not from the page’s single-threaded JavaScript context. Because of that, closing or navigating away from the page doesn’t interrupt it.
Example
When a page unloads, you can use sendBeacon to tell the server the user has closed the tab. With XHR or fetch, the page might disappear before the request ever leaves the browser, but sendBeacon finishes reliably.
Of course there are edge cases—if the browser crashes or the computer powers off, nothing gets sent.
Cross-Browser Display Differences
sendBeacon appears differently depending on the browser.
- Chrome labels it as
ping. - Safari labels it as
beacon. - Firefox also labels it as
beacon.
One annoyance in Chrome is that you can’t filter directly by the ping type in the Network tab—you have to choose “Other” or filter by URL.
How to Fire a Ping Request
Here’s a basic example:
navigator.sendBeacon('/beacon', new Blob([JSON.stringify({
type: 'hello'
})], {type: 'application/json'}));
Use Cases
The behavior makes it ideal for analytics beacons, especially when you need to send data as the page is closing.
Analytics libraries in the wild often rely on sendBeacon for this exact purpose.
Final Thoughts
That’s everything I’ve gathered so far.
