code, howto

HTML5: Page Visibility API

The Page Visibility API tries to solve a simple problem: is the current document visible to the user? It is a common issue that is raised in environments where a user may have a document open, but where it is might not be seen by a user because it is ‘hidden’ by being either minimized or covered by another window. The API exists as a way for a page to have this information itself and act accordingly, either stopping computationally intensive code or saving data while the user is looking away.

Like most HTML5 functionality, the Page Visibility API has good cross-browser support (~66%), but currently uses vendor prefixes. Most major browsers also implement a majority of the specification, but with the caveat that some do not return the optional statues of “prerender” (loaded but not yet shown) and “unloaded” (not shown and is being removed from memory). However, the primary “hidden” or “visible” are well supported.

Testing for the Page Visibility API in the current browser context consists of, at the time of this writing, going through a list of vendor prefixed ‘hidden’ property of the document object. If any are found, support is assumed.

However, just because the Page Visibility API is not directly supported doesn’t mean some of its functionality cannot be emulated. By registering event listeners with the “blur” and “focus” events of the document, the ability to test for a user interacting with a document (focus) or is covered (blur) can mimic parts of the Page Visibility API in those browser contexts that are older or do not have full support yet.