Comportamento de notificações

Até agora, analisamos 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() com apenas opções visuais terá o seguinte comportamento:

  • Clicar na notificação não faz nada.
  • Cada nova notificação é mostrada uma após a outra. O navegador não vai ocultar as notificações de forma alguma.
  • A plataforma pode tocar um som ou fazer o dispositivo do usuário vibrar (dependendo da plataforma).
  • Em algumas plataformas, a notificação desaparece após um curto período, enquanto em outras ela é mostrada até que o usuário interaja com ela. Por exemplo, compare suas notificações no Android e no computador.

Nesta seção, vamos analisar como alterar esses comportamentos padrão usando apenas opções. Eles 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 é que nada aconteça. Ela nem fecha ou remove a notificação.

A prática comum para um clique em uma notificação é fechá-la e executar outra lógica (por exemplo, abrir uma janela ou fazer uma chamada de API para o aplicativo).

Para isso, adicione um listener de eventos 'notificationclick' ao service worker. Ela será chamada 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 você pode ver neste exemplo, a notificação clicada pode ser acessada como event.notification. Com isso, você pode acessar as propriedades e os métodos da notificação. Nesse caso, chame o método close() e realize outros trabalhos.

Ações

As ações permitem que você crie outro nível de interação com os usuários além de apenas clicar na notificação.

Botões

Na seção anterior, você aprendeu a 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, detectamos cliques em notificações ou ações, 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 inline

Além disso, na seção anterior, você aprendeu a adicionar uma resposta em linha à 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 vai conter 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 é basicamente 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. É mais fácil explicar com um exemplo.

Vamos mostrar uma notificação e dar a ela uma tag, 'message-group-1'. Vamos mostrar 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);

Isso vai mostrar nossa primeira notificação.

Primeira notificação com a tag do grupo de mensagens 1.

Vamos mostrar uma segunda notificação com uma nova tag de 'message-group-2', assim:

const title = 'Notification 2 of 3';

const options = {
  body
: "With 'tag' of 'message-group-2'",
  tag
: 'message-group-2',
};

registration
.showNotification(title, options);

Isso vai mostrar uma segunda notificação ao usuário.

Duas notificações em que a segunda tag do grupo de mensagens 2 é

Agora vamos mostrar uma terceira notificação, mas reutilizando 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.

Duas notificações em que a primeira é substituída por uma terceira.

A opção tag é simplesmente uma maneira de agrupar mensagens para que as notificações antigas que estão a serem exibidas sejam fechadas se tiverem a mesma tag que uma nova notificação.

Uma sutileza do uso de tag é que, quando ele substitui uma notificação, ele faz isso sem um som ou vibração.

É aqui que entra a opção renotify.

Renotify

Isso se aplica principalmente a dispositivos móveis no momento da escrita. Ativar essa opção faz com que as novas notificações vibrem e emitam um som do sistema.

Há situações em que você pode querer uma notificação de substituição para notificar o usuário em vez de atualizar silenciosamente. Os 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);

Silencioso

Essa opção permite mostrar uma nova notificação, mas impede o comportamento padrão de vibração, som e ativação da tela do dispositivo.

Isso é ideal se as notificações não exigirem atenção imediata do usuário.

const title = 'Silent Notification';

const options = {
  silent
: true,
};

registration
.showNotification(title, options);

Requer interação

O Chrome na área de trabalho vai mostrar as notificações por um período definido antes de ocultá-las. O Chrome para 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. Isso vai mostrar a notificação até que o usuário a dispense ou clique nela.

const title = 'Require Interaction Notification';

const options = {
  requireInteraction
: true,
};

registration
.showNotification(title, options);

Use essa opção com cuidado. 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

Code labs