No dia 26 de julho de 2012 o W3C alterou o status da API Page Visibility para Candidata a Recomendação. Trata-se de uma API que permite ao desenvolvedor detectar a condição de visibilidade de uma página web para o usuário, ou seja, saber se a página está sendo visualizada no navegador ou se está oculta quer por ter o usuário minimizado a janela do navegador ou por ter aberto ou navegado para uma nova aba.
Convém esclarecer que a mudança de visibilidade está estritamente ligada à manipulação da interface do navegador, ou seja, às ações de minimizar a janela ou manipular as abas do navegador. O fato do usuário abrir uma outra interface qualquer sobre a interface do navegador na prática altera a visibilidade da página, mas não aciona os mecanismos de manipulação da API.
A objetivo geral dessa API é permitir ao desenvolvedor pausar tarefas que rodam na página nas ocasiões em que ela não está visível ao usuário.
Por exemplo:
- em uma página web pausar o refresh de conteúdo;
- em um cliente de email na web pausar as requisições ao servidor para novos emails;
- pausar um vídeo ou som;
- pausar um carrosel de imagens;
- pausar um game;
- …e muito mais.
Funcionalidades da API
A API prevê duas propriedades e um evento conforme descritos a seguir:
document.hidden
Essa é uma propriedade booleana que retorna true se a página é visível ou false caso contrário.
document.visibilityState
Essa propriedade retorna uma string indicando a condição de visibilidade da página. Os valores retornados, possíveis, são: hidden, visible, prerender e unloaded, que significam respectivamente: não visível, visível, carregado e não vísivel e descarregado.
Evento visibilitychange
Esse evento dispara quando a visibilidade da página é alterada.
Exemplo prático
Para ilustrar o uso dessa API, criamos um exemplo prático que consiste em pausar a reprodução de um vídeo quando a página está invisível e continuar a reprodução quando ela está à vista. Baixe os arquivos do exemplo. Esse é um exemplo típico para demonstração da API que consta em vários sites de desenvolvimento, entre eles o daMozilla Developer Network.
Todas as informações necessárias ao entendimento do funcionamento da API podem ser encontradas na própria página exemplo ou em comentários no código fonte da página.
Nota: no exemplo, a mudança do título da página, no navegador Chrome, se dá somente uma vez para “hidden”, não voltando a “visible”. Trata-se de um bug do navegador. Veja aqui.
Suporte nos navegadores
Até a presente data o suporte para essa API é conforme a seguir:
- Chrome: a partir da versão 13 com uso de prefixo webkit;
- Firefox: da versão 10 até a versão 18 com uso de prefixo moz. A partir da versão 18 suporte ao W3C (sem uso de prefixos);
- Internet Explorer: versão 10 com uso de prefixo ms;
- Opera: a partir da versão 12.10 suporte ao W3C (sem uso de prefixos). Não dispara o evento visibilitychange quando a janela é minimizada;
- Safari: não oferece suporte.