Como usar a API Page Visibility

Ernest Delgado
Ernest Delgado
X

Introdução

Como desenvolvedores Web, costumamos 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 avançados de áudio com WebAudio? Com certeza. Aplicativos de colaboração em tempo real que usam a câmera da Web e o microfone? Eu quero!

Menos empolgantes, mas igualmente importantes, são as tecnologias que nos permitem criar aplicativos que funcionam de maneira mais eficiente e oferecem uma experiência geral melhor para o usuário. É aí que entra uma API como a PageVisibility.

A API Page Visibility executa uma função simples, mas importante: ela informa ao aplicativo 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. Veja alguns exemplos:

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

À primeira vista, 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 em dispositivos móveis, qualquer coisa que ajude 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.

Browser Support

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

Source

A especificação da API, que no momento em que este artigo foi escrito está no estágio de recomendação de candidato, fornece propriedades para detectar o estado de visibilidade do documento e um evento para responder às mudanças de visibilidade.

Neste tutorial, vou abordar os conceitos básicos da API e mostrar como aplicá-la a alguns exemplos práticos. Se você for do tipo impaciente, pule para eles.

Propriedades de visibilidade do documento

A versão atual da especificação da 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 esperado, o atributo oculto retorna verdadeiro 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á ativa etc. O atributo é definido como falso se qualquer parte do documento estiver pelo menos parcialmente visível em pelo menos uma tela. Além disso, para acomodar ferramentas de acessibilidade, o atributo hidden pode ser definido como false 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ê deixar de oferecer 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 escrever uma função para vários navegadores, isHidden(), para conferir se o documento está visível.

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

    return document[prop];
}

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

  • hidden: o documento fica 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 fica visível (esse valor é opcional; nem todos os navegadores são compatíveis com ele).
  • unloaded: se o documento for descarregado, esse valor será retornado (esse valor é opcional, nem todos os navegadores necessariamente oferecem suporte a ele)

O evento VisibilityChange

Além das propriedades de visibilidade, há um evento visibilitychange que é acionado sempre que o estado de visibilidade do documento muda. É 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 os recursos incríveis e chamativos que os usuários podem ver e com os quais podem interagir. Um aplicativo realmente excelente faz uso cuidadoso dos recursos e da atenção do usuário, e a API Page Visibility é uma parte importante desse quebra-cabeça. Para saber mais sobre como criar aplicativos da Web que usam recursos de forma consciente, confira nossos outros artigos relacionados ao desempenho.

Referências externas