Comportamento de notificações

Alexey Rodionov
Alexey Rodionov
X GitHub LinkedIn

Até agora, analisamos as opções que alteram a aparência visual de uma notificação. Também há 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 nova notificação é mostrada uma após a outra. O navegador não vai recolher as notificações de forma alguma.
  • A plataforma pode tocar 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 mostram a notificação 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 sequer fecha ou remove a notificação.

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

Para isso, adicione um listener de eventos 'notificationclick' ao 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 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 outras ações.

Ações

As ações permitem criar 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ê viu 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 foi clicado.

event.action vai conter o valor de 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 da seguinte forma:

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ê viu como 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 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" notificações, oferecendo uma maneira fácil de determinar como várias notificações são mostradas ao usuário. É mais fácil explicar isso com um exemplo.

Vamos mostrar uma notificação e dar a ela uma tag de 'message-group-1'. Mostramos 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 vai mostrar nossa primeira notificação.

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

Vamos mostrar uma segunda notificação com uma nova tag de 'message-group-2', desta 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 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 reutilizar a primeira tag de 'message-group-1'. Isso vai fechar a primeira notificação e substituí-la 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.

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

É aí que entra a opção renotify.

Notificar novamente

Isso se aplica principalmente a dispositivos móveis no momento em que este artigo foi escrito. Ao definir essa opção, as novas notificações vão vibrar e tocar um som do sistema.

Há situações em que você pode querer que uma notificação de substituição notifique o usuário em vez de fazer uma atualização silenciosa. 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 para computador mostra 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. 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 interromper o que está fazendo para dispensá-la 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