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 de o usuário abrir uma outra interface qualquer sobre a interface do navegador na prática efetivamente 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.

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ópia 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.

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.

Esta matéria foi publicada em: 2013-02-26 (terça-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para https://www.maujor.com/blog/2013/02/26/api-page-visibility/trackback no seu site.