Page Visibility API Overview
The Page Visibility API provides a standardized way for web pages to determine whether they are currently visible to the user or hidden. By exposing the document.visibilityState property and the visibilitychange event, developers can adjust analytics tracking, resource usage, or media playback based on the page's actual visibility.Technical Details
The API integrates into the HTML specification and works across modern browsers. It defines several visibility states and offers an event that fires whenever the state changes, enabling responsive adjustments without polling.Visibility States
The document.visibilityState property returns values such as visible, hidden, prerender or unloaded. A page is considered hidden when the browser tab is minimized, covered by another window, or when the device screen is locked. The visible state persists even if only a portion of the page is on screen.Event Listener Usage
Developers typically attach a listener to the visibilitychange event. A concise example from the MDN documentation shows how to pause or resume an audio element without using braces:document.addEventListener('visibilitychange',()=>document.hidden?audio.pause():audio.play());