API Notification Triggers

Os acionadores de notificação permitem que você programe notificações locais que não exigem uma conexão de rede, o que os torna ideais para casos de uso como aplicativos de agenda.

Thomas Steiner

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

Os desenvolvedores Web podem exibir notificações usando o API Web Notifications. Esse recurso é frequentemente usado com o API Push para informar ao usuário informações urgentes, como como notícias de última hora ou mensagens recebidas. As notificações são exibidas ao executar JavaScript na dispositivo do usuário.

O problema com a API Push é que ela não é confiável para acionar notificações, que precisam ser mostrado quando uma condição específica, como hora ou local, é atendida. Um exemplo de uma interface de usuário condição é uma notificação do calendário que lembra você de uma reunião importante com seu chefe às 14h. Um exemplo de condição com base na localização é uma notificação que lembra você de comprar leite quando você entra nas proximidades do supermercado. Conectividade de rede ou preservação da bateria recursos 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 seu acionamento condição 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 acionadores de notificação baseados em tempo para lembrar um usuário de reuniões. O esquema de notificação padrão de um aplicativo de agenda pode ser mostrar um primeiro 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 conferência está ao vivo está prestes a começar.

Os sites de conversão de fuso horário podem usar acionadores de notificação com base no horário para que os usuários possam agendar alarmes para conferências por telefone ou videochamadas.

Status atual

Como usar acionadores de notificação

Ativação 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

Você pode descobrir se o navegador é compatível com acionadores de notificação verificando a existência do Propriedade showTrigger:

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

Como programar uma notificação

Programar uma notificação é semelhante a mostrar uma notificação push normal, exceto que você precisa transmita uma propriedade de condição showTrigger com um objeto TimestampTrigger como o valor para a 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 as notificações programadas, primeiro solicite uma lista de todas as notificações que correspondem a um determinado usando ServiceWorkerRegistration.getNotifications(). Você precisa passar o valor-chave Sinalização 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

É possível usar o painel de notificações do Chrome DevTools para depurar notificações. Para começar depuração, pressione Iniciar gravação de eventos ou Control+E (Command+E no Mac). Registros do Chrome DevTools todos os eventos de notificação, incluindo as programadas, exibidas e fechadas, por três dias; mesmo quando o DevTools estiver fechado.

.

Demonstração

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

Segurança e permissões

A equipe do Chrome projetou e implementou a API Notification Triggers usando os princípios básicos. definido em Como controlar o acesso a recursos avançados da Web Platform, incluindo controle, transparência e ergonomia. Como essa API requer service workers, ela também requer uma em um contexto seguro. O uso da API requer a mesma permissão que as notificações push normais.

Controle do usuário

Essa API só está disponível no contexto de um ServiceWorkerRegistration. Isso significa que 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 referentes à origem. O bloqueio de cookies também impede que que os workers sejam instalados no Chrome e, portanto, essa API seja usada. As notificações podem ser sempre desativado 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 implica em notificações programadas não precisa de todos os dados necessários com antecedência, incluindo recursos de imagem referenciados por badge, icon e image. Isso significa que uma notificação programada não pode ser observada pelo desenvolvedor. e não envolve a ativação do service worker até que o usuário interaja com a notificação. Consequentemente, não existe atualmente uma maneira conhecida de o desenvolvedor obter informações sobre o usuário usando abordagens que podem violar a privacidade, como pesquisa de geolocalização de endereços IP. Este design também permite que o recurso aproveite, opcionalmente, os mecanismos de agendamento fornecidos pelo sistema operacional como o AlarmManager do Android, o que ajuda a economizar bateria.

Feedback

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

Fale sobre o design da API

Alguma coisa na API não funciona como você esperava? Ou há métodos faltando ou propriedades de que precisa para implementar sua ideia? Tem uma pergunta ou comentário sobre a segurança modelo? Registre um problema de especificação no repositório do GitHub sobre acionadores de notificação (em inglês) ou deixe sua opinião em um problema.

Problemas 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 new.crbug.com. Não deixe de incluir o máximo de detalhes possível, instruções simples para reprodução e defina "Componentes" como UI>Notifications. O Glitch funciona muito bem por compartilhar reproduções rápidas e fáceis de bugs.

Planeja usar a API?

Planeja usar acionadores de notificação no seu site? Seu apoio público nos ajuda a priorizar e mostra a outros fornecedores de navegador como é fundamental oferecer suporte a eles. Enviar um tweet para @ChromiumDev usando a hashtag #NotificationTriggers e informe onde e como você o utiliza.

Links úteis

• Explicações públicas
• Demonstração dos acionadores de notificação | Origem da demonstração dos acionadores de notificação
• Rastreamento de bug
• Entrada de ChromeStatus.com
• Componente Blink: UI>Notifications

Agradecimentos

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