This is a quick intro to the PageVisibility API which landed in most of the current web browsers and enables some really nice features.
Given at http://berlinjs.org at 21st March 2013.
Using the PageVisibility API
I can see hidden tabs.
- running a small “agency” doing web development
- Berlin.JS, up.front, BEPHPUG, Reject.js, NodeCopter bla bla bla
What’s the PageVisibility API?
With all the HTML5 JS posterchilds like Canvas, WebWorkers, FileReader and all the other stuff that you can use if you start your browser with 25 ﬂags, it’s one of the most
overlooked additions to our toolbelt
Gives you an API to react on visibility changes of the tab
document.hidden // boolean
document.visibilityState // ‘hidden’, ‘visible’ or ‘prerender’
Stops polling when no client is connected (= reduced resource usage)
stop video playback
give the user a digest of the latest changes when he’s back
pause/resume a game
stop playing sounds (that annoying “which tab is playing sound?”)
Not only for saving battery, but also for a lot of additional UX stuff
Coming to your browser soon (currently implemented in Chrome Canary)
Browser support is pretty good.
There’s one (major) browser who does not support it in it’s current version ... Safari.
http://caniuse.com/#feat=pagevisibility (Also the best site ever, since Amazing Horse.)
Polyﬁlls to the rescue!
Modernizr Wiki: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyﬁlls
Using focusin/focusout/blur events as fallback
Don’t be fooled by pagehide / pageshow
Unless you know what you’re doing.
Sound like the right deal, but they’re just onload / onunload with cache semantics. Different behaviour in iOS:
* iPhone ﬁres the event when the user switches the tab, iPad not
* iOS stops execution of JS when you switch a tab
* workaround with heartbeat
If I can do a talk, you can too!