Slide 1

Slide 1 text

Using the PageVisibility API I can see hidden tabs.

Slide 2

Slide 2 text

Robin Mehner @rmehner - running a small “agency” doing web development - Berlin.JS, up.front, BEPHPUG, Reject.js, NodeCopter bla bla bla

Slide 3

Slide 3 text

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 flags, it’s one of the most overlooked additions to our toolbelt

Slide 4

Slide 4 text

Gives you an API to react on visibility changes of the tab document.hidden // boolean document.visibilityState // ‘hidden’, ‘visible’ or ‘prerender’ ‘visibilitychange’ event

Slide 5

Slide 5 text

Demo http://rmehner.github.com/page-visibility-api-demo

Slide 6

Slide 6 text

spotify-remote https://github.com/rmehner/spotify-remote Stops polling when no client is connected (= reduced resource usage)

Slide 7

Slide 7 text

stop animations stop video playback give the user a digest of the latest changes when he’s back stop polling pause/resume a game stop playing sounds (that annoying “which tab is playing sound?”) Use cases Not only for saving battery, but also for a lot of additional UX stuff

Slide 8

Slide 8 text

Coming to your browser soon (currently implemented in Chrome Canary)

Slide 9

Slide 9 text

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.)

Slide 10

Slide 10 text

Polyfills to the rescue! Modernizr Wiki: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills Using focusin/focusout/blur events as fallback

Slide 11

Slide 11 text

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 fires the event when the user switches the tab, iPad not * iOS stops execution of JS when you switch a tab * workaround with heartbeat

Slide 12

Slide 12 text

http://coding-robin.de/2013/03/13/using-the-page-visibility-api.html

Slide 13

Slide 13 text

Thanks. If I can do a talk, you can too!