"fetch" supports a "keepAlive" option to make it outlive page navigations
- Published at
- Updated at
- Reading time
- 1min
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.
Don't confuse the keepalive
fetch attribute with the Keep-Alive
HTTP header.
This fact is good to know!
Join 5.4k readers and learn something new every week with Web Weekly.