Emblema para ícones de aplicativos

# O que é a App Badging API?

A API App Badging permite que os aplicativos da web instalados definam um emblema para todo o aplicativo, mostrado em um local específico do sistema operacional associado ao aplicativo (como a tela de notificações ou tela inicial).

Os emblemas tornam mais fácil notificar sutilmente o usuário de que há uma nova atividade que pode exigir sua atenção ou indicar uma pequena quantidade de informações, como uma contagem não lida.

Os emblemas tendem a ser mais amigáveis do que as notificações e podem ser atualizados com uma frequência muito maior, pois não interrompem o usuário. E, como não interrompem o usuário, não precisam da permissão do mesmo.

# Possíveis casos de uso

Exemplos de sites que podem usar essa API incluem:

• Bate-papo, e-mail e aplicativos sociais, para sinalizar que novas mensagens chegaram ou para mostrar o número de itens não lidos.
• Aplicativos de produtividade, para sinalizar que uma tarefa em segundo plano de longa execução (como renderizar uma imagem ou vídeo) foi concluída.
• Jogos, para sinalizar que uma ação do jogador é necessária (por exemplo, no xadrez, quando é a vez do jogador).

# Tente

1. Usando o Chrome 81 ou posterior no Windows ou Mac, abra a demonstração da API App Badging .
2. Quando solicitado, clique em Instalar para instalar o aplicativo ou use o menu do Chrome para instalá-lo.
3. Abra-o como um PWA instalado. Observe que ele deve ser executado como um PWA instalado (na barra de tarefas ou dock).
4. Clique no botão Definir ou Limpar para definir ou limpar o emblema do ícone do aplicativo. Você também pode fornecer um número para o valor do emblema.

# Como usar a App Badging API

Para usar a API App Badging, seu aplicativo da web precisa atender aos critérios de instalação do Chrome e os usuários devem adicioná-lo às telas iniciais.

A Badge API consiste em dois métodos no navigator:

• setAppBadge( number ): define o emblema do aplicativo. Se um valor for fornecido, defina o emblema com o valor fornecido, caso contrário, exiba um ponto branco simples (ou outro sinalizador conforme apropriado para a plataforma). Definir o number como 0 é o mesmo que chamar clearAppBadge().
• clearAppBadge() : Remove o emblema do aplicativo.

Ambos retornam valores vazios que você pode usar para tratamento de erros.

O emblema pode ser definido a partir da página atual ou do service worker registrado. Para definir ou limpar o emblema (na página de primeiro plano ou no service worker), chame:

// Define o emblema
const unreadCount = 24;
navigator.setAppBadge(unreadCount).catch((error) => {
  //Faça alguma coisa com o erro.
});

// Limpe o emblema
navigator.clearAppBadge().catch((error) => {
  // Faça alguma coisa com o erro.
});

Em alguns casos, o SO pode não permitir a representação exata do emblema. Nesses casos, o navegador tentará fornecer a melhor representação para esse dispositivo. Por exemplo, como a Badging API não é compatível com Android, o Android só mostra um ponto em vez de um valor numérico.

Não presuma nada sobre como o agente do usuário exibe o emblema. Alguns agentes de usuário podem pegar um número como "4000" e regravá-lo como "99+". Se você mesmo saturar o emblema (por exemplo, definindo-o para "99"), o "+" não aparecerá. Não importa o número real, apenas chame setAppBadge(unreadCount) e deixe o agente do usuário lidar com a exibição de acordo.

Embora a App Badging API no Chrome exija um aplicativo instalado, você não deve fazer chamadas para a API de emblemas dependendo do estado da instalação. Basta chamar a API quando ela existir, pois outros navegadores podem mostrar o emblema em outros locais. Se funcionar, funciona. Do contrário, simplesmente não funciona.

# Definir e limpar o emblema em segundo plano de um service worker

Você também pode definir o emblema do aplicativo em segundo plano usando o service worker, permitindo que sejam atualizados mesmo quando o aplicativo não estiver aberto. Faça isso por meio da API Push, sincronização periódica em segundo plano ou uma combinação de ambos.

# Sincronização periódica em segundo plano

A sincronização periódica em segundo plano permite a um service worker sondar periodicamente o servidor, que pode ser usado para obter um status atualizado, e chamar navigator.setAppBadge().

No entanto, a frequência com que a sincronização é chamada não é perfeitamente confiável e fica a critério do navegador.

# API Web Push

A API Push permite que os servidores enviem mensagens para service workers, que podem executar código JavaScript mesmo quando nenhuma página de primeiro plano está sendo executada. Portanto, um push de servidor pode atualizar o emblema chamando navigator.setAppBadge().

No entanto, a maioria dos navegadores, incluindo o Chrome, exige que uma notificação seja exibida sempre que uma mensagem push for recebida. Isso é bom para alguns casos de uso (por exemplo, mostrar uma notificação ao atualizar o emblema), mas torna impossível atualizar sutilmente o emblema sem exibir uma notificação.

Além disso, os usuários devem conceder permissão de notificação ao seu site para receber mensagens push.

# Uma combinação de ambos

Embora não seja perfeito, usar a API Push e a sincronização periódica em segundo plano fornecem uma boa solução. As informações de alta prioridade são fornecidas por meio da API Push, mostrando uma notificação e atualizando o emblema. E as informações de prioridade mais baixa são entregues atualizando o emblema, seja quando a página é aberta ou por meio de sincronização periódica em segundo plano.

# O futuro

A equipe do Chrome está investigando maneiras de atualizar o app badge em segundo plano de forma mais confiável e deseja ouvir você. Informe-os sobre o que funciona melhor para o seu caso de uso, comentando sobre o problema de Atualizações em Segundo Plano de Notificação.

# Feedback

A equipe do Chrome quer saber sobre suas experiências com a API App Badging.

# Conte-nos sobre o design da API

Existe algo na API que não funciona como você esperava? Ou faltam métodos ou propriedades de que você precisa para implementar sua ideia? Você tem alguma pergunta ou comentário sobre o modelo de segurança?

• Registre um problema de especificação no repositório Badging API GitHub ou adicione suas ideias a um problema existente.

# Comunicar um problema com a implementação

Você encontrou um bug com a implementação do Chrome? Ou a implementação é diferente da especificação?

• Registre um bug em https://new.crbug.com. Certifique-se de incluir o máximo de detalhes possível, instruções simples para reproduzir e definir Componentes para UI>Browser>WebAppInstalls. Glitch funciona muito bem para compartilhar reproduções rápidas e fáceis.

# Mostrar suporte para a API

Está planejando usar a API App Badging em seu site? Seu suporte público ajuda a equipe do Chrome a priorizar os recursos e mostra a outros fornecedores de navegadores como é fundamental apoiá-los.

• Envie um tweet para @ChromiumDev usando a hashtag #BadgingAPI e diga-nos onde e como você a está usando.

# Links úteis

• Explicador Público
• Demonstração da Badging API | Fonte de demonstração da Badging API
• Rastreamento de bug
• Entrada do ChromeStatus.com
• Componente Blink: UI>Browser>WebAppInstalls

Foto do herói por Prateek Katyal no Unsplash