Utilizzo dell'API Page Visibility

Ernest Delgado
Ernest Delgado
X

Introduzione

In qualità di sviluppatori web, tendiamo a essere entusiasti delle 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? Ma certo. Applicazioni di collaborazione in tempo reale che utilizzano la webcam e il microfono? Registrami

Meno entusiasmanti, seppur altrettanto importanti, sono le tecnologie che ci permettono di creare applicazioni che funzionano in modo più efficiente e forniscono una migliore esperienza utente complessiva. È qui che entra in gioco un'API come PageVisibilità.

L'API Page Visibilità svolge una funzione semplice ma importante: consente all'applicazione di sapere quando una pagina è visibile all'utente. Queste informazioni di base consentono 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 se non è 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 visualizza di nuovo la pagina
  • Un'applicazione può decidere di mostrare notifiche all'utente solo quando è nascosta dalla visualizzazione

All'inizio questa API potrebbe non sembrare molto utile al di là della comodità dell'utente, ma considerando l'enorme aumento della navigazione sul web mobile, qualsiasi cosa che aiuti a risparmiare la carica della batteria del dispositivo diventa molto importante. Grazie all'API PageVisibilità, il tuo sito può far sì che il dispositivo dell'utente consumi meno energia e duri più a lungo.

Supporto dei browser

  • 33
  • 12
  • 18
  • 7

Fonte

La specifica API, che al momento della stesura di questo documento si trova nella fase di suggerimento del candidato, fornisce proprietà per rilevare lo stato di visibilità del documento e un evento per rispondere ai cambiamenti di visibilità.

In questo tutorial illustrerò le nozioni di base dell'API e ti mostrerò come applicarla ad alcuni esempi pratici (se sei il tipo impaziente, non esitare a saltarli).

Proprietà di visibilità del documento

La versione corrente della specifica PageVisibilitàAPI definisce due proprietà del documento: il valore booleano hidden e l'enumerazione visibilityState. Al momento, la proprietà visibilityState ha quattro valori possibili: hidden, visible, prerender e unloaded.

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

Gestire i prefissi dei fornitori

Per mantenere l'attenzione sul codice anziché su tutti i prefissi specifici del fornitore, userò alcune funzioni helper per isolare le specifiche del browser. Non appena si interrompe il supporto per il browser Android 4.4, è possibile rimuovere questa parte e attenersi 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à 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ù dettagliata della visibilità del documento, puoi utilizzare la proprietà visibilityState. Questa proprietà restituisce uno dei quattro valori seguenti:

  • hidden: il documento è completamente nascosto alla visualizzazione
  • visible: il documento è visibile almeno parzialmente 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 supporteranno necessariamente).
  • unloaded: se il documento deve essere scaricato, verrà restituito questo valore (questo valore è facoltativo; non tutti i browser lo supporteranno 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 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 comporta molto di più che l'uso di funzioni sorprendenti e accattivanti che gli utenti possono vedere e con cui possono interagire. Un'applicazione davvero eccellente fa un uso ponderato delle risorse e dell'attenzione dell'utente e l'API Page Visibilità è una parte importante di questo puzzle. Per saperne di più sulla creazione di applicazioni web incentrate sulle risorse, consulta i nostri altri articoli relativi alle prestazioni.

Riferimenti esterni