Comportamento de notificações

Alexey Rodionov
Alexey Rodionov
X GitHub LinkedIn

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.

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

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.

Duas notificações em que a segunda marca do grupo de mensagens 2.

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.

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 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

Laboratórios de códigos