"fetch" supports a "keepAlive" option to make it outlive page navigations

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 fact is good to know!