API Notification Triggers

Com os acionadores de notificação, você pode 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 agenda.

Thomas Steiner

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

Os desenvolvedores da Web podem mostrar notificações usando a API Web Notifications. Esse recurso é usado com frequência 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 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 hora ou local, é atendida. Um exemplo de condição baseada em tempo é uma notificação de agenda que lembra você de uma reunião importante com seu chefe às 14h. Um exemplo de condição baseada na localização é uma notificação que lembra você de comprar leite quando você entra na área da sua mercearia. Recursos de conectividade de rede ou de economia de bateria, como o modo Soneca, podem atrasar a entrega de notificações push.

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

Casos de uso

Os aplicativos de agenda podem usar gatilhos de notificação baseados em tempo para lembrar o usuário de reuniões futuras. O esquema de notificação padrão de um app de calendário pode ser mostrar uma primeira notificação uma hora antes de uma reunião e outra notificação 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 a transmissão ao vivo de uma conferência está prestes a começar.

Sites de conversão de fusos horários podem usar gatilhos de notificação baseados em tempo para permitir que os usuários programem alarmes para conferências telefônicas ou videochamadas.

Status atual

Como usar acionadores de notificação

Ativação por about://flags

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

Detecção de recursos

Para descobrir se o navegador oferece suporte a gatilhos de notificação, verifique se a propriedade showTrigger existe:

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

Programação de uma notificação

Programe uma notificação de forma semelhante à exibição de uma notificação push comum, exceto 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),
  });
};

Cancelar uma notificação programada

Para cancelar notificações programadas, primeiro solicite uma lista de todas as notificações que correspondem a uma determinada tag usando 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 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 o DevTools está fechado.

Demonstração

Você pode conferir 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 básicos definidos em Como controlar o acesso a recursos poderosos da plataforma da Web, incluindo controle do usuário, transparência e ergonomia. Como essa API exige service workers, ela também exige um contexto seguro. O uso da API exige a mesma permissão das notificações push normais.

Controle do usuário

Essa API só está disponível no contexto de um ServiceWorkerRegistration. Isso implica que todos os dados necessários são armazenados no mesmo contexto e são excluídos automaticamente quando o worker de serviço é excluído ou quando o usuário exclui todos os dados do site para a origem. O bloqueio de cookies também impede a instalação de workers de serviço no Chrome e, portanto, o uso dessa API. As notificações 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 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 ativar o worker de serviço até que o usuário interaja com a notificação. Consequentemente, atualmente não há uma maneira conhecida de o desenvolvedor conseguir informações sobre o usuário por abordagens que podem invadir a privacidade, como a pesquisa de geolocalização do endereço IP. Esse design também permite que o recurso use mecanismos de programação fornecidos pelo sistema operacional como o AlarmManager do Android, que ajuda a preservar a bateria.

Feedback

A equipe do Chrome quer saber sobre sua experiência com os acionadores de notificação.

Conte sobre o design da API

Há algo na API que não funciona como esperado? Ou há métodos ou propriedades ausentes que você precisa para implementar sua ideia? Tem dúvidas ou comentários sobre o modelo de segurança? Envie um problema de especificação no repositório do GitHub dos acionadores de notificação ou adicione seus comentários 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 para reprodução e defina "Componentes" como UI>Notifications. O Glitch é ótimo para compartilhar reproduções de bugs rápidas e fáceis.

Planeja usar a API?

Você pretende usar os Disparadores de notificações no seu site? Seu apoio público nos ajuda a priorizar os recursos e mostra a outros fornecedores de navegadores a importância de oferecer suporte a eles. Envie um tweet para @ChromiumDev usando a hashtag #NotificationTriggers e nos informe onde e como você está usando.

Links úteis

• Explicação para o público
• Demonstração de gatilhos de notificações | Fonte da demonstração de gatilhos de notificações
• Rastreamento de bugs
• Entrada do ChromeStatus.com
• Componente do Blink: UI>Notifications

Agradecimentos

Os acionadores de notificação foram implementados por Richard Knoll e o texto explicativo foi escrito por Peter Beverloo, com contribuições de Richard. As seguintes pessoas revisaram o artigo: Joe Medley, Pete LePage e Richard e Peter. Imagem principal de Lukas Blazek no Unsplash.