Skip to content
Foxipa
Code Completion 5 Challenges

Complete the code: The Beacon API Landscape

Fill in the missing pieces of feature detection and the fire-and-forget contract.

Beginner ~4 min read

Challenge 1

Detect whether the classic beacon transport exists.

js Your answer 
export function detect() {
  return typeof navigator. === 'function';
}

Press Ctrl⌘Enter to check your answer

Challenge 2

Probe fetch(keepalive) support without sending a real request.

js Your answer 
const supportsKeepalive =
  typeof fetch === 'function' &&
  'keepalive' in .prototype;

Press Ctrl⌘Enter to check your answer

Challenge 3

Which initiator type does the spec stamp onto beacon requests?

js Your answer 
// the spec mandates fetch() with initiator type
const initiator = "";

Press Ctrl⌘Enter to check your answer

Challenge 4

The pre-2020 pattern Chrome 80 killed: complete the doomed call.

js Your answer 
window.addEventListener('unload', () => {
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/analytics', ); // blocked in page dismissal
  xhr.send(body);
});

Press Ctrl⌘Enter to check your answer

Challenge 5

Probe the lifecycle event the spec keys its MUST on.

js Your answer 
document.addEventListener('', () => {
  if (document.visibilityState === 'hidden') flush();
});

Press Ctrl⌘Enter to check your answer