Basic use

let result = navigator.sendBeacon(url, data);

Posting data

let url = '/api/my-endpoint';

let data = new FormData();
data.append('hello', 'world');
 
let result = navigator.sendBeacon(url, data);
  if (result) console.log('Successfully queued!');

Browser support

It's easy to test for:

if (navigator.sendBeacon) {
	// Beacon code } else {
	// No Beacon. Maybe fall back to XHR? }

Logging page view time

let startTime = performance.now();

let logVisit = function() {

	if (!navigator.sendBeacon) return false;

	let url = '/api/log-visit';
	
	let data = new FormData();
	data.append('start', startTime);
	data.append('end', performance.now());
	data.append('url', document.URL);

	navigator.sendBeacon(url, data);
};

window.addEventListener('beforeunload', logVisit);

Considerations when logging

GDPR Maybe don't log stuff you don't need to log. Don't identify any sessions without considering privacy and your permitted use.

Do Not Track If you can, honour the user's DNT header.

DNT: 0
DNT: 1