No início de 2015, introduzimos as mensagens push e as notificações no Google Chrome para Android e computador. Foi um grande avanço na Web. Os usuários podem começar a se envolver mais profundamente com as experiências na web, mesmo quando o navegador foi fechadas.
Embora seja ótimo poder enviar essas mensagens, a única coisa que você poderia fazer uma delas era clicar e abrir a página ou dispensar totalmente.
Observe as notificações fornecidas de forma nativa aos apps em plataformas móveis. como iOS e Android, cada uma permite que o desenvolvedor defina ações contextuais que o usuário pode invocar e usar. No Chrome 48, adicionamos um semelhante às notificações da Web em Computador e Chrome para Android.
É muito simples adicionar essa API. Você só precisa criar uma matriz de
ações e adicioná-las ao objeto NotificationOptions quando você chamar
showNotification 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 algumas plataformas podem oferecer
menos ou nenhum. Você pode determinar quais plataformas são compatíveis com
Notification.maxActions: Nos exemplos a seguir, presumimos que a plataforma
suporta 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. Observe que não é possível adicionar ícones à ação diretamente (ainda), mas você pode usar Emoji e o conjunto de caracteres Unicode estendido para adicionar mais contexto ao seu 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 a notificação em algum momento no futuro. Interações com
todas as notificações atualmente (a partir do Chrome 48) são enviadas pelo
notificationclick registrado no service worker e eles podem ser
um clique geral na notificação ou um toque específico em uma ação
botões. Futuramente, você também poderá responder ao eventonotificationclose.
Para entender qual ação o usuário realizou, inspecione a propriedade action.
no evento e ter a opção de abrir uma nova página para
para 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, eles podem realizar interações gerais do aplicativo sem criar um usuário interface gráfica do usuário. Por exemplo, um usuário poderia "Gostei" ou "Excluir" uma postagem de mídia social que executa a ação nos dados locais do usuário e o sincroniza com a nuvem sem abrir uma interface (embora seja uma prática recomendada enviar uma mensagem mudança de dados para qualquer janela aberta para que a interface possa ser atualizada). Para um que requer interação do usuário, você abriria uma janela para o usuário responder.
Como as plataformas não aceitam o mesmo número de ações ou, em alguns casos, oferecer suporte aos botões de ação de notificação, será necessário garantir que você sempre forneça uma alternativa sensata para uma tarefa que seja o que você espera o que o usuário deve fazer se apenas clicar na notificação.
Para conferir como isso funciona hoje, confira os Harnes de teste de notificação de Peter Beverloo. e leia sobre a especificação de notificações ou acompanhe as especificações à medida que elas são atualizadas.