Page Visibility API Indicator — Free visibilitychange Demo

This snippet reads the browser's actual Page Visibility API — document.visibilityState and the visibilitychange event — to show, in real time, whether the current tab is in the foreground or has been switched away from, minimized, or covered. It's the exact mechanism behind why a video pauses when you switch tabs or a dashboard stops polling in the background.

Why not blur/focus?

It's tempting to reach for window blur/focus events instead, but those fire for reasons that have nothing to do with tab visibility — clicking into a browser extension popup, opening dev tools, or focus moving to another window on some platforms can all fire blur while the tab is still fully visible on screen. document.visibilityState is more precise: it reports 'visible', 'hidden', and (on some platforms) 'prerender', driven by whether the tab's content is actually being rendered to the user, and visibilitychange fires exactly when that changes — including tab switches, window minimizing, and screen locking.

What real apps do with this

Video players pause playback and mute audio processing when hidden; dashboards and live feeds stop polling APIs to save bandwidth and battery; games pause their update loop; analytics tools log accurate "time on page" instead of counting background time. This snippet demonstrates the pattern directly: it accumulates separate visible-time and hidden-time counters using Date.now() deltas measured between visibilitychange events, so the numbers are a real elapsed-time record, not an estimate.

A live, capped change log

Every transition appends a timestamped entry to a log capped at 25 rows (oldest entries are trimmed), so you can watch a session's visibility history accumulate — useful for demonstrating to teammates exactly when and how often a page loses focus during a real usage session.

Handling unsupported browsers

The Page Visibility API has been standard for well over a decade, so unsupported browsers are effectively nonexistent today — but the snippet still checks typeof document.hidden !== 'undefined' before wiring the listener, and falls back to a clearly labeled static "always visible" message rather than silently doing nothing if the check ever fails. Pair this with a screen wake lock toggle to build a full "pause when backgrounded" media control, or a network information badge for a broader environment-awareness dashboard.