Grazie al nuovo standard HTML5 abbiamo la possibilità di usufruire di nuove fiammanti API JavaScript che assottigliano sempre più il divario tra web e app. Le Page Visibility API permettono agli sviluppatori di intercettare i cambiamenti nella visibilità di una pagina.

Avete presente la navigazione a tab fornita dai browser? Con queste API si può capire quando un utente sta visualizzando il tab della vostra pagina web e quando no. Semplice semplice.

Manuale per l'utilizzo

Vengono introdotte due proprietà per document:

• document.hidden
  variabile booleana che ritorna true se la pagina è nascosta, false se è visibile.
• document.visibilityState
  variabile che può assumere quattro valori: visible, hidden, prerender, unloaded.
  • visible
    la pagina è visibile, il che significa che la pagina web si trova in una finestra in primo piano non minimizzata.
  • hidden
    la pagina è nascosta, il che significa che la pagina web si trova in una finestra minimizzata o in secondo piano.
  • prerender
    la pagina è stata caricata in modalità prerender, e quindi non è visibile all'utente (non tutti i browser che supportano le Visibility API lo prevedono).
  • unloaded
    la pagina sta venendo dismessa e chiusa (non tutti i browser che supportano le Visibility API lo prevedono).

Inoltre viene introdotto l'evento visibilitychange, che come suggerisce il nome viene richiamato ogni volta che la visibilità della pagina cambia.

document.addEventListener("visibilitychange", function ()
{
    document.title    = document.visibilityState;
});

Supporto dei browser

Il livello di supporto dei browser è discreto (alcuni richiedono l'utilizzo degli odiati prefissi).

Esistono numerosi polyfill per aumentare il supporto ai browser più legacy. Quello che noi di Librasoft utilizziamo è basato su jQuery:

https://github.com/mathiasbynens/jquery-visibility

L'utilizzo è molto semplice:

$(document).on('show', function()
{
    //la pagina è diventata visibile
});
$(document).on('hide', function()
{
    //la pagina è diventata nascosta
});

Alcune idee di utilizzo

Si può pensare a sistemi di play/pause automatici in base alla visibilità o meno della pagina: slideshow di foto, film, audiolibri, videogame...

O ancora sfruttare queste api per non sovraccaricare i server in caso di refresh automatici e periodici, evitando di effettuare il refresh quando la pagina non è visibile.

Voi lo avete mai utilizzato? Se sì, in che modo?