Know your Modern Browser API’s
Chapter 1: The Beacon API
Browser APIs… So before jumping to the modern APIs first of all we need to know What is a browser API and Where it is? How it is used ?. So let’s look at some old, golden client-side stuff.
Browser APIs — An Intro.
Browser APIs are part of Web APIs which are built into your web browser and are helping to deal with more complex data and operations from the client-side ( JavaScript). All Browsers have a set of APIs to do this. For example, You have Audio and Video API like HTMLMediaElement which provides features to allow you to control video and audio players programmatically.
Some of the common APIs are ;
- DOM(Document Object Model) API — This helps to manipulate HTML and CSS
- Server APIs — Allows to do network calls — Fetch API, XMLHttpRequest, etc
- Drawing and Graphics API — Creates and Modifying drawings and graphics — CANVAS, WebGL, etc
- Media APIs — Allows to play with Video and Audio — HTMLMediaElement, WebRTC, etc
- Device APIs — Manipulating and retrieving data from device hardware in a way that is useful for web apps — Notifications API, Vibrations API, etc
- Storage APIs — Allows to store data in client-side — LocalStorage, SessionStorage, IndexedDB API, etc
Yes, I know, you may be familiar with these but I just did a Recap :) Now let’s stop the old story.
Today, I am going to tell you a useful API that may help you in your next assignments.
“For those who are not familiar with the Browser APIs please follow to know where and how to use this in your JavaScript”
Beacon API
Let’s see what is “MDN” says;
“The Beacon API is used to send an asynchronous and non-blocking request to a web server. The request does not expect a response. Unlike requests made using XMLHttpRequest or the Fetch API, the browser guarantees to initiate beacon requests before the page is unloaded and to run them to completion.”
The Beacon API is mainly used to send analytics such as client-side events or session data to the server. Normally, we have used XMLHttpRequest for this type of need. But the problem was, the browsers do not guarantee to send these asynchronous requests in some circumstances (for example, if the page is about to be unloaded).
Main Use Cases :
- Analytics
- Tracking
- Logging / Debugging
The API : Navigator.sendBeacon()
The Navigator interface represents the state and the identity of the user agent.A Navigator object can be retrieved using the window.navigator property or just “navigator” without window.
sendBeacon() is the method available in the Navigator object that helps to send network requests. This method takes two parameters. The first is the URL to make the request to. And we can provide data as the second parameter. The request is performed as an HTTP POST.
const response = navigator.sendBeacon(URL, data);
From the above code, we will get a Boolean response. If the response is true, that means the browser accepted and queued the request, and will return false if there is any problem.
Now let's see an example;
For testing this example, I have created a request Url using a third party site called “PutsReq”. (It’s not mandatory to depend on any third party if you can test it on your own server.)
It will give you a request URL like
This is a simple HTML file with a “Send Request” button. In the script section,
const URL = “https://putsreq.com/z5kj**DRt0***UYSO***";
This is the URL where we are sending the beacon request.
This “SendEvent” function sends the Beacon request using “navigator.sendBeacon(URL, data);”
There are 3 events using the sendEvent function to send beacon requests in this example.
- On Load 2. On Request Button Click 3. On Unload
this method is called when you come to the page and you can see message/data passed to the server in “PutsReq”
After clicking the button sendEvent is fired, and you can see the entry in Server.
And “Unload event” is fired when closing the tab/browser.
In this example, I put only some of the ways to implement the beacon API.
Browser Support
All the modern browsers support beacon API. IE is not supported. Use the below checking when implementing.
if (navigator.sendBeacon) {
// Beacon code
} else {
// Go with XHR/ Fetch
}
Conclusion
Beacon API is very useful when you deal with Logging, Tracking, and Analytics. Its browser support is very wide and can be implemented very easily without affecting the user’s browser experience and the performance of the application.
Happy Coding…Thank you…