Como usar a API Page Visibility

Ernest Delgado
Ernest Delgado
X

Introdução

Como desenvolvedores da Web, tendemos a ficar animados com novas tecnologias que nos permitem criar páginas da Web cada vez mais envolventes e interativas. Gráficos 3D com WebGL? Com certeza. Recursos de áudio avançados com o WebAudio? Com certeza. Aplicativos de colaboração em tempo real que usam a webcam e o microfone? Inscreva-me.

Menos empolgantes, embora igualmente importantes, são as tecnologias que nos permitem criar aplicativos que são executados de forma mais eficiente e proporcionam uma melhor experiência geral do usuário. É aqui que uma API como a PageVisibility entra em ação.

A API Page Visibility executa uma função simples, mas importante: permite que o aplicativo saiba quando uma página está visível para o usuário. Essa informação básica permite a criação de páginas da Web que se comportam de maneira diferente quando não estão sendo visualizadas. Confira alguns exemplos:

  • Uma página da Web que recupera informações de um servidor pode desacelerar o ciclo de atualização quando não está sendo visualizada ativamente
  • Uma página que mostra um carrossel de imagens ou conteúdo de vídeo/áudio pode ser pausada até que o usuário a mostre novamente
  • Um aplicativo pode decidir mostrar notificações ao usuário somente quando ele está oculto

No início, essa API pode não parecer muito útil além da conveniência do usuário, mas, considerando o enorme aumento na navegação na Web para dispositivos móveis, tudo o que ajuda a economizar a bateria do dispositivo se torna muito importante. Ao usar a API PageVisibility, seu site pode ajudar o dispositivo do usuário a consumir menos energia e durar mais.

Compatibilidade com navegadores

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

Origem

A especificação da API, que está na fase de recomendação de candidato, fornece as duas propriedades para detectar o estado de visibilidade do documento e um evento para responder a mudanças de visibilidade.

Neste tutorial, abordarei os fundamentos da API e mostrarei como aplicá-la em alguns exemplos práticos (se você for do tipo impaciente, fique à vontade para passar para eles).

Propriedades de visibilidade do documento

A versão atual da especificação da API PageVisibilityAPI define duas propriedades de documento: o booleano hidden e a enumeração visibilityState. No momento, a propriedade visibilityState tem quatro valores possíveis: hidden, visible, prerender e unloaded.

Como você pode imaginar, o atributo oculto retorna "true" quando o documento não está visível. Normalmente, isso significa que o documento está minimizado, em uma guia em segundo plano, a tela de bloqueio do SO está aberta etc. O atributo é definido como "false" se alguma parte do documento estiver pelo menos parcialmente visível em pelo menos uma tela. Além disso, para acomodar ferramentas de acessibilidade, o atributo oculto pode ser definido como falso quando uma ferramenta, como uma lupa de tela, obscurece completamente o documento, mas mostra uma visualização dele.

Como lidar com prefixos de fornecedores

Para manter o foco no código em vez de todos os prefixos específicos do fornecedor, vou usar algumas funções auxiliares para isolar as especificidades do navegador. Assim que você remover o suporte ao navegador do Android 4.4, poderá remover essa parte e usar os nomes padrão.

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;
}

Exemplo de propriedades do documento

Agora podemos criar uma função entre navegadores, isHidden(), para ver se o documento está visível.

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

    return document[prop];
}

Para uma visualização mais detalhada da visibilidade do documento, use a propriedade visibilityState. Essa propriedade retorna um dos quatro valores:

  • hidden: o documento está completamente oculto
  • visible: o documento está pelo menos parcialmente visível em pelo menos um dispositivo de exibição
  • prerender: o documento é carregado fora da tela e não está visível (esse valor é opcional. Nem todos os navegadores serão necessariamente compatíveis)
  • unloaded: se o documento for descarregado, esse valor será retornado. Esse valor é opcional e nem todos os navegadores oferecem suporte a ele.

O evento VisibilityChange

Além das propriedades de visibilidade, há um evento de alteração de visibilidade que é acionado sempre que o estado de visibilidade do documento é alterado. É possível registrar um listener de eventos para esse evento diretamente no objeto do documento:

Exemplo de 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";
   }
}

Resumo

Criar um ótimo aplicativo da Web envolve muito mais do que apenas usar recursos chamativos que os usuários podem ver e interagir. Um aplicativo realmente excelente faz uso cuidadoso dos recursos e da atenção do usuário, e a API de visibilidade da página é uma peça importante desse quebra-cabeça. Para saber mais sobre como criar aplicativos da Web com consciência de recursos, confira nossos outros artigos relacionados à performance.

Referências externas