I’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 code.google.com and MDN.
I’ve also built a Google Chrome extension that uses the API to pause video when it’s not visible.
Sam Dutton’s blog 
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.
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).
>> shim <<
Good idea — I'll try to add this when I get a chance.
Cool demo! My friend write hack to emulate Page Visibility API in Firefox 5, you can use it https://github.com/private-face/mozvisibility . Also I wrote Visibility.js – API wrapper with nice high level functions and without vendor prefix problems https://github.com/evilmartians/visibility.js .
If you will use Visibility.js in your demo, it will be work for IE 10 and Firefox 5 (with MozVisibility hack).
Thanks Andrey — I’ll take a look and incorporate this when I get a chance.
Tested in the new Firefox Aurora too! 🙂
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.
Hi Vish
I’m not the best person to ask about NPAPI plugins.
Try Stack Overflow, or the Native Client group: https://groups.google.com/forum/?fromgroups#!forum/native-client-discuss
Regards
Sam
Hi Sam,
Thank you for the reply.
Ok, I will post my query in Stack Overflow.
Regards,
Vish
Pingback: Control page visibility with HTML5 API in ZK | The ZK Blog