Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Você está no BLOG do Maujor. IR PARA O SITE

API Page Visibility

Publicado em: 2013-02-26 — 6.879 visualizacoes

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.

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro Grid Layout   capa livro html5   capa livro css3   capa livro HTML5 e CSS3   capa livro RWD   capa livro jQuery   capa livro Bootstrap3   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro foundation   capa livro Sass e Compass

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 http://www.maujor.com/blog/2013/02/26/api-page-visibility/trackback no seu site.

8 comentários na matéria: “API Page Visibility”

  1. MarlonNo Gravatar disse:

    Bah, acho que essa vou deixar para o Maujor responder.

  2. João Batista FerreiraNo Gravatar disse:

    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?

  3. MarlonNo Gravatar disse:

    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 ?

  4. Links do Mês #2 Fevereiro 2013 | Front End Brasil disse:

    […] API Page Visibility | Blog do Maujor […]

  5. MarlonNo Gravatar disse:

    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).

  6. João Batista FerreiraNo Gravatar disse:

    Qual é a diferença do window.blur e window.focus?

  7. Rafael HeringerNo Gravatar disse:

    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.

  8. Fernando DaciukNo Gravatar disse:

    Bem legal. Isso vai ser bastante útil pra melhorar a performance de alguns sistemas o/

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo