Beacon

By thevirtuoid on January 25, 2022 • ( Leave a comment )

Hi everyone, and welcome to another exciting edition of Boring JavaScript! Today, we tackle the web API known as Beacon – a great method for guaranteeing sending POST requests to a URL, even if your page is getting ready to unload.

Don’t like to read? Then watch our video.

A Beacon In The Night

Why do we even need ‘Beacon’? A great use case is in the use of analytics in your webpages (that is, measuring and recording your visitors). Many times, analytics need to be sent when the user is beginning to navigate away from the page. The problem is, using the old ‘XmlHttpRequest’ or the newer ‘fetch()’ to do this was problematic, as the page could unload before the request is sent and/or completed. This would mean dropped data – something all those marketing people can’t stand.

Beacon was designed to always be sent – no matter what. This insures that the data is sent to the analytics server engine all the time – no change of it ever being lost. A boom to marketing people all over the world – maybe not so much for us web surfers. 🙂

It’s real simple to use – let’s take a look:

const sendBeacon = () => {
	const { appCodeName, cookieEnabled, language } = navigator;
	const data = new FormData();
	data.append('appCodeName', appCodeName);
	data.append('cookieEnabled', `${cookieEnabled}`);
	data.append('language', language);
	navigator.sendBeacon(`./analytics.json`, data);
}

Line 7 is the important line. The ‘sendBeacon()’ method takes two arguments. First, the URL that will get the POST httprequest, and second, the data itself. Since ‘sendBeacon()’ will issue a POST request, I decided to store all my data in a FormData object (lines 3 through 6). There are a number of other formats you can use, but I feel that using FormData is the way to go, as most servers will know how to handle form data in a POST request.

And that – is that. There is nothing else to it. The important thing to remember is that a Beacon will always get sent to the server – guaranteed.