Unload Listener

How to set up correctly the unload event

Accessibility

How to set up correctly the unload event

You should never treat the unload event as a guaranteed callback, using it as an end-of-session signal to send analytical data and save state.

In fact, in many download situations the unload event will not fire.

Always rely on the visibilitychange event if you want to determine when a session ends, and as the last reliable time to save both app and user data, consider the state hidden.

Browsers can only be prevented from caching pages Back-Forward by the presence of a registered unload event handler (via onunload or addEventListener()).

It is therefore advisable to use the pagehide event on all modern browsers (including IE11) in order to detect page unloads.

const terminationEvent = 'onpagehide' in self ? 'pagehide' : 'unload';

addEventListener(terminationEvent, (event) => {
  // Note: if the browser is able to cache the page, `event.persisted`
  // is `true`, and the state is frozen rather than terminated.
}, {capture: true});