No início de 2015, lançamos mensagens push e notificações no Google Chrome para Android e computador. Foi um grande avanço na Web. Os usuários podem começar a interagir mais profundamente com experiências na Web, mesmo quando o navegador está fechado.
Embora seja ótimo poder enviar essas mensagens, você só fez clicar e abrir uma página ou ignorá-la completamente.
Se você analisar as notificações fornecidas de maneira nativa para apps em plataformas para dispositivos móveis, como iOS e Android, cada uma permite que o desenvolvedor defina ações contextuais que o usuário pode invocar e interagir. No Chrome 48, adicionamos um recurso semelhante ao recurso Notificações da Web em computadores e no Chrome para Android.
É bem simples adicionar à API. Você só precisa criar uma matriz de
ações e adicioná-las ao objeto NotificationOptions quando chamar
showNotification de um registro do 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
menos ou nenhum suporte. Para determinar o que é compatível com a plataforma, marque
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 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 seus 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 fez ela parecer 😻, o usuário pode
interagir com ela em algum momento no futuro. No momento, todas as interações com
a notificação (a partir do Chrome 48) são provenientes do
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. Observação: no futuro, você também poderá responder ao eventonotificationclose.
Para entender qual ação o usuário realizou, você precisa inspecionar a propriedade action
no evento e escolher entre abrir uma nova página para o
usuário concluir 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 app sem criar uma interface do usuário. Por exemplo, um usuário pode marcar com "Gostei" ou "Excluir" uma postagem de mídia social que executa a ação nos dados locais do usuário e a sincroniza com a nuvem sem abrir uma interface, embora seja uma prática recomendada enviar a mudança de dados para qualquer janela aberta para que a interface possa ser atualizada. Para uma ação que requer a 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 é possível oferecer suporte a botões de ação de notificação, é necessário garantir que você sempre forneça um substituto sensato para uma tarefa, que é esperado que o usuário fizesse se clicasse apenas na notificação.
Se você quiser conferir esse recurso hoje, confira a Política de Teste de Notificaçõesde Pedro Beverloo e leia a Especificação para notificações ou acompanhe as especificações conforme elas são atualizadas.
.