Introdução
Como desenvolvedores da Web, tendemos a nos empolgar com as novas tecnologias que nos permitem criar páginas da Web interativas e cada vez mais envolventes. Gráficos 3D com WebGL? Com certeza. Recursos avançados de áudio com o WebAudio? Com certeza. Aplicativos de colaboração em tempo real usando a webcam e o microfone? Pode me inscrever!
As tecnologias que nos permitem criar aplicativos que são executados com mais eficiência e fornecem uma melhor experiência geral do usuário são menos interessantes, embora igualmente importante. É aqui que entra uma API como a PageVisibility.
A API Page Visibility tem 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 são visualizadas. Veja alguns exemplos:
- Uma página da Web que recupera informações de um servidor pode atrasar seu ciclo de atualização quando não está sendo ativamente visualizada
- Uma página que exibe um carrossel de imagens rotativo ou conteúdo de vídeo/áudio pode ser pausada até que o usuário a exiba novamente
- Um aplicativo pode decidir exibir notificações para o usuário somente quando estiver oculto da visualização
A princípio, 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 móvel, tudo que ajude a economizar a energia da bateria do dispositivo se torna muito importante. Com a API PageVisibility, seu site poderá ajudar o dispositivo do usuário a consumir menos energia e durar mais.
A especificação da API, que, no momento, está na fase de recomendação candidata, fornece tanto propriedades para detectar o estado de visibilidade do documento quanto um evento para responder a alterações de visibilidade.
Neste tutorial, vamos abordar os fundamentos da API e mostrar como aplicá-la em alguns exemplos práticos (se você for do tipo impaciente, pule para os exemplos).
Propriedades de visibilidade do documento
A versão atual da especificação PageVisibilityAPI define duas propriedades do documento: o booleano hidden e a enumeração visibilityState. Atualmente, a propriedade visibilityState tem quatro valores possíveis: hidden, visible, prerender e unloaded.
Como é de se esperar, 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 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 oculta 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 em todos os prefixos específicos do fornecedor, usarei algumas funções auxiliares para isolar as especificidades do navegador. Assim que você descontinuar a compatibilidade com o navegador do Android 4.4, poderá remover essa parte e manter 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 em 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 destes quatro valores:
hidden: o documento está completamente oculto da visualizaçãovisible: o documento está pelo menos parcialmente visível em pelo menos um dispositivo de telaprerender: o documento é carregado fora da tela e não fica visível (esse valor é opcional, nem todos os navegadores são necessariamente compatíveis)unloaded: se o documento for descarregado, esse valor será retornado (é opcional; nem todos os navegadores serão necessariamente compatíveis)
O evento VisibilityChange
Além das propriedades de visibilidade, há um evento visibilitychange que é acionado sempre que o estado de visibilidade do documento é alterado. Você pode 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 usar recursos chamativos e chamativos com os quais os usuários podem ver e interagir. Um aplicativo verdadeiramente ótimo usa os recursos e a 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 a criação de aplicativos da Web voltados para recursos, confira nossos outros artigos relacionados a desempenho.