Page Visibility & lifecycle

document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "hidden") {
    // save state, flush analytics, pause work
  } else {
    // resume, refresh stale data
  }
});

             focus / blur
  ACTIVE  <---------------->  PASSIVE
  visible, focused            visible, not focused
                                 |    ^
          visibilitychange       |    |  visibilitychange
          (hidden)               v    |  (visible)
                              HIDDEN ------------------> TERMINATED
                                 |    ^    pagehide         (page gone)
                         freeze  |    |  resume
                                 v    |
                              FROZEN  --- memory pressure --> DISCARDED
                     (bfcache or      (no event; wasDiscarded
                      background tab)  is true on reload)

document.addEventListener("freeze", () => {
  // close IndexedDB and connections; no async work
});
document.addEventListener("resume", () => {
  // reopen connections, refresh stale data
});
 
// Chromium: this load replaces a discarded tab
const wasDiscarded =
  (document as { wasDiscarded?: boolean }).wasDiscarded;

type NavWithReasons = PerformanceNavigationTiming & {
  notRestoredReasons?: unknown; // not in lib.dom yet
};
const [nav] = performance.getEntriesByType(
  "navigation",
) as NavWithReasons[];
if (nav?.type === "back_forward") {
  console.log(nav.notRestoredReasons);
}

declare const events: object[];
 
// beacon: simplest, text/plain body
navigator.sendBeacon("/rum", JSON.stringify(events));
 
// keepalive fetch: real headers
void fetch("/rum", {
  method: "POST",
  keepalive: true,
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(events),
});

function whenIdle(cb: () => void, timeout = 2_000) {
  if (typeof requestIdleCallback === "function") {
    requestIdleCallback(cb, { timeout });
  } else {
    setTimeout(cb, 1); // Safari
  }
}

export function visiblePoll(
  fn: () => Promise<void>,
  everyMs: number,
): () => void {
  let timer: ReturnType<typeof setInterval> | undefined;
  const start = () => {
    if (timer !== undefined || document.hidden) return;
    void fn(); // refresh immediately on return
    timer = setInterval(() => void fn(), everyMs);
  };
  const stop = () => {
    clearInterval(timer);
    timer = undefined;
  };
  const onChange = () =>
    document.hidden ? stop() : start();
  const ev = "visibilitychange";
  document.addEventListener(ev, onChange);
  start();
  return () => {
    stop();
    document.removeEventListener(ev, onChange);
  };
}

const queue: Record<string, unknown>[] = [];
 
export function track(name: string, props = {}) {
  queue.push({ name, t: Date.now(), ...props });
}
 
function flush() {
  if (queue.length === 0) return;
  const body = JSON.stringify(queue.splice(0));
  // string body = text/plain, so Chrome accepts it
  if (!navigator.sendBeacon("/rum", body)) {
    const init = { method: "POST", body, keepalive: true };
    void fetch("/rum", init);
  }
}
 
document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "hidden") flush();
});
window.addEventListener("pagehide", flush); // older Safari

declare function connect(): WebSocket;
declare function refreshSession(): Promise<void>;
 
let socket: WebSocket | null = connect();
 
window.addEventListener("pagehide", () => {
  socket?.close(); // let the page enter the bfcache
  socket = null;
});
 
window.addEventListener("pageshow", (e) => {
  if (!e.persisted) return; // normal load
  socket ??= connect();
  void refreshSession(); // cookies may have expired
});

const onBeforeUnload = (e: BeforeUnloadEvent) => {
  e.preventDefault();
  e.returnValue = true; // legacy browsers
};
 
export function setDirty(dirty: boolean) {
  if (dirty) {
    window.addEventListener("beforeunload", onBeforeUnload);
  } else {
    window.removeEventListener(
      "beforeunload",
      onBeforeUnload,
    );
  }
}