Menu Home

Beacon

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.

The Video

As always, we’ve done a video that shows you how to use the Beacon.

Shameless Plug

Check us out everywhere!

Check out all our videos at: https://www.boringjavascript.com

Github Repository: https://github.com/TheVirtuoid/boringjavascript

Check out everything at: https://www.thevirtuoid.com

Facebook: https://www.facebook.com/TheVirtuoid

Twitter: https://twitter.com/TheVirtuoid

YouTube: https://www.youtube.com/channel/UCKZ7CV6fI7xlh7zIE9TWqgw

Categories: Boring JavaScript Javascript

Tagged as:

thevirtuoid

Web Tinkerer. No, not like Tinkerbell.

Creator of the game Virtuoid. Boring JavaScript. Visit us at thevirtuoid.com

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: