Até agora, vimos as opções que alteram a aparência visual de uma notificação. Há também opções que alteram o comportamento das notificações.
Por padrão, chamar showNotification()
apenas com opções visuais terá os seguintes
comportamentos:
- Clicar na notificação não faz nada.
- Cada notificação nova é mostrada uma após a outra. O navegador não vai recolher as notificações.
- A plataforma pode emitir um som ou vibrar o dispositivo do usuário (dependendo da plataforma).
- Em algumas plataformas, a notificação desaparece após um curto período, enquanto outras a exibem, a menos que o usuário interaja com ela. Por exemplo, compare suas notificações no Android e no computador.
Nesta seção, vamos aprender como alterar esses comportamentos padrão usando apenas as opções. São relativamente fáceis de implementar e aproveitar.
Evento de clique na notificação
Quando um usuário clica em uma notificação, o comportamento padrão é nada acontecer. Ela nem fecha nem remove a notificação.
A prática comum de um clique na notificação é fechar e executar outra lógica, como abrir uma janela ou fazer uma chamada de API para o aplicativo.
Para isso, você precisa adicionar um listener de eventos 'notificationclick'
ao nosso service worker. Ele será chamado sempre que uma notificação for clicada.
self.addEventListener('notificationclick', (event) => {
const clickedNotification = event.notification;
clickedNotification.close();
// Do something as the result of the notification click
const promiseChain = doSomething();
event.waitUntil(promiseChain);
});
Como mostrado nesse exemplo, a notificação que foi clicada pode ser acessada como
event.notification
. A partir daqui, você pode acessar as propriedades e os métodos da notificação. Nesse
caso, você chama o método close()
e realiza outros trabalhos.
Ações
As ações permitem que você crie outro nível de interação com os usuários com apenas um clique na notificação.
Botões
Na seção anterior, você aprendeu como definir botões de ação ao chamar showNotification()
:
const title = 'Actions Notification';
const options = {
actions: [
{
action: 'coffee-action',
title: 'Coffee',
type: 'button',
icon: '/images/demos/action-1-128x128.png',
},
{
action: 'doughnut-action',
type: 'button',
title: 'Doughnut',
icon: '/images/demos/action-2-128x128.png',
},
{
action: 'gramophone-action',
type: 'button',
title: 'Gramophone',
icon: '/images/demos/action-3-128x128.png',
},
{
action: 'atom-action',
type: 'button',
title: 'Atom',
icon: '/images/demos/action-4-128x128.png',
},
],
};
registration.showNotification(title, options);
Se o usuário clicar em um botão de ação, verifique o valor event.action
no evento noticationclick
para saber qual botão de ação foi clicado.
event.action
vai conter o valor action
definido nas opções. No exemplo acima, os
valores de event.action
seriam um dos seguintes: 'coffee-action'
, 'doughnut-action'
,
'gramophone-action'
ou 'atom-action'
.
Com isso, detectaríamos cliques de notificação ou de ação como estes:
self.addEventListener('notificationclick', (event) => {
if (!event.action) {
// Was a normal notification click
console.log('Notification Click.');
return;
}
switch (event.action) {
case 'coffee-action':
console.log("User ❤️️'s coffee.");
break;
case 'doughnut-action':
console.log("User ❤️️'s doughnuts.");
break;
case 'gramophone-action':
console.log("User ❤️️'s music.");
break;
case 'atom-action':
console.log("User ❤️️'s science.");
break;
default:
console.log(`Unknown action clicked: '${event.action}'`);
break;
}
});
Respostas diretas
Além disso, na seção anterior, você aprendeu a adicionar uma resposta inline à notificação:
const title = 'Poll';
const options = {
body: 'Do you like this photo?',
image: '/images/demos/cat-image.jpg',
icon: '/images/demos/icon-512x512.png',
badge: '/images/demos/badge-128x128.png',
actions: [
{
action: 'yes',
type: 'button',
title: '👍 Yes',
},
{
action: 'no',
type: 'text',
title: '👎 No (explain why)',
placeholder: 'Type your explanation here',
},
],
};
registration.showNotification(title, options);
event.reply
contém o valor digitado pelo usuário no campo de entrada:
self.addEventListener('notificationclick', (event) => {
const reply = event.reply;
// Do something with the user's reply
const promiseChain = doSomething(reply);
event.waitUntil(promiseChain);
});
Tag
A opção tag
é essencialmente um ID de string que "agrupa" as notificações, oferecendo uma maneira fácil
de determinar como várias notificações são exibidas para o usuário. Isso é mais fácil de explicar
com um exemplo.
Vamos exibir uma notificação e atribuir a ela uma tag de 'message-group-1'
. Exibiremos a notificação com este código:
const title = 'Notification 1 of 3';
const options = {
body: "With 'tag' of 'message-group-1'",
tag: 'message-group-1',
};
registration.showNotification(title, options);
que mostrará a primeira notificação.
Exibiremos uma segunda notificação com uma nova tag de 'message-group-2'
, da seguinte forma:
const title = 'Notification 2 of 3';
const options = {
body: "With 'tag' of 'message-group-2'",
tag: 'message-group-2',
};
registration.showNotification(title, options);
Isso exibirá uma segunda notificação ao usuário.
Agora, vamos mostrar uma terceira notificação, mas reutilizar a primeira tag de 'message-group-1'
. Isso fecha a primeira notificação e a substitui pela nova.
const title = 'Notification 3 of 3';
const options = {
body: "With 'tag' of 'message-group-1'",
tag: 'message-group-1',
};
registration.showNotification(title, options);
Agora temos duas notificações mesmo que showNotification()
tenha sido chamado três vezes.
A opção tag
é simplesmente uma maneira de agrupar mensagens para que as notificações antigas exibidas
no momento sejam fechadas se tiverem a mesma tag de uma nova notificação.
Um ponto sutil do uso de tag
é que, ao substituir uma notificação, ele faz isso sem som
ou vibração.
É aqui que entra a opção renotify
.
Notificar novamente
Isso se aplica em grande parte a dispositivos móveis no momento em que este artigo foi escrito. A definição dessa opção faz com que novas notificações vibrem e toquem um som do sistema.
Há cenários em que você pode querer uma notificação de substituição para notificar o usuário, em vez de
atualizar silenciosamente. Aplicativos de chat são um bom exemplo. Nesse caso, defina tag
e
renotify
como true
.
const title = 'Notification 2 of 2';
const options = {
tag: 'renotify',
renotify: true,
};
registration.showNotification(title, options);
Silenciosas
Essa opção permite que você mostre uma nova notificação, mas impede o comportamento padrão de vibração, som e ativação da tela do dispositivo.
Isso é ideal caso suas notificações não exijam atenção imediata do usuário.
const title = 'Silent Notification';
const options = {
silent: true,
};
registration.showNotification(title, options);
Requer interação
O Chrome no computador vai mostrar as notificações por um período definido antes de ocultá-las. O Chrome no Android não tem esse comportamento. As notificações são exibidas até que o usuário interaja com elas.
Para forçar uma notificação a permanecer visível até que o usuário interaja com ela, adicione a opção
requireInteraction
. A notificação será exibida até que o usuário dispense ou clique nela.
const title = 'Require Interaction Notification';
const options = {
requireInteraction: true,
};
registration.showNotification(title, options);
Use essa opção com consideração. Mostrar uma notificação e forçar o usuário a parar o que ele está fazendo para dispensar a notificação pode ser frustrante.
Na próxima seção, vamos analisar alguns dos padrões comuns usados na Web para gerenciar notificações e realizar ações como abrir páginas quando uma notificação é clicada.
A seguir
- Visão geral das notificações push da Web
- Como funciona o envio por push
- Como inscrever um usuário
- UX de permissão
- Como enviar mensagens com bibliotecas push da Web
- Protocolo push da Web
- Como processar eventos push
- Exibir uma notificação
- Comportamento da notificação
- Padrões comuns de notificação
- Perguntas frequentes sobre notificações push
- Problemas comuns e como informar bugs