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.
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.
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 #
- Criação de um explicador | Concluído
- Criação da versão preliminar das especificações | Não iniciado
- Coleta de feedback e iteração do design. | Em andamento
- Teste de origem | Concluído
- 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.
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),
});
};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 
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 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.
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 #
- Explicador público
- Demonstração de acionadores de notificação | Fonte de demonstração de acionadores de notificação
- Bug de rastreamento
- Entrada do ChromeStatus.com
- Componente Blink:
UI>Notifications
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.