Page Visibility API

Demo

Switch to another browser tab, and and come back after a few seconds to see the page visibility change logged below.

Use cases

This is particularly useful for pausing resource-intensive tasks, such as UI animations or data updates, when they are not needed. On mobile devices, the primary benefit is reduced battery consumption.

This API does not detect scenarios where the page is visible but the user is idle (e.g., away from their device). A separate API is proposed specifically for detecting user inactivity.

Additionally, the Page Visibility API can be combined with Freeze/Resume state detection to handle system-level lifecycle events, providing more comprehensive control over application behavior.

API

Code

Links & Documentation

• Page Visibility API on MDN
• Usage Guide on MDN