Skip to content
Foxipa
Code Completion 5 Challenges

Complete the code: Page Lifecycle & Delivery

Fill in the missing lifecycle states, events, and the flusher's guards.

Intermediate ~4 min read

Challenge 1

Complete the spec's flush trigger.

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

Press Ctrl⌘Enter to check your answer

Challenge 2

The bfcache-aware cleanup event.

js Your answer 
window.addEventListener('', (e) => {
  closeSockets();
  releaseLocks();
  if (e.persisted) markBfcacheEntry();
});

Press Ctrl⌘Enter to check your answer

Challenge 3

Detect a bfcache restore.

js Your answer 
window.addEventListener('pageshow', (e) => {
  if (e.) shipRestorePageview();
});

Press Ctrl⌘Enter to check your answer

Challenge 4

Guard the flusher against duplicate signals.

js Your answer 
lastState = 'visible';
maybeFlush(state) {
  if (state === this.lastState) ; // same state, no second beacon
  this.lastState = state;
  this.flush();
}

Press Ctrl⌘Enter to check your answer

Challenge 5

Why the recipe sends on the FIRST hidden transition: complete the comment.

js Your answer 
// On mobile the OS may kill the process while hidden —
// no  event is guaranteed afterwards.

Press Ctrl⌘Enter to check your answer