API Notification Triggers

Os acionadores de notificações permitem programar notificações locais que não exigem uma conexão de rede, o que as torna ideais para casos de uso como apps de calendário.

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

Os desenvolvedores da Web podem mostrar notificações usando a API Web Notifications. Geralmente, esse recurso é usado com a API Push para informar o usuário sobre informações urgentes, como eventos de notícias recentes ou mensagens recebidas. As notificações são exibidas 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 precisam ser mostradas quando uma condição específica, como horário ou local, é atendida. Um exemplo de condição baseada no tempo é uma notificação da agenda que lembra você de uma reunião importante com seu chefe às 14h. Um exemplo de condição com base no local é uma notificação que lembra você de comprar leite quando entra nas proximidades do seu supermercado. A conectividade de rede ou recursos de preservação da bateria, como o modo Soneca, podem atrasar a entrega de notificações baseadas em push.

Os acionadores de notificações resolvem esse problema, permitindo que você programe notificações com a condição de acionamento com antecedência, para que o sistema operacional entregue a notificação no momento certo, mesmo que não haja conectividade de rede ou que o dispositivo esteja no modo de economia de bateria.

Casos de uso

Os aplicativos de agenda podem usar acionadores de notificação baseados em horário para lembrar o usuário das próximas reuniões. O esquema de notificação padrão para um app de agenda pode ser mostrar uma primeira notificação de alerta uma hora antes de uma reunião e outra mais urgente cinco minutos antes.

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

Os sites de conversão de fuso horário podem usar acionadores de notificação baseados em horário para permitir que os usuários programem alarmes para videoconferências ou videochamadas.

Status atual

Step	Status
1. Criar uma explicação	Concluído
2. Criar rascunho inicial da especificação	Not started
3. Colete feedback e itere sobre o design.	Em andamento
4. Teste de origem	Completos
5. Iniciar	Not started

Como usar acionadores de notificação

Ativar via about://flags

Para testar a API Notification Triggers localmente, sem um token de teste de origem, ative a sinalização #enable-experimental-web-platform-features em about://flags.

Detecção de recursos

Para descobrir se o navegador é compatível com acionadores de notificação, verifique a existência da propriedade showTrigger:

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

Como programar uma notificação

O agendamento de uma notificação é semelhante à exibição de uma notificação push normal. A diferença é que você precisa transmitir uma propriedade de condição showTrigger com um objeto TimestampTrigger como o valor para o 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),
  });
};

Como cancelar uma notificação programada

Para cancelar notificações programadas, primeiro solicite uma lista com todas as notificações que correspondem a uma determinada tag pelo método ServiceWorkerRegistration.getNotifications(). É necessário transmitir a flag 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 as notificações. Para iniciar a depuração, pressione Start recording events 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 ele está fechado.

Demonstração

Veja os acionadores de notificação em ação na demonstração, que permite programar notificações, listar notificações programadas e cancelá-las. O código-fonte está disponível no Glitch.

Segurança e permissões

A equipe do Chrome projetou e implementou a API Notification Triggers usando os princípios fundamentais definidos em Como controlar o acesso a recursos avançados da plataforma 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 que as notificações push comuns.

Controle do usuário

Essa API só está disponível no contexto de uma 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 relacionados à origem. O bloqueio de cookies também impede que os service workers sejam instalados no Chrome e, portanto, essa API seja usada. As notificações sempre podem ser desativadas pelo usuário nas configurações do site.

Transparência

Ao contrário da API Push, essa API não depende da rede, o que significa que as notificações programadas precisam de todos os dados necessários com antecedência, incluindo os recursos de imagem referenciados pelos atributos badge, icon e image. Isso significa que a exibição de uma notificação programada não é observável pelo desenvolvedor e não envolve a ativação do service worker até que o usuário interaja com a notificação. Por isso, ainda não existe uma forma conhecida de o desenvolvedor conseguir informações sobre o usuário usando abordagens que violam a privacidade, como a pesquisa de geolocalização de endereços IP. Esse design também permite que o recurso acesse os mecanismos de programação fornecidos pelo sistema operacional, como o AlarmManager do Android, o que ajuda a economizar bateria.

Feedback

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

Fale sobre o design da API

Há algo na API que não funciona como você esperava? Ou faltam métodos ou propriedades para implementar sua ideia? Tem alguma dúvida ou comentário sobre o modelo de segurança? Registre um problema específico no repositório de acionadores de notificação do GitHub (em inglês) ou adicione suas ideias a um problema existente.

Problemas com a implementação?

Você encontrou um bug na implementação do Chrome? Ou a implementação é diferente da especificação? Registre um bug em new.crbug.com. Inclua o máximo de detalhes possível, instruções simples de reprodução e defina componentes como UI>Notifications. O Glitch funciona muito bem para compartilhar reproduções de bugs rápidas e fáceis.

Pretende usar a API?

Pretende usar acionadores de notificação no seu site? Seu suporte público nos ajuda a priorizar recursos e mostra a outros fornecedores de navegadores como é importante oferecer suporte a eles. Envie um tweet para @ChromiumDev usando a hashtag #NotificationTriggers e informe onde e como ela está sendo usada.

Links úteis

• Explicação pública
• Demonstração dos acionadores de notificação | Origem da demonstração dos acionadores de notificação
• Bug de rastreamento
• Entrada ChromeStatus.com
• Componente Blink: UI>Notifications

Agradecimentos

Os acionadores de notificações foram implementados por Richard Knoll e a explicação escrita por Peter Beverloo, com contribuições de Richard. As pessoas a seguir leram o artigo: Joe Medley, Pete LePage e Richard e Peter. Imagem principal, de Lukas Blazek, no Unsplash.