HTML5 offre una serie di nuove invenzioni a dir poco esaltanti, da WebGL a WebAudio fino alla Geolocalizzazione e il Semantic Web.

Quello che invece spesso viene dimenticato è che fra le varie API e tecnologie ce ne sono un sacco più piccole e meno eclatanti ma comunque molto utili per fornire una esperienza web ancora più soddisfacente e piacevole.

Una fra questè è senza dubbio la Page Visibility API – un set di strumenti veloci da usare per capire quando un tab del browser è visibile e attivo oppure quando è fuori dal “focus”.

Sì ma a che serve?

L’utilità di questa API è evidente se si pensa ad una serie di casi tipo questi:

  • stoppare un video quando la pagina in cui si trova non è “attiva” (inutile, anzi probabilmente fastidioso, farlo andare avanti se l’utente non lo sta guardando)
  • fermare un carousel o delle animazioni se il tab non è quello corrente (sia per non affaticare il browser sia perchè così ci assicuriamo che l’utente non perda pezzi dello slideshow)
  • fermare delle attività in background (ad esempio il polling da un server IRC, o qualcosa di simile) se il tab non è attivo così da ridurre il carico sul browser, le richieste al server e il traffico di dati

L’unica nota un pochino stonata è che l’evento “visibility” viene lanciato e intercettato solo quando si naviga fra i tab aperti del browser, non quando si passa dal browser ad un’altra applicazione. Vista però la semplicità di utilizzo di queste API anche solo gestire il passaggio da un tab all’altro è già qualcosa che in pochi minuti possiamo aggiungere alle nostre pagine per rendere migliore la vita agli utenti.

Come funziona?

Il funzionamento dell’API è piuttosto semplice anche se un po’ scomodo se si desiderano supportare anche browser più vecchi.

Ecco uno script completo e funzionante:

Dopo aver settato il nome della variabile da verificare e il nome dell’evento da “ascoltare” (ovviamente fra qualche annetto questo check potrà essere eliminato…), il cuore di tutto sta in questi due semplici pezzi:

dove viene verificata la visibilità o meno del tab e poi:

dove aggiungiamo la chiamata all’evento “visibilityChange” (che abbiamo definito prima, in base al browser e all’eventuale vendor-prefix che ci dobbiamo aggiungere) per gestire i cambi di visibilità, ovvero quando passiamo dal nostro tab ad un alto.

Et voilà!

Visibility.js, un wrapper per il tutto

Per avere la pappa ancora più pronta possiamo usare un comodo wrapper, Visibility.js, che risolve i problemi dei vendor-prefix e rende ancora più lineare l’utilizzo dell’API:

Oltre a questo c’è anche un plugin per jQuery, jquery-visibility.

Supporto e compatibilità

La Page Visibility API è piuttosto ben supportata e a parte l’utilizzo di vendor-prefixes per i browser più vecchi sostanzialmente è gestita da tutti:

support-pagevisibilityapi

E allora… cucù! Il tab c’è o non c’è più? 😀

 

The following two tabs change content below.
Silvio Porcellana
Silvio Porcellana è il fondatore di mob.is.it, il tool che centinaia di agenzie e professionisti di tutto il mondo utilizzano per creare con semplicità siti mobili e applicazioni native per i loro clienti. Tiene anche un podcast dove racconta ogni venerdì le sue avventure imprenditoriali, senza veli o segreti: Opus Digitalis