Utilizzo dell'API Page Visibility

Ernest Delgado
Ernest Delgado
X

Introduzione

In qualità di sviluppatori web, tendiamo a entusiasmarci per le nuove tecnologie che ci consentono di creare pagine web sempre più coinvolgenti e interattive. Grafica 3D con WebGL? Certo. Funzionalità audio avanzate con WebAudio? Certamente. Applicazioni di collaborazione in tempo reale che utilizzano la webcam e il microfono? Registrami!

Meno entusiasmanti, ma altrettanto importanti, sono le tecnologie che ci consentono di creare applicazioni che funzionano in modo più efficiente e offrono un'esperienza utente complessiva migliore. È qui che entra in gioco un'API come PageVisibility.

L'API Page Visibility svolge una funzione semplice ma importante: consente alla tua applicazione di sapere quando una pagina è visibile all'utente. Queste informazioni di base consentono di creare pagine web che si comportano in modo diverso quando non vengono visualizzate. Considera alcuni esempi:

  • Una pagina web che recupera informazioni da un server può rallentare il ciclo di aggiornamento quando non viene visualizzata attivamente
  • Una pagina che mostra un carosello di immagini a rotazione o contenuti video/audio può essere messa in pausa finché l'utente non la visualizza di nuovo.
  • Un'applicazione può decidere di mostrare le notifiche all'utente solo quando è nascosta alla vista

A prima vista, questa API potrebbe non sembrare molto utile, se non per la comodità dell'utente, ma considerando l'enorme aumento della navigazione sul web mobile, tutto ciò che aiuta a risparmiare la carica della batteria del dispositivo diventa molto importante. Utilizzando l'API PageVisibility, il tuo sito può aiutare il dispositivo dell'utente a consumare meno energia e a durare più a lungo.

Browser Support

  • Chrome: 33.
  • Edge: 12.
  • Firefox: 18.
  • Safari: 7.

Source

La specifica dell'API, che al momento della stesura di questo articolo è in fase di Candidate Recommendation, fornisce sia le proprietà per rilevare lo stato di visibilità del documento sia un evento per rispondere alle modifiche della visibilità.

In questo tutorial, illustrerò le nozioni di base dell'API e mostrerò come applicarla ad alcuni esempi pratici (se non hai pazienza, puoi passare direttamente a questi esempi).

Proprietà di visibilità del documento

La versione attuale della specifica PageVisibilityAPI definisce due proprietà del documento: il valore booleano hidden e l'enumerazione visibilityState. La proprietà visibilityState ha attualmente quattro valori possibili: hidden, visible, prerender e unloaded.

Come puoi immaginare, l'attributo hidden restituisce true quando il documento non è affatto visibile. In genere, questo significa che il documento è ridotto a icona, si trova in una scheda in background, la schermata di blocco del sistema operativo è attiva e così via. L'attributo è impostato su false se una parte del documento è almeno parzialmente visibile su almeno un display. Inoltre, per supportare gli strumenti di accessibilità, l'attributo hidden può essere impostato su false quando uno strumento come una lente d'ingrandimento oscura completamente il documento, ma ne mostra una visualizzazione.

Gestione dei prefissi dei fornitori

Per mantenere l'attenzione sul codice anziché su tutti i prefissi specifici del fornitore, utilizzerò alcune funzioni helper per isolare le specifiche del browser. Non appena interrompi il supporto per il browser Android 4.4, puoi rimuovere questa parte e utilizzare i nomi standard.

function getHiddenProp(){
    var prefixes = ['webkit','moz','ms','o'];

    // if 'hidden' is natively supported just return it
    if ('hidden' in document) return 'hidden';

    // otherwise loop over all the known prefixes until we find one
    for (var i = 0; i < prefixes.length; i++){
        if ((prefixes[i] + 'Hidden') in document)
            return prefixes[i] + 'Hidden';
    }

    // otherwise it's not supported
    return null;
}

Esempio di proprietà del documento

Ora possiamo scrivere una funzione cross-browser, isHidden(), per verificare se il documento è visibile.

function isHidden() {
    var prop = getHiddenProp();
    if (!prop) return false;

    return document[prop];
}

Per una visualizzazione più granulare della visibilità del documento, puoi utilizzare la proprietà visibilityState. Questa proprietà restituisce uno dei quattro valori seguenti:

  • hidden: il documento è completamente nascosto alla vista
  • visible: il documento è almeno parzialmente visibile su almeno un dispositivo di visualizzazione
  • prerender: il documento viene caricato fuori schermo e non è visibile (questo valore è facoltativo; non tutti i browser lo supportano necessariamente)
  • unloaded: se il documento deve essere scaricato, verrà restituito questo valore (questo valore è facoltativo; non tutti i browser lo supportano necessariamente)

L'evento VisibilityChange

Oltre alle proprietà di visibilità, esiste un evento visibilitychange che si attiva ogni volta che lo stato di visibilità del documento cambia. Puoi registrare un listener di eventi per questo evento direttamente nell'oggetto del documento:

Esempio di evento

// use the property name to generate the prefixed event name
var visProp = getHiddenProp();
if (visProp) {
  var evtname = visProp.replace(/[H|h]idden/,'') + 'visibilitychange';
  document.addEventListener(evtname, visChange);
}

function visChange() {
   var txtFld = document.getElementById('visChangeText');

   if (txtFld) {
      if (isHidden())
         txtFld.value += "Tab Hidden!\n";
      else
         txtFld.value += "Tab Visible!\n";
   }
}

Riepilogo

La creazione di un'ottima applicazione web non si limita all'utilizzo di funzionalità accattivanti e di grande impatto con cui gli utenti possono interagire. Un'applicazione davvero eccezionale fa un uso ponderato delle risorse e dell'attenzione dell'utente e l'API Page Visibility è un elemento importante di questo puzzle. Per scoprire di più sulla creazione di applicazioni web che tengono conto delle risorse, consulta gli altri articoli relativi alle prestazioni.

Riferimenti esterni