Page Visibility API: Kouká na mě vůbec někdo?

Možná znáte výrok: „Vesmír existuje, jen když se na něj někdo dívá“. Mottem dnes popisované novinky – Page Visibility API – by mohla být parafráze tohoto výroku, nějak takto: „Stránka pracuje, jen když si ji někdo prohlíží“. Jak to celé funguje a jaký to má praktický význam? Ukážeme si v článku.

Novinka, dostupná zatím v prohlížeči Chrome od verze 13 umožňuje obsloužit programem změny ve viditelnosti stránky. Page Visibility API umožňuje programátorovi zjistit, jestli je stránka právě viditelná nebo ne. K tomu umožňuje na změny viditelnosti reagovat.

Prohlížeče dnes už celkem běžně nabízejí prohlížení v panelech. Jednotlivé otevřené stránky, respektive skripty v nich spuštěné, běží nezávisle na sobě, a především běží nejen na stránce, na kterou se uživatel právě dívá v aktivním panelu, ale i na ostatních. Pokud máte v panelech otevřené stránky, které se pravidelně aktualizují, kde běží nějaké náročné skripty, bujné animace či se přehrává video, představuje to poměrně velkou zátěž, která navíc běží „do zdi“. Zcela zbytečně se zatěžuje procesor, a u mobilních zařízení bude jistě mít nemalý vliv na výdrž baterie.

Implementace v Chrome

Page Visibility API je, jak jsme si už říkali, implementován v Chrome od verze 13 a jeho implementace je „vendor-prefixed“, viz http://code.google.com/chrome/whitepapers/pagevisibility.html. Funkce si proto popíšeme v podobě, v jaké jsou dostupné v prohlížeči Chrome, tedy s prefixem „webkit“, a mějme, prosím, na paměti, že po jejich rozšíření přijde sjednocení na „neprefixové“ verzi – použijte tedy nějaký „shim“, kterým si tyto funkce zpřístupníte v „normovaném“ tvaru.

Page Visibility API přidává dva atributy objektu document – atribut hidden a atribut visibilityState. V implementaci Chrome jsou dostupné jako document.webkitHidden a document.webkitVisibilityState.

webkitHidden je boolovská hodnota, která je true v případě, že stránka není vidět – tedy v případech, kdy je prohlížeč minimalizován, kdy je počítač zamknutý, kdy je stránka v panelu, který je na pozadí, dokonce i v případě, kdy je prohlížeč minimalizován a zobrazuje se jen jeho náhled. Hodnotu „False“ bude mít tehdy, když bude stránka zobrazená na popředí.

Na místě je podotknout, že v ostatních prohlížečích bude hodnota „undefined“, která je vyhodnocena jako „false“. Před prací s tímto atributem je rozumné udělat kontrolu pomocí if (typeof document.webkitHidden === "undefined")…

Předchozí atribut určuje, jestli stránku někdo může sledovat (jestli je viditelná), nebo zda je někde skrytá. Další atribut, document.webkitVisibilityState vrací řetězec, který udává přesněji stav, v jakém se stránka nachází:

hidden: Stránka je skrytá, není vidět, nezobrazuje se atd.
visible: Stránka je viditelná
prerender: Stránka byla vykreslena do cache, ještě ale není zobrazená
preview: Stránka se zobrazuje pouze v systémovém náhledu (např. při najetí kurzorem myši na minimalizovaný prohlížeč v panelu / docku) – tuto hodnotu Chrome zatím neimplementuje

Hodnoty „prerender“ a „preview“ nemusí prohlížeče poskytovat. Preferovaný způsob rozhodování, zda je stránka vidět nebo není, je podle atributu hidden (webkitHidden).

Vidí mě někdo?

Informace o viditelnosti samy o sobě nejsou až tak užitečné. Proto Page Visibility API nabízí i novou událost – visibilitychange (v implementaci Chrome jako „ webkitvisibilitychange“). Jak už název napovídá, tato událost je vyvolána ve chvíli, kdy se změní stav viditelnosti. Událost můžeme skriptem odchytit a zareagovat na ni.

Co si s touto informací skript má počít? Můžete např. snížit frekvenci periodického dotazování serveru a načítání novinek – když je stránka s chatem na pozadí nebo minimalizovaná, jistě není zapotřebí ji obnovovat co deset sekund, delší interval postačí. V případě, že se přehrává na stránce video, můžete jej „zapauzovat“ – viz pěkné demo od Sama Duttona. Pusťte si jej (v Chrome 13+, samosebou) a sledujte, co se bude dít, když si přepnete do jiného panelu, když prohlížeč minimalizujete atd.

Pro zajímavost – zdrojový kód výše odkázaného příkladu:

var videoElement = document.getElementById("videoElement");

// if the page is hidden, pause the video
// if the page is shown, play the video
function handleVisibilityChange() {
    if (document.webkitHidden) {
        videoElement.pause();
    } else {
        videoElement.play();
    }
}

// warn if the browser doesn't support document.webkitHidden
if (typeof document.webkitHidden === "undefined") {
    alert("This demo requires a browser such as Google Chrome 13 that supports the Page Visibility API.");
}

// avoid errors from browsers that don't support addEventListener
if (typeof document.addEventListener !== "undefined") {
    // handle page visibility change
    // see https://developer.mozilla.org/en/API/PageVisibility/Page_Visibility_API
    document.addEventListener("webkitvisibilitychange",  handleVisibilityChange, false);

    // revert to existing favicon for site when the page is closed
    // otherwise the favicon will remain as paused.png
    window.addEventListener("unload", function(){
        favicon.change('/favicon.ico');
    }, false);

    // when the video pauses, set the favicon
    videoElement.addEventListener("pause", function(){
        favicon.change('images/paused.png');
    }, false);

    // when the video plays, set the favicon
    videoElement.addEventListener("play", function(){
        favicon.change('images/playing.png');
    }, false);

    // set the document (tab) title from the current video time
    videoElement.addEventListener("timeupdate", function(){
        document.title = Math.floor(videoElement.currentTime) + " second(s)";
    }, false);
}

Využití najde v budoucnu toto API v nejrůznějších webových aplikacích, kde pomůže „snížit odběr“ ve chvílích, kdy budou aplikace minimalizované či „vypnuté“. Určitě naleznete další případy, v nichž má smysl, aby skript ve chvílích, kdy stránku nikdo nesleduje, takříkajíc „ubral plyn“.

Odkazy ke čtení

Tento text je již více než dva měsíce starý. Chcete-li na něj reagovat v diskusi, pravděpodobně vám již nikdo neodpoví. Pro řešení aktuálních problémů doporučujeme využít naše diskusní fórum.