OutSystems & Web Beacon API

Photo by Allen Cai on Unsplash

Today we are going to cover the Web Beacon API and no, it’s not about BLE Beacons.

The Web Beacon API is used to send an asynchronous and non-blocking request to a web server. It constitutes an efficient and lightweight method to log user and application activities.

Beacons:

• Do not require a response.
• Are guaranteed to be initiated before a page is unloaded (even if you close the browser).
• Are fulfilled without requiring a blocking request (like XHR).
• Use the POST method.

You can see them on the developer tools being logged on the network page of the browser as “ping” type requests.

This makes Beacons particularly useful to log user activity. Of course there are plenty of commercial and freemium analytics tools, but if you want something simple, cost effective and don't want to rely on 3rd party cookies that scare off users (think GDPR) this might be for you.

Implementation

This has been implemented in OutSystems with a single SendBeaconJSON method. The URL represents the endpoint of the POST and the dataJSON (which is optional) a JSON text that can be serialized back into an OutSystems structure.

Originally the navigator.sendBeacon method supports ArrayBufferView, Blob, DOMString, or FormData and the header sent on the post would be type text.

In order to make things easier for the OutSystems developers the data type is set to text and a type application/json header is included. If different methods are needed there shouldn’t be too difficult to extend.

var headers = {
  type: 'application/json'
};
var blob = new Blob([JSON.stringify(data)], headers);
var result = navigator.sendBeacon($parameters.url,blob);
if(!result) console.log('navigator.sendBeacon was unable to queue the request');

This makes it possible to create a REST entry point to accept this data on our applications.

The Web Beacon API is a lesser known and used functionality built right into your browser. There is no need for complicated requests or even, if on mobile, for Cordova plugins.

Check out the this component on the forge.

… and as always, go build those apps!