The Page Visibility API defines a means for site developers to programmatically determine the current visibility of a document and be notified of visibility changes. To view the Page Visibility history of this page, try minimizing the browser.
Without knowing the visibility state of a page, a web developer must design the webpage as if it is always visible. This not only results in higher machine resource utilization, but it prevents web developers from making runtime decisions based on whether the webpage is visible to the user. Designing web pages with knowledge of the page visibility will allow for improved user experiences and power efficient sites.
The Page Visibility API consists of two properties and an event:
document.hidden: A boolean that describes whether the page is visible or not.
document.visibilityState: An attribute that returns the detailed page visibility state, e.g., PAGE_VISIBLE, PAGE_PREVIEW, etc.
visibilitychange: An event that gets fired any time the visibility state of the page changes.
With this interface, web applications may choose to alter behavior based on whether they are visible to the user or not. For example, this interface can be used to scale back work when the page is no longer visible. If a web based email client is visible, it may check the server for new mail every few seconds. When hidden it might scale checking email to every few minutes. This interface can also be used to provide better runtime user experience decisions not related to power management. For example, a puzzle game could be paused when the user no longer has the game visible. Further, this interface can be used by advertisers to not charge for ads that are not visible to users.
The Page Visibility API is being designed in the Web Performance Working Group.
As this API is an emerging standard, this interface has been implemented with a
ms vendor prefix.
Special thanks to the Google, Mozilla and other members of the working group in helping design this interface.