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. Existem também opções que alteram o comportamento das notificações.

Por padrão, chamar showNotification() apenas com opções visuais terá o seguinte: comportamentos:

  • Clicar na notificação não acontece nada.
  • Cada notificação nova é mostrada uma após a outra. O navegador não recolherá a 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 em outras a notificação desaparece mostrar a notificação, a menos que o usuário interaja com ela. Por exemplo, compare suas notificações no Android e em computadores).

Nesta seção, vamos ver como mudar esses comportamentos padrão usando opções sozinhos. Elas são relativamente fáceis de implementar e aproveitar.

Evento de clique em notificação

Quando um usuário clica em uma notificação, o comportamento padrão é que nada aconteça. Ela não ou até mesmo fechar ou remover a notificação.

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

Para fazer isso, você precisa adicionar um listener de eventos 'notificationclick' ao nosso service worker. Isso 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 que foi clicada pode ser acessada event.notification: A partir disso, você pode acessar as propriedades e os métodos da notificação. Neste 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, basta clicar no botão 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 noticationclick. para saber qual botão de ação foi clicado.

event.action contém o valor de action definido nas opções. No exemplo acima, Os valores event.action seriam um destes: 'coffee-action', 'doughnut-action', 'gramophone-action' ou 'atom-action'.

Com isso, detectaríamos cliques de notificação ou cliques de ação 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 diretas

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 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 "grupos" as notificações juntas, oferecendo uma experiência para determinar como várias notificações são exibidas ao usuário. Isso é mais fácil de explicar com um exemplo.

Vamos exibir uma notificação e atribuir a ela a tag 'message-group-1'. Exibiríamos 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 a tag do grupo de mensagens 1.

Vamos mostrar uma segunda notificação com uma nova tag '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 com a segunda tag do grupo de mensagens 2.

Agora, vamos mostrar uma terceira notificação, mas reutilizar a primeira tag de 'message-group-1'. Ao fazer isso irá fechar a primeira notificação e substituí-la pela nova notificação.

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, embora 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 exibido atualmente serão fechados se tiverem a mesma tag de uma nova notificação.

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

É aqui que entra a opção renotify.

Notificar novamente

No momento em que este artigo foi escrito, isso se aplicava em grande parte a dispositivos móveis. Definir essa opção torna novos as notificações vibrarão e tocarão um som do sistema.

Em alguns cenários, você pode receber 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, você deve definir tag e renotify para true.

const title = 'Notification 2 of 2';

const options = {
  tag: 'renotify',
  renotify: true,
};

registration.showNotification(title, options);

Silencioso

Essa opção permite que você mostre uma nova notificação, mas impede o comportamento padrão de vibração, e ativar a tela do dispositivo.

Essa é a opção 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 mostra notificações por um período definido antes de ocultá-las. Chrome ativado O 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é o usuário interagir com ela, adicione requireInteraction é a melhor opção. 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);

Considere essa opção. Mostrar uma notificação e forçar o usuário a parar para dispensar sua notificação pode ser frustrante.

Na próxima seção, veremos alguns dos padrões comuns usados na Web para o gerenciamento de notificações e a realização de ações, como abrir páginas quando uma notificação é clicada.

A seguir

Code labs