Acionadores de notificação

Os acionadores de notificação permitem que você agende notificações locais que não requerem uma conexão de rede, o que os torna ideais para casos de uso como aplicações de calendário.

Published on Updated on

Translated to: English, Español

Warning

O desenvolvimento da API dos acionadores de notificação, parte do projeto de recursos do Google, não é mais buscado. O cenário de notificação entre os sistemas operacionais está se movendo com bastante rapidez e não está claro se seríamos capazes de fornecer uma experiência sólida, consistente e confiável entre as plataformas.

Além disso, para criar uma boa experiência, é necessário que haja um mecanismo que consiga eliminar notificações programadas obsoletas ou invalidadas, por exemplo, eventos de calendário cancelados, sem depender da aba estar aberta. Ouvimos comentários de que a frequência com que a sincronização periódica em segundo plano pode ser usada não é suficiente para isso e que, por ser obrigada a mostrar uma notificação, a API Push também não é uma boa solução.

O que são acionadores de notificação?

Os desenvolvedores da web podem exibir notificações usando a API de notificações da web. Esse recurso é frequentemente usado com a API Push para informar o usuário sobre informações urgentes, como notícias de última hora ou mensagens recebidas. As notificações são mostradas executando o JavaScript no dispositivo do usuário.

O problema com a API Push é que ela não é confiável para acionar notificações que devem ser mostradas quando uma determinada condição, como hora ou local, é atendida. Um exemplo de condição com base no tempo é uma notificação de calendário que o lembra de uma reunião importante com seu chefe às 14h. Um exemplo de condição baseada em localização é uma notificação que o lembra de comprar leite quando você entra nas proximidades de sua mercearia. A conectividade de rede ou recursos de preservação de bateria, como o modo doze, podem atrasar a entrega de notificações em push.

Os acionadores de notificação resolvem esse problema permitindo que você agende notificações com sua condição do acionador com antecedência, de modo que o sistema operacional entregue a notificação no momento certo, mesmo se não houver conectividade de rede ou se o dispositivo estiver no modo de economia de bateria.

Por enquanto, o Chrome só oferece suporte a acionadores baseados em tempo. Os acionadores adicionais, como acionadores baseados em localização, podem ser adicionados no futuro com base na demanda do desenvolvedor.

Casos de uso

Os aplicativos de calendário podem usar acionadores de notificação baseados em tempo para lembrar um usuário de reuniões futuras. O esquema de notificação padrão para um aplicativo de calendário pode ser mostrar uma primeira notificação de alerta uma hora antes de uma reunião e, em seguida, outra notificação mais urgente cinco minutos antes.

Uma rede de TV pode lembrar aos usuários que seu programa de TV favorito está prestes a começar ou uma transmissão ao vivo de uma conferência está prestes a começar.

Os sites de conversão de fuso horário podem usar acionadores de notificação com base no tempo para permitir que seus usuários programem alarmes para conferências telefônicas ou chamadas de vídeo.

Status atual

PassoStatus
  1. Criação de um explicador | Concluído
  2. Criação da versão preliminar das especificações | Não iniciado
  3. Coleta de feedback e iteração do design. | Em andamento
  4. Teste de origem | Concluído
  5. Lançamento | Não iniciado

Como usar acionadores de notificação

Ativar via about://flags

Para experimentar a API de acionadores de notificação localmente, sem um token de teste de origem, ative o sinalizador #enable-experimental-web-platform-features em about://flags.

Dois testes de origem anteriores para o recurso, que deram aos desenvolvedores a chance de experimentar a API proposta, foram do Chrome 80 ao 83 e do Chrome 86 ao 88. Você pode ler o resumo do feedback obtido até agora.

Detecção de recursos

Você pode descobrir se o navegador oferece suporte a disparadores de notificação verificando a existência da propriedade showTrigger:

if ('showTrigger' in Notification.prototype) {
/* Notification Triggers supported */
}

Agendar uma notificação

Agendar uma notificação é semelhante a mostrar uma notificação push regular, exceto que você precisa passar uma propriedade de condição showTrigger com um objeto TimestampTrigger como o valor do objeto options da notificação.

const createScheduledNotification = async (tag, title, timestamp) => {
const registration = await navigator.serviceWorker.getRegistration();
registration.showNotification(title, {
tag: tag,
body: 'This notification was scheduled 30 seconds ago',
showTrigger: new TimestampTrigger(timestamp + 30 * 1000),
});
};

Na área de trabalho, os acionadores de notificação são acionados apenas se o Chrome estiver em execução. No Android, eles disparam independentemente.

Cancelar uma notificação programada

Para cancelar notificações programadas, primeiro solicite uma lista de todas as notificações que correspondem a uma determinada marca por meio de ServiceWorkerRegistration.getNotifications(). Observe que você precisa passar a sinalização do includeTriggered para que as notificações programadas sejam incluídas na lista:

const cancelScheduledNotification = async (tag) => {
const registration = await navigator.serviceWorker.getRegistration();
const notifications = await registration.getNotifications({
tag: tag,
includeTriggered: true,
});
notifications.forEach((notification) => notification.close());
};

Depuração

Você pode usar o painel de notificações do Chrome DevTools para depurar notificações. Para iniciar a depuração, pressione Iniciar gravação de eventos Iniciar gravação de eventos ou Control+E (Command+E no Mac). O Chrome DevTools registra todos os eventos de notificação, incluindo notificações programadas, exibidas e fechadas, por três dias, mesmo quando o DevTools está fechado.

Um evento de notificação exibido foi registrado no painel Notificações do Chrome DevTools, localizado no painel do aplicativo.
Uma notificação agendada.
Um evento de notificação exibido foi registrado no painel de Notificações do Chrome DevTools.
Uma notificação exibida.

Demonstração

Você pode ver os acionadores de notificação em ação na demonstração, que permite agendar notificações, listar notificações agendadas e cancelá-las. O código-fonte está disponível no Glitch.

Uma captura de tela do aplicativo da web de demonstração de acionadores de notificação.
A demonstração de acionadores de notificação.

Segurança e permissões

A equipe do Chrome projetou e implementou a API de acionadores de notificação usando os princípios básicos definidos em Controle de acesso a recursos poderosos da plataforma da Web, incluindo controle do usuário, transparência e ergonomia. Como essa API requer service workers, ela também requer um contexto seguro. O uso da API requer a mesma permissão das notificações push regulares.

Controle do usuário

Esta API está disponível apenas no contexto de um ServiceWorkerRegistration. Isso significa que todos os dados necessários são armazenados no mesmo contexto e são excluídos automaticamente quando o service worker é excluído ou o usuário exclui todos os dados do site para a origem. O bloqueio de cookies também impede que os service workers sejam instalados no Chrome e, portanto, que essa API seja usada. As notificações sempre podem ser desativadas pelo usuário para o site nas configurações do site.

Transparência

Ao contrário da API Push, esta API não depende da rede, o que implica que as notificações programadas precisam de todos os dados necessários com antecedência, incluindo recursos de imagem referenciados pelos atributos badge, icon e image. Isso significa mostrar que uma notificação programada não pode ser observada pelo desenvolvedor e não envolve despertar o service worker até que o usuário interaja com a notificação. Consequentemente, não há atualmente nenhuma maneira conhecida de o desenvolvedor obter informações sobre o usuário por meio de abordagens potencialmente invasoras de privacidade, como pesquisa de localização geográfica por endereço IP. Esse design também permite que o recurso toque de forma opcional nos mecanismos de agendamento fornecidos pelo sistema operacional, como o AlarmManager do Android, que ajuda a preservar a bateria.

Feedback

A equipe do Chrome quer saber mais sobre suas experiências com os acionadores de notificação.

Conte-nos sobre o design da API

Existe algo na API que não funciona como você esperava? Ou faltam métodos ou propriedades que você precisa para implementar sua ideia? Tem uma pergunta ou comentário sobre o modelo de segurança? Informe uma questão específica no repositório do GitHub de acionadores de notificação ou adicione suas ideias a uma questão já existente.

Problemas com a implementação?

Você encontrou um bug na implementação do Chrome? Ou a implementação é diferente da especificação? Informe um bug em new.crbug.com. Certifique-se de incluir o máximo de detalhes que puder, instruções simples para reproduzir e definir os componentes como UI>Notifications. O Glitch funciona muito bem para compartilhar reproduções rápidas e fáceis de bugs.

Planeja usar a API?

Planeja usar disparadores de notificação em seu site? Seu apoio público nos ajuda a priorizar os recursos e mostra a outros fornecedores de navegadores como é fundamental apoiá-los. Envie um tweet para @ChromiumDev usando a hashtag #NotificationTriggers e diga-nos onde e como você está usando.

Links úteis

Reconhecimentos

Os acionadores de notificação foram implementados por Richard Knoll e o explicador escrito por Peter Beverloo, com contribuições de Richard. As seguintes pessoas revisaram o artigo de: Joe Medley, Pete LePage, bem como Richard e Peter. A imagem do herói por Lukas Blazek em Unsplash.

Updated on Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.