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

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.

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!