Badging API

Blog fellyph cintra - Badging API

A Badging API é uma das novas APIs criadas para fechar o gap entre aplicações nativas, ela permite adicionar contador de notificações nos ícones da nossa PWA na barra de tarefas. Diferente de Push Notification a badging API é menos intrusiva apenas exibe um balão de notificação sobre o ícone da nossa aplicação.

Atualmente Windows 7+ e MacOS possuem suporte a essa funcionalidade através de token especial para o recurso. Google iniciou um projeto com foco na inclusão de novas funcionalidades e o mais legal que esse projeto será baseado em requisições feitas pela comunidade para saber mais sobre o projeto acesse o link.

Casos sugeridos para utilizar a badging API

  • Aplicações de Chat, email e social apps que precisam notificar que o usuário recebeu novas mensagens
  • Aplicações precisa sinalizar que processos que estavam rodando em background foram concluídas
  • Jogos que estão aguardando uma ação do usuário.

Requisitos

  • Chrome 73 ou superior
  • Aplicação precisa estar instalada como PWA

Como testar Badgin API?

A Badging API está disponível desde a versão 81 do Google Chome, era inicialmente previsto a entrega desse recurso na versão 78, mas o recurso precisou de alguns ajustes e foi entregue em três versões seguintes. Hoje o recurso está disponível no Chrome, Edge, Firefox para Windows para acompanhar o lançamento de novos recursos confira a página fugu tracker.

Registrando para versões de avaliações

  1. Requiste um token para a sua origin
  2. Adicione o token na sua página, temos dois modos para prover esse recurso em qualquer página da sua versão de teste.
    1. Adicionando uma meta tag origin-trial no cabeçalho da sua aplicação
    2. Se você tiver acesso à configuração do seu servidor, você também pode prover um token em sua página adicionando a propriedade Origin-Trial no seu HTTP header.
    3. Se você quiser testar localmente também pode fazer o uso habilitando a flag #enable-experimental-web-platform-features acessando o endereço chrome://flags
Caso queira utilizar o token você pode essa será a página de requisição

Para esse tutorial vamos utilizar a flag do chrome, atualmente(maio 2019) estamos na versão 74 a previsão do uso definitivo desse recurso será na versão 81. Caso esteja lendo este post com a versão do Chrome 81 ou superior esse passo não será necessário. Mas para quem utiliza versão inferior a 81 vamos habilitar o recurso acessando o endereço chrome://flags:

Para facilitar a nossa vida possa pesquisar por “experimental web” para ir diretamente a flag. Após a nossa flag habilitada precisamos reiniciar o nosso Chrome para o recurso funcionar no nosso browser.

Como utilizar o badging API?

Agora que habilitamos a flag hora de testar o recurso, a badging API tem duas funções window.ExperimentalBadge.set() para definir o contador e window.ExperimentalBadge.clear() para limpar nosso contador.

Para os nossos testes vamos utilizar como base o projeto que estou desenvolvendo no mini curso de PWA que estou rodando no YouTube.

Inicialmente vamos adicionar dois botões na nossa página:

<button class="badingAPI__add">Add</button> <button class="badingAPI__clean">Clean</button>
Code language: HTML, XML (xml)

Nosso JavaScript ficará da seguinte forma:

const addBadge = document.querySelector('.badingAPI__add'); const cleanBadge = document.querySelector('.badingAPI__clean'); let counterBadge = 0; let bagdeTimer; if (addBadge) { addBadge.addEventListener('click', () => { if (counterBadge === 0) { bagdeTimer = window.setInterval(() => { counterBadge += 1; window.ExperimentalBadge.set(counterBadge); console.log('counter'); }, 1000); } console.log('triggered'); }); if (cleanBadge) { cleanBadge.addEventListener('click', () => { counterBadge = 0; window.ExperimentalBadge.clear(); clearInterval(bagdeTimer); }); } }
Code language: JavaScript (javascript)

No Código acima realizamos uma simulação da atualização das notificações com um setInterval(), quando o usuário clica no botão “add” inicializamos o contador, passamos como parâmetro um número na função set, caso queiramos apenas exibir o balão sem um número, chamamos a função set sem passar nenhum parâmetro. Numa aplicação real atualizamos o contador quando temos uma mensagem não lida ou precisamos completar alguma tarefa.

Badging API no macOS, podemos ver o contador de notificações funcionando

Para o botão clean, quando o usuário clicar no botão, zeramos o contador e removemos a execução do nosso timer com clearInterval, e para remover a badge do ícone chamamos a função: window.ExperimentalBadge.clear().

Esse recurso está em modo de teste mas em breve será incorporado sem o uso de flag no Chrome para acompanhar o status e conferir mais informações acesse: https://developers.google.com/web/updates/2018/12/badging-api

Esse material faz parte do curso de PWA que estou rodando em meu canal do Youtube, para acompanhar as aulas sigam meu canal ou acessem a página do curso: https://blog.fellyph.com.br/curso-online-progressive-web-apps/

Qualquer dúvida só deixar um comentário e até o próximo post!

Por Fellyph Cintra

Fellyph Cintra é um Google Developer Expert focado em tecnologias web, com participação ativa na comunidade WordPress. Com mais de 14 anos de experiência no mercado, Fellyph já palestrou em mais de 30 eventos ao redor do Brasil e Europa, sempre abordando as boas práticas de desenvolvimento na web.

Deixe um comentário

O seu endereço de e-mail não será publicado.