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:
A API prevê duas propriedades e um evento conforme descritos a seguir:
Essa é uma propriedade booleana que retorna true se a página é visível ou false caso contrário.
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.
Esse evento dispara quando a visibilidade da página é alterada.
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.
Até a presente data o suporte para essa API é conforme a seguir:
visibilitychange quando a janela é minimizada.Em 2006 comecei a publicar nesse blog uma série de desafios CSS que consistiam em…
Há muito tempo que eu não publico um "Teste seu conhecimento". Esta semana, revendo algumas…
Introdução Elementos da marcação HTML podem ser aninhados uns dentro de outros, criando-se uma cadeia…
HTML5? Web universal? É comum eu me deparar com dúvidas sobre a HTML5 não só…
Quem é Tab Atkins Jr? Tab Atkins Jr, um desenvolvedor americano, trabalhou durante muitos anos…
Pessoal, a BrazilJS Conf 2013 disponibilizou para o Maujor cupons de desconto para serem oferecidos…
View Comments
Bah, acho que essa vou deixar para o Maujor responder.
Então: é que pra mim tá parecendo que a API Page Visibility é a mesma coisa. Não seria mais do mesmo? Se já tem os eventos blur e focus?
João, window.blur é o evento disparado quando a janela perde o foco (qdo vc muda de aba, por exemplo). Window.focus é quando a janela volta ao foco.
Falei besteira Maujor ?
Muito bom. Maujor sempre trazendo grandes soluções para todos. Espero que essa funcionalidade seja 'oficializada' logo. Assim, nós desenvolvedores, podemos contribuir com a economia de banda e processamento nos navegadores desktop dos nossos leitores (tenho um blog).
Qual é a diferença do window.blur e window.focus?
Se bem utilizada será muito útil em diversas situações. Vejo uma maior aplicação em sistemas robustos, como um homebroker ou email (que necessita de conexão constante via socket ou via requisições AJAX) ou aplicações que consomem memória em uso (vídeos, músicas e jogos).
Mais um benefício para o usuário que dependerá do correto desenvolvimento dos aplicativos.
Bem legal. Isso vai ser bastante útil pra melhorar a performance de alguns sistemas o/