As notificações PPush permitem que você ofereça uma ótima experiência de app para seus usuários, alertando-os sobre atualizações importantes e oportunas, como mensagens de chat recebidas. A plataforma de notificações é relativamente nova em navegadores. À medida que cada vez mais casos de uso e requisitos são aprimorados, vemos muitas adições às APIs para notificações. O Chrome 50 (Beta em março de 2016) não é exceção, com pelo menos quatro novos recursos que dão aos desenvolvedores mais controle sobre as notificações. É possível:
- adicionar ícones aos botões de notificação,
- modificar o carimbo de data/hora para criar uma experiência consistente;
- acompanhar eventos de fechamento de notificação para ajudar a sincronizar notificações e fornecer análises;
- gerenciar a experiência de renotificação quando uma notificação substitui a que está sendo mostrada no momento.
O Chrome 50 também adicionou Payloads para notificações push. Para ficar por dentro da API Notifications conforme ela é implementada no Chrome, siga a spec e o Issue Tracker de especificação.
Crie botões de ação atraentes com ícones personalizados
Em uma postagem recente sobre os botões de ação de notificação no Chrome 49, mencionei que não é possível anexar imagens a botões de notificação para torná-los atraentes e atraentes, mas você pode usar caracteres Unicode para emojis inline etc. Agora você não precisa se preocupar: com essa adição recente, é possível especificar uma imagem no botão de ação:
self.registration.showNotification('New message from Alice', {
actions: [
{action: 'like', title: 'Like', icon: 'https://example/like.png'},
{action: 'reply', title: 'Reply', icon: 'https://example/reply.png'}]
});
A aparência do ícone de ação varia de acordo com a plataforma. Por exemplo, no Android, o ícone terá um filtro cinza-escuro aplicado no Lollipop e versões mais recentes e um filtro branco antes do Lollipop. No computador, ele será colorido. Observação: há uma discussão sobre o futuro desse recurso no computador (link em inglês). Algumas plataformas podem não conseguir mostrar ícones de ação. Portanto, verifique se você está usando os ícones para fornecer contexto para a ação, e não como o único indicador da intent.
Por fim, como é necessário fazer o download dos recursos, é recomendável manter os ícones o menor possível e armazená-los em cache no evento de instalação. No momento em que este artigo foi escrito, as buscas de recursos de notificação no Chrome ainda não são roteadas pelo service worker.
Eventos de fechamento de notificação
Um recurso de notificações solicitado com frequência é a capacidade de saber quando o usuário dispensou uma notificação. Não havia como fazer isso até que um recente conjunto de alterações nas especificações de notificação adicionasse um evento notificationclose.
Ao usar o notificationclick e o evento notificationclose, você poderá entender como os usuários estão interagindo com as notificações. Eles deixam as pessoas abertas por muito tempo e as ignoram ativamente ou estão agindo imediatamente?
Um caso de uso comum é poder sincronizar notificações entre dispositivos. Se o usuário dispensar uma notificação no computador, a mesma notificação no dispositivo móvel também precisará ser dispensada. Ainda não é possível fazer isso silenciosamente (lembre-se de que toda mensagem push precisa ter uma notificação), mas o uso de notificationclose permite que você rastreie o estado da notificação do usuário no servidor e faça a sincronização com outros dispositivos à medida que eles forem usados.
Para usar o evento notificationclose, registre-o no service worker e ele será acionado somente quando o usuário dispensar uma notificação ativamente, por exemplo, se o usuário dispensar uma notificação específica ou todas as notificações na bandeja (no Android).
Se a sinalização requestInteraction for falsa ou não for definida, se a notificação não for dispensada manualmente pelo usuário, mas automaticamente pelo sistema, o evento notificationclose não será acionado.
Veja abaixo uma implementação simples. Quando o usuário dispensa a notificação, você tem acesso ao objeto de notificação em que é possível executar a lógica personalizada.
self.addEventListener('notificationclose', e => console.log(e.notification));
É possível testar isso no Gerador de notificações. Você vai receber um alerta quando fechar a notificação.
Não incomodar os usuários ao substituir uma notificação existente
Tenho certeza de que Tio Ben estava falando sobre o sistema de notificações, e não sobre os poderes de Peter Parker quando disse: "Com grandes poderes vêm grandes responsabilidades". O sistema de notificações é um meio poderoso de interação com os usuários. Se você abusar da confiança deles, eles desativarão todas as notificações e você poderá perdê-las completamente.
Ao criar uma notificação, é possível configurá-la para criar um alerta audível ou vibrar para chamar a atenção do usuário. Além disso, é possível substituir uma notificação existente reutilizando o atributo "tag" dela em um novo objeto de notificação.
Antes do Chrome 50, sempre que você criava uma notificação ou substituiva uma atual, ela executava um padrão de vibração ou emite um alerta audível, o que poderia frustrar os usuários. No Chrome 50, agora você tem controle sobre o que acontece durante a nova notificação por meio de uma flag booleana simples chamada "renotify". O novo comportamento padrão ao usar a mesma "tag" para notificações subsequentes é ficar em silêncio. Como o desenvolvedor, você precisa ativar "renotificar" o usuário, definindo a flag como "true".
self.registration.showNotification('Oi!', {
'renotify': true,
'tag': 'tag-id-1'
});
Teste esse recurso no Gerador de notificações.
Gerenciar o carimbo de data/hora que aparece para o usuário
No Android, por padrão, as notificações do Chrome mostram os horários de criação no canto superior direito. Infelizmente, esse pode não ser o momento em que a notificação foi realmente gerada pelo sistema. Por exemplo, o evento pode ter sido acionado quando o dispositivo estava off-line ou a notificação pode ser mostrada para uma próxima reunião. A partir do Chrome 50, o Chrome adicionou uma nova propriedade carimbo de data/hora que permite aos desenvolvedores fornecer o horário que deve ser exibido na notificação.
self.registration.showNotification('Best day evar!', {
'timestamp': 360370800000
});
No momento, o carimbo de data/hora só está visível no Chrome para Android. Embora ela não apareça em computadores, isso afetará a ordem da notificação no dispositivo móvel e no computador.
.