Tab visibility
document.visibilityState and the visibilitychange event
Chrome33
Edge12
Firefox18
Safari7
Features it needs
- Page visibilityWidely available
These libraries wrap document.visibilityState with framework-friendly plumbing around a value the browser already exposes. Reading it directly tells you whether the tab is the one the person is currently looking at, useful for pausing polling, video, or animation when it isn't.
When this applies
Pausing or resuming work, such as polling or video playback, based on whether the tab is visible.
The native approach
document.addEventListener("visibilitychange", () => {
if (document.visibilityState === "hidden") pausePolling();
else resumePolling();
});When the dependency is still right
An answer that always says "the platform covers it" is worse than no answer. These are the cases where this one does not hold.
- You need a framework hook's re-render-on-change ergonomics rather than an event listener you manage yourself.
- You need to distinguish a window occluded by another window from a genuinely backgrounded tab. visibilityState only reports the latter.
Building it
This catalog stops at the swap. These guides go through the implementation and the fallbacks, and each one reads in the terminal through its own command.
- Detect initial visibility state
npx -y modern-web-guidance@latest retrieve "detect-initial-visibility-state" - Calculate total foreground time
npx -y modern-web-guidance@latest retrieve "calculate-total-foreground-time"
Signs it was hand-rolled
No package is involved in any of these, so nothing would match in a package.json. If the code looks like one of them, this rule applies anyway, and the conditions above still decide.
- a blur handler standing in for the tab being backgrounded, pausing a poll that a focus handler resumes