Artboard 16light, inspiration, solution, idea, innovation,Google Sheets iconSwift icon
Published at
Updated at
Reading time
1min
This post is part of my Today I learned series in which I share all my web development learnings.

This site uses Umami as a self-hosted and privacy-first analytics tool. An item in Umami's changelog caught my eye โ€“ "Update tracker/index.js: SendBeacon() to Fetch API".

sendBeacon is a JavaScript method to send requests to an analytics server. These requests are supposed to be async, not be canceled and outlive the current navigation. But apparently, sendBeacon is sometimes blocked by ad blockers.

That's not a big deal, though, because today I learned I can drop sendBeacon from my memory entirely and use the fetch method with a keepalive option. ๐Ÿ‘‡

fetch(`${root}/api/collect`, {
  method: 'POST',
  body: data,
  // note the `keepalive` option
  keepalive: true,
});

fetch with a keepalive option has the same characteristics as sendBeacon and acts as its replacement. This is good to know!

Don't confuse the keepalive fetch attribute with the Keep-Alive HTTP header.

Related Topics

Related Articles