Utilizzo dell'API Page Visibility

Ernest Delgado

Introduzione

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

Meno entusiasmanti, ma ugualmente 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 all'applicazione di sapere quando una pagina è visibile all'utente. Questa informazione di base consente la creazione di pagine web che si comportano in modo diverso quando non vengono visualizzate. Ecco 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ò mettere in pausa finché l'utente non visualizza di nuovo la pagina
• Un'applicazione può decidere di mostrare le notifiche all'utente solo quando è nascosta alla visualizzazione

A prima vista, questa API potrebbe non sembrare molto utile oltre alla praticità per l'utente, ma, considerando l'enorme aumento della navigazione web mobile, tutto ciò che aiuta a risparmiare la batteria del dispositivo diventa molto importante. Se utilizzi l'API PageVisibility, il tuo sito può contribuire a ridurre il consumo di energia del dispositivo dell'utente e a prolungarne la durata.

La specifica dell'API, che al momento della stesura di questo articolo è nella fase di raccomandazione dei candidati, 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 sei di fretta, puoi andare direttamente agli esempi).

Proprietà di visibilità dei documenti

La versione corrente 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 ci si potrebbe aspettare, l'attributo nascosto restituisce true quando il documento non è visibile. In genere, significa che il documento è ridotto a icona, in una scheda in background, la schermata di blocco del sistema operativo è attiva e così via. L'attributo viene 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 dello schermo oscura completamente il documento, ma ne mostra una visualizzazione.

Gestire i prefissi dei fornitori

Per concentrarmi sul codice anziché su tutti i prefissi specifici del fornitore, utilizzerò alcune funzioni di supporto per isolare i componenti specifici del browser. Non appena rimuovi il supporto del browser Android 4.4, puoi rimuovere questa parte e attenerti ai 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à documento

Ora possiamo scrivere una funzione cross-browser, isHidden(), per vedere 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:

• hidden: il documento è completamente nascosto alla visualizzazione
• visible: il documento è almeno parzialmente visibile su almeno un dispositivo di visualizzazione
• prerender: il documento viene caricato fuori dallo 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)

Evento VisibilityChange

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

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'applicazione web di qualità implica molto di più che l'utilizzo di funzionalità accattivanti e innovative che gli utenti possono vedere e con cui interagire. Un'applicazione davvero eccezionale utilizza in modo attento le risorse e l'attenzione dell'utente e l'API Page Visibility è un elemento importante di questo puzzle. Per scoprire di più sulla creazione di applicazioni web rispettose delle risorse, consulta i nostri altri articoli relativi al rendimento.

Riferimenti esterni

• Specifica dell'API PageVisibility del W3C
• Gruppo di lavoro sul rendimento web
• Esempio di PageVisibility in IE10
• Visibility.js: un polyfill per PageVisibility
• isVis: un altro polyfill di PageVisibility