Page Visibility API: Have I got your attention?
Google Developers Logo

Progressive Web App Dev Summit

All sessions are available on YouTube, watch now!

Multi-tab browsing is now the norm, so you can’t assume the user is watching your app just because it’s running. Fortunately, the new “Page Visibility API”: lets your app discover if it’s visible or not. You could use the API to cut down on unnecessary network activity and computation.

@document.webkitHidden@ is a boolean value indicating if the current page is hidden (you can try it now in the console if you’re using a recent build of Chromium). @document.webkitVisibilityState@ will return a string indicating the current state, one of “visible”, “hidden”, and “prerendered”. And a new @webkitvisibilitychange@ event will fire when any of these changes, e.g. when the user opens you app’s tab, or moves away from it.

If you’re interested in giving this a whirl, check out visibility.js which adds a little bit of sugar on the API to make watching these interactions a bit more fun.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License. For details, see our Terms of Service.