Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

API de Visibilidade de Página do HTML5

by
Length:ShortLanguages:

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Antigamente, tínhamos navegadores que não usavam abas para navegação, mas, hoje, quando vê todos os navegadores disponíveis, não há um que deixe de oferecer essa funcionalidade. Por ser programador, geralmente, tenho umas 10 ou 15 abas abertas ao mesmo tempo e, algumas vezes, esse número chega a 25~30.

Por Que Essa API?

Antes, não era possível determinar qual aba estava ativa e qual não estava, mas, com a ajuda da API de Visibilidade do HTML5, podemos detectar se nosso visitante está olhando nossa página ou não. 

Nesse tutorial, aprenderemos como lidar com a API de Visibilidade do HTML5,através de uma simples demonstração, que é capaz de descobrir o estado de nossa página. Nessa demonstração, alteraremos o título do documento, a partir do Estado de Visibilidade da Página.

Verificando o Estado de Visibilidade da Página

Com a chegada desa API, nós ganhamos duas novas propriedades de documentos, que realizam duas funções diferentes. A primeira é a document.visibilityState e a segunda é a document.hidden.

document.visibilityState pode conter um dos quatro valores listados abaixo:

  • hidden: A página não está visível na tela
  • prerender: A página está carregada, mas o usuário não a está visualizando
  • visible: A página está visível
  • unloaded: A página está prestes a sumir (o usuário pode ter fechado o navegador ou resolvido mudar de site)

document.hidden é uma propriedade booleana que é configurada como false se estiver visível e true se não estiver.

Agora, podemos controlar como nossos sites se comportam quando nossos sites não estiver visível ao usuárior.

Agora, já sabemos sobre a disponibilidade dessas propriedades, mas, é hora de prestar atenção ao evento que relacionado a esse comportamento, para que possamos ser notificados sobre a nova condição da visibilidade da página. Isso é feito através do evento visibilitychange. Veremos uma demonstração rápida sobre como lidar com esse evento.

Esse código é uma instância básica da utilização desse evento e da descoberta do estado atual da página. Lembre-se que ambas as propriedades e método deverão vir prefixados, uam vez que alguns navegadores ainda prefixos para elas. Agora, veremos o mesmo código de forma cross-browser:

Agora, temos todas as propriedades prefixadas de forma correta e com o evento pronto para ser usado. Mudaremos, agora, nosso código anterior.

Onde Podemos Usar Essa API?

Há várias cenários diferentes onde podemos usar essa API.

  1. Imagine que está num painel e a página está em busca de detalhes de algo feed RSS ou API, em intervalos de, digamos, dois minutos. Assim, podemos restringir a chamada ao feed RSS ou API, caso o usuário não esteja visualizando a página (ou seja, o usuário não esteja na aba da página em questão).
  2. Para um carrosel de iamgens. Podemos limitar o movimento do carrosel caso a página não esteja visível.
  3. De forma semelhante, podemos mostrar uma Notificação HTML só quando a página não estiver visível para o usuário.

Até agora, vimos o código que permite usar a API de Visibilidade de Página do HTML5. É hora para um pouco de ação.

Demonstraçã

  • Demonstração 1: Essa demonstração faz uso da API para alterar o título da página. Visualizar Demonstração
  • Demonstração 2: Esse demonstração mostra como restringir a busca de dados em algum servidor (AJAX) quando a página estiver inativa. 

Nessa demonstração, veremos como podemos restringir a busca de dados em algum servidor (AJAX), por novas informações, mas, somente, quando o usuário estiver com a página ativa. Assumindo que a jQuery está inclusa na página, o código abaixo incrementará o valor do contador, mas pode ser substituído por algo que realmente acesse algum servidor.

O HTML

O JavaScript

Visualizar Demonstração

Suporte dos Navegadores

Se quiser saber do suporte dos navegadores para essa API, recomendo dar uma olhada no Can I use?. Mas, para descobrir, programaticamente, pelo suporte do navegador, sugiro ler esse artigo aqui Detectar o Suporte às Várias Funcionalidades do HTML5. Por hora, temos um bom suporte para essa API em todas as versões mais atualizados dos navegadores.

Conclusão

Diria que temos uma API muito boa que inclui, somente, duas propriedades e um único evento. Dessa forma, pode ser, facilmente, integrada a suas aplicações que pode afetar, positivamente, a experiência do usuário. No mínimo, poderemos controlar como nossos sites se comportam quando não estão na visão dos usuários.

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.