Foreground Detection

The Page Visibility API is useful for the web application to know whether it is currently displayed on the front or not, especially to stop resource-intensive UI animations or data refreshing when it is not needed. On the mobile devices, the primary reason for that is to reduce the battery usage.

API glimpse

document.hidden
Returns true if the page is currently hidden.
document.visibilityState
Returns current visibility state: visible, hidden, prerender or unloaded.
document.addEventListener('visibilitychange')
An event fired when the visibility state of the page has changed.

Resources