API Page Visibility

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 da Mozilla 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.

***

Oferta exclusiva para os leitores iMasters deste artigo: todos os livros do Maujor com 25% de desconto no site da Novatec Editora! Insira o código promocional maujor25 no carrinho de compras para gerar o desconto. (Válido até 18/03/2013)