The Page Visibility API

Framegrab from a Google Chrome promotional video: click to view the Page Visibility API demoI’ve built a simple demo of the Page Visibility API, based on an idea of Mike Mahemoff‘s and using his favicon.js.

The API makes it possible to find out when a web page becomes visible or hidden, for example to pause download, processing or playback in order to save CPU and bandwidth.

More information about the API is available from and MDN.

I’ve also built a Google Chrome extension that uses the API to pause video when it’s not visible.

About Sam Dutton

I am a Developer Advocate for Google Chrome. I grew up in rural South Australia, went to university in Sydney, and have lived since 1986 in London, England. Twitter: @SW12
This entry was posted in HTML, Uncategorized and tagged , , . Bookmark the permalink.

12 Responses to The Page Visibility API

  1. How is this an improvement over window.onblur and window.onfocus, which has worked in every browser I’m aware of for many years?

    You could simulate document.webkitHidden and document.webkitVisibilityState very easily in every browser with a combination of those handlers and domReady.

    • Sam Dutton says:

      How is this an improvement over window.onblur and window.onfocus

      Good question.

      There’s more information about the rationale for the Page Visibility API in the Google Chrome whitepaper about the API, and in the W3C mailing list.

      In my case, I only intended to demonstrate the API, not provide a cross-browser solution to the problem of page focus or visibility.

      The Page Visibility API also provides a simple way to check if a page is visible or not when it’s opened — for example when opening a link in a new tab with Ctrl- or Command-click. Take a look at this example. (You’ll need Chrome 13+ or IE 10+.)

      • Interesting – it definitely seems like a lot of framework to build just to cover the background tab scenario – but it also seems like the best way to get the framework widely adopted is for someone to make a cross-browser shim to add the functionality to browsers that lack the API (with the obvious caveat that it wouldn’t work until the tab was first brought into focus).

  2. Sam Dutton says:

    >> shim <<

    Good idea — I'll try to add this when I get a chance.

  3. Cool demo! My friend write hack to emulate Page Visibility API in Firefox 5, you can use it . Also I wrote Visibility.js – API wrapper with nice high level functions and without vendor prefix problems .

  4. ronnyfm says:

    Tested in the new Firefox Aurora too! 🙂

  5. Vish says:

    I have a NPAPI plugin which is a scriptable plugin. I have registered my NPObject for focus and blur event in window object, which works fine in most of the scenarios, but doesn’t work in some scenario. When I came to know this visibilitychange event, i tried to register for the event from my NPAPI plugin by calling AddEventListener, but function call fails.
    Could you please suggest/guide me in adding event listener in document object.
    I thank in advance.

  6. Pingback: Control page visibility with HTML5 API in ZK | The ZK Blog

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.