Eles permitem programar notificações locais que não exigem conexão de rede, o que os torna ideais para casos de uso como apps de agenda.
O que são acionadores de notificação?
Os desenvolvedores Web podem exibir notificações usando a API Web Notifications. Este recurso é frequentemente usado com a API Push para informar ao usuário informações urgentes, como eventos de últimas notícias 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 calendário que lembra 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 entra nas proximidades do supermercado. A conectividade de rede ou os recursos de preservação de bateria, como o modo Soneca, podem atrasar a entrega de notificações 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 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 apps de agenda podem usar acionadores de notificação com base em tempo para lembrar um usuário das próximas reuniões. O esquema de notificação padrão de um app de agenda pode ser mostrar uma primeira notificação 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 tempo para permitir que os usuários programem alarmes para conferências telefônicas ou videochamadas.
Status atual
Step | Status |
---|---|
1. Criar explicação | Concluído |
2. Criar um rascunho inicial da especificação | Não iniciada |
3. Colete feedback e itere o design. | Em andamento |
4. Teste de origem | Concluída |
5. lançamento | Não iniciada |
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
flag #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 da 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. 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 as 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
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 iniciar a depuração, pressione Iniciar gravação de eventos ou Control + E (Command + E no Mac). O Chrome DevTools registra todos os eventos de notificação, incluindo as programadas, exibidas e fechadas, por três dias, mesmo quando o DevTools está fechado.
Demonstração
Confira como os acionadores de notificação funcionam na demonstração, o que permite programar notificações, listar notificações programadas e cancelá-las. O código-fonte está disponível no Glitch (link em inglês).
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 avançados da Web Platform, incluindo controle pelo 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 normais.
Controle do usuário
Essa API só está disponível 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 da origem. O bloqueio de cookies também impede que service workers sejam instalados no Chrome e, portanto, essa API seja usada. As notificações do site
podem ser desativadas pelo usuário nas configurações do site a qualquer momento.
Transparência
Ao contrário da API Push, essa 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 que a exibição de 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 conseguir informações sobre o usuário por meio de abordagens que possivelmente invadem a privacidade, como a pesquisa de geolocalização de endereços IP. Esse design também
permite que o recurso aproveite 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 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 faltam métodos ou propriedades que você precisa para implementar sua ideia? Tem uma pergunta ou comentário sobre o modelo de segurança? Registre um problema de especificação no repositório do GitHub sobre acionadores de notificação (em inglês) ou inclua 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. Inclua o máximo de detalhes possível,
instruções simples para reprodução e defina "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 acionadores de notificação no seu site? Seu apoio público nos ajuda a priorizar recursos e mostra a outros fornecedores de navegadores como é fundamental oferecer suporte a eles. Envie um tweet para
@ChromiumDev usando a hashtag
#NotificationTriggers
e informe onde e como você está usando essa hashtag.
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 (links em inglês), com contribuições de Richard. As seguintes pessoas avaliaram o artigo: Joe Medley, Pete LePage, bem como Richard e Peter. Imagem principal de Lukas Blazek no Unsplash.