No início de 2015, lançamos as notificações e mensagens push no Chrome para Android e computadores. Foi um grande avanço na Web. Os usuários podiam interagir mais profundamente com as experiências na Web, mesmo quando o navegador estava fechado.
Embora seja ótimo poder enviar essas mensagens, a única coisa que você podia fazer era clicar nelas para abrir uma página ou dispensá-las completamente.
Se você analisar as notificações fornecidas de forma nativa para apps em plataformas móveis, como iOS e Android, cada uma delas permite que o desenvolvedor defina ações contextuais que o usuário pode invocar e interagir. No Chrome 48, adicionamos uma capacidade semelhante às notificações da Web na versão para computador e no Chrome para Android.
A adição à API é bem simples. Basta criar uma matriz de
ações e adicioná-las ao objeto NotificationOptions ao chamar
showNotification de um registro do ServiceWorker (diretamente no
ServiceWorker ou em uma página usando navigator.serviceWorker.ready).
No momento, o Chrome só oferece suporte a duas ações em cada notificação.
Algumas plataformas podem oferecer mais suporte, e outras menos ou nenhum. É possível determinar a compatibilidade da plataforma verificando
Notification.maxActions. Nos exemplos a seguir, presumimos 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 vai criar uma notificação simples com dois botões. Não é possível adicionar ícones à ação diretamente (ainda), mas você pode usar emojis e o conjunto de caracteres Unicode estendido para adicionar 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 deixou 😻, o usuário pode
interagir com ela no futuro. As interações com
a notificação atualmente (a partir do Chrome 48) vêm pelo
evento notificationclick registrado no seu worker de serviço e podem ser
um clique geral na notificação ou um toque específico em um dos botões de
ação. Observação: no futuro, você também poderá responder ao eventonotificationclose.
Para entender qual ação o usuário realizou, inspecione a propriedade action
no evento e escolha entre abrir uma nova página para que o
usuário realize uma ação ou realizar 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 "curtir" ou "excluir" uma postagem em uma rede social que realizaria a ação nos dados locais do usuário e, em seguida, a sincronizaria com a nuvem sem abrir uma interface. No entanto, é uma boa prática enviar uma mensagem sobre a mudança de dados para qualquer janela aberta para que a interface possa ser atualizada. Para uma ação que exige interação do usuário, você abriria uma janela para que o usuário responda.
Como as plataformas não oferecem suporte ao mesmo número de ações ou, em alguns casos, não oferecem suporte aos botões de ação de notificação, é necessário oferecer sempre uma alternativa razoável para uma tarefa que seja o que você espera que o usuário faça se clicar na notificação.
Se você quiser conferir isso em ação, confira o Notification Test Harness de Peter Beverloo e leia a especificação de notificações ou siga as atualizações da especificação.