Selos para ícones de apps

A API App Badging permite que os apps da Web instalados definam um selo de uso geral no ícone do app.

Pete LePage

O que é a API App Badging?

Exemplo de Twitter com oito notificações e outro app mostrando um distintivo tipo bandeira.
Exemplo do Twitter com oito notificações e outro app mostrando uma bandeira tipo de selo.

A API App Badging permite que os apps da Web instalados definam um selo de todo o aplicativo, mostrados em um local específico do sistema operacional associado ao aplicativo (como a estante ou a tela inicial).

Com o uso de selos, é fácil notificar o usuário sutilmente sobre a existência de novas atividades que precisam de atenção ou para indicar uma pequena quantidade informações, como uma contagem de não lidos.

Os selos costumam ser mais fáceis de usar do que as notificações e podem ser atualizados. com uma frequência muito maior, já que não interrompem o usuário. E: porque não interrompem o usuário, não precisam da permissão do usuário.

Possíveis casos de uso

Exemplos de aplicativos que podem usar essa API:

  • Chat, e-mail e aplicativos sociais, para sinalizar a chegada de novas mensagens ou para mostrar o número de itens não lidos.
  • Apps de produtividade, para sinalizar que uma tarefa de longa duração em segundo plano (como renderização de imagem ou vídeo) for concluída.
  • Jogos, para sinalizar que uma ação do jogador é necessária (por exemplo, no xadrez, quando ela é a vez do jogador).

Suporte

A API App Badging funciona no Windows e no macOS no Chrome 81 e Edge 81 ou versões mais recentes. O suporte para o ChromeOS está em desenvolvimento e será disponibilizado no futuro lançamento. No Android, a API Badging não é compatível. Em vez disso, O Android mostra automaticamente um selo no ícone do app da Web instalado quando há uma notificação não lida, como nos apps Android.

Testar

  1. Abra o Demonstração da API App Badging.
  2. Quando solicitado, clique em Instalar para instalar o app ou use o navegador Chrome para instalá-lo.
  3. Abra-o como um PWA instalado. Observe que ele precisa estar sendo executado como um PWA instalado (na barra de tarefas ou no dock).
  4. Clique no botão Definir ou Limpar para definir ou limpar o selo do app. ícone. Você também pode fornecer um número para o valor do selo.

Como usar a API App Badging

Para usar a API App Badging, seu app da Web precisa atender a Critérios de instalação do Chrome, que precisam ser adicionados às telas iniciais.

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

  • setAppBadge(number): define o selo do app. Se um valor for fornecido, defina o ao valor fornecido, exibirá um ponto branco (ou outro conforme apropriado para a plataforma). Definir number como 0 é o mesmo que chamando clearAppBadge().
  • clearAppBadge(): remove o selo do app.

Ambos retornam promessas vazias que podem ser usadas para tratamento de erros.

O selo pode ser definido na página atual ou no service worker. Para definir ou limpar o selo (na página de primeiro plano ou o service worker), chame:

// Set the badge
const unreadCount = 24;
navigator.setAppBadge(unreadCount).catch((error) => {
  //Do something with the error.
});

// Clear the badge
navigator.clearAppBadge().catch((error) => {
  // Do something with the error.
});

Em alguns casos, o sistema operacional pode não permitir a representação exata do selo. Nesses casos, o navegador tentará fornecer a melhor representação para nesse dispositivo. Por exemplo, como a API Badging não tem suporte no Android, O Android só mostra um ponto em vez de um valor numérico.

Não presuma nada sobre como o user agent exibe o selo. Alguns user agents podem usar um número como "4000" e reescrever como "99+". Se você saturar o selo manualmente (por exemplo, definindo-o como "99") e o sinal "+" não serão exibidos. Não importa o número, basta ligar setAppBadge(unreadCount) e permitir que o user agent lide com exibindo-o de acordo.

Embora a API App Badging no Chrome exija um app instalado, você não deve fazer chamadas para a API Badging dependendo do estado de instalação. Basta chamar o método API quando ela existir, já que outros navegadores podem mostrar o selo em outros lugares. Se funciona, funciona. Se não, ela simplesmente não age.

Como configurar e remover o selo em segundo plano de um service worker

Também é possível definir o selo do app em segundo plano usando o service worker. Faça isso por meio de uma sincronização periódica em segundo plano, a API Push ou uma combinação de ambos.

Sincronização periódica em segundo plano

A sincronização periódica em segundo plano permite que um service worker para consultar 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 é chamado de a critério do navegador.

API Web Push

A API Push permite que os servidores enviem mensagens para service workers, que executa código JavaScript mesmo sem uma página em primeiro plano. Assim, um push do servidor pode atualizar o selo chamando navigator.setAppBadge().

No entanto, a maioria dos navegadores, inclusive o Chrome, exige que uma notificação seja exibido sempre que uma mensagem push é recebida. Isso é bom para alguns usos, casos (por exemplo, mostrar uma notificação ao atualizar o selo), mas torna impossível atualizá-lo sutilmente sem mostrando uma notificação.

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

Uma combinação das opções anteriores

Embora não seja perfeito, o uso da API Push e da sincronização periódica em segundo plano ao mesmo tempo oferece uma boa solução. Informações de alta prioridade são entregues por push API, mostrando uma notificação e atualizando o selo. E prioridade mais baixa informações são exibidas ao atualizar o selo, seja quando a página está aberta, ou por meio de uma sincronização periódica em segundo plano.

Feedback

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

Fale sobre o design da API

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

Informar um problema com a implementação

Você encontrou um bug na implementação do Chrome? Ou a implementação diferente das especificações?

  • Registre um bug em https://new.crbug.com. Certifique-se de incluir o máximo de detalhes instruções simples para reprodução e defina Componentes como UI>Browser>WebAppInstalls. O Glitch funciona muito bem para o compartilhamento de reproduções rápidas e fáceis.

Mostrar suporte à API

Quer usar a API App Badging no seu site? Seu apoio público ajuda os equipe do Chrome priorizar os recursos e mostrar a outros fornecedores de navegador é apoiá-las.

Links úteis

Foto principal de Prateek Katyal ativado Exibir