Ações de notificação no Chrome 48

No início de 2015, introduzimos as mensagens push e as notificações no Chrome para Android e computador. Foi um grande avanço na Web. Os usuários podem começar a interagir mais profundamente com as experiências na Web mesmo quando o navegador está fechado.

Embora seja ótimo poder enviar essas mensagens, a única coisa que você poderia fazer com uma delas era clicar nela e abrir uma página ou dispensá-la completamente.

Se você analisar as notificações fornecidas nativamente aos apps em plataformas móveis, como iOS e Android, cada uma permitirá que o desenvolvedor defina ações contextuais que o usuário pode invocar e interagir. No Chrome 48, adicionamos um recurso semelhante às Notificações da Web no computador e no Chrome para Android.

Captura de tela da notificação

É muito simples adicionar essa API. Você só precisa criar uma matriz de ações e adicioná-las ao objeto NotificationOptions quando chamar showNotification a partir de um registro de ServiceWorker (diretamente no ServiceWorker ou em uma página via navigator.serviceWorker.ready).

Atualmente, o Chrome é compatível apenas com duas ações em cada notificação. Algumas plataformas podem oferecer suporte a mais, e outras podem oferecer suporte a menos ou nenhum suporte. Verifique Notification.maxActions para saber quais são os suportes da plataforma. Nos exemplos abaixo, supomos que a plataforma oferece suporte a duas ações.

self.registration.showNotification('New message from Alice', {
  actions: [
    {action: 'like', title: 'Like'},
    {action: 'reply', title: 'Reply'}]
});

Isso criará uma notificação simples com dois botões. Não é possível adicionar ícones diretamente à ação (ainda), mas você pode usar Emojis e o conjunto de caracteres Unicode estendido para dar mais contexto aos botões de notificação.

Exemplo:

self.registration.showNotification("New message from Alice", {
  actions: [
    {action: 'like', title: '👍Like'},
    {action: 'reply', title: '⤻ Reply'}]
});

Agora que você criou uma notificação e a fez parecer 😻, o usuário pode interagir com ela em algum momento no futuro. Todas as interações com a notificação atualmente (a partir do Chrome 48) ocorrem pelo evento notificationclick registrado no service worker e podem ser um clique geral na notificação ou um toque específico em um dos botões de ação. Futuramente, você também poderá responder ao eventonotificationclose.

Para entender qual ação o usuário realizou, inspecione a propriedade action no evento. Em seguida, você pode abrir uma nova página para o usuário concluir uma ação ou executar a tarefa em segundo plano.

self.addEventListener('notificationclick', function(event) {
  var messageId = event.notification.data;

  event.notification.close();

  if (event.action === 'like') {
    silentlyLikeItem();
  }
  else if (event.action === 'reply') {
    clients.openWindow("/messages?reply=" + messageId);
  }
  else {
    clients.openWindow("/messages?reply=" + messageId);
  }
}, false);

O interessante é que as ações não precisam abrir uma nova janela, elas podem realizar interações gerais do aplicativo sem criar uma interface do usuário. Por exemplo, um usuário pode clicar em "Gostei" ou "Excluir" em uma postagem de mídia social que vai realizar a ação nos dados locais do usuário e depois sincronizá-la com a nuvem sem abrir uma interface. No entanto, é uma prática recomendada enviar uma mensagem sobre a mudança de dados em todas as janelas abertas para que a interface possa ser atualizada. Para uma ação que exige interação do usuário, abra uma janela para o usuário responder.

Como as plataformas não oferecem suporte ao mesmo número de ações ou, em alguns casos, não oferecem suporte a botões de ação de notificação, é necessário garantir que você sempre forneça um substituto adequado para uma tarefa que seja o que você espera que o usuário faça se apenas clicar na notificação.

Se você quiser ver isso em ação hoje, confira os harne de teste de notificação de Peter Beverloos e leia sobre a especificação de notificações ou acompanhe as especificações à medida que elas forem atualizadas.