As notificações push permitem que você ofereça uma ótima experiência semelhante a um 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 nos navegadores, e, à medida que mais casos de uso e requisitos são detalhados, estamos vendo 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. Você vai poder:
- Adicionar ícones aos botões de notificação,
- modificar o carimbo de data/hora para ajudar a criar uma experiência consistente,
- rastreia eventos de fechamento de notificação para ajudar a sincronizar notificações e fornecer análises,
- gerenciar a experiência de notificação repetida quando uma notificação substitui a que está sendo exibida no momento.
O Chrome 50 também adicionou payloads para notificações push. Para ficar por dentro das atualizações da API Notifications conforme ela é implementada no Chrome, siga a especificação e o rastreador de problemas de especificação.
Criar 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 agradáveis e atraentes, mas você pode usar caracteres Unicode para inserir emojis 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 no pré-Lollipop, enquanto no computador ele será colorido. Observação: há uma discussão sobre o futuro desse recurso em computadores. Algumas plataformas podem nem mesmo exibir ícones de ação. Portanto, use os ícones para fornecer contexto à ação, e não como o único indicador da intent.
Por fim, como os recursos precisam ser transferidos por download, é recomendável manter os ícones o menor possível e pré-armazená-los 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ção solicitado com frequência é a capacidade de saber quando o usuário dispensou uma notificação. Não tínhamos como fazer isso até que um conjunto recente de mudanças na especificação de notificação adicionou um evento de notificationclose.
Ao usar o notificationclick e o evento notificationclose, você pode entender como os usuários estão interagindo com suas notificações. Eles ficam abertos por muito tempo e depois são dispensados ativamente ou são acessados imediatamente.
Um caso de uso comum é sincronizar notificações entre dispositivos. Se o usuário dispensar uma notificação no dispositivo de computador, a mesma notificação no dispositivo móvel também será dispensada. Ainda não temos a capacidade de fazer isso silenciosamente (lembre-se de que cada mensagem push precisa ter uma notificação exibida), mas, ao usar o notificationclose, é possível fazer isso permitindo que você rastreie o estado da notificação do usuário no seu servidor e sincronize isso com os outros dispositivos à medida que o usuário os usa.
Para usar o evento notificationclose, registre-o no service worker. Ele será acionado apenas quando o usuário dispensar ativamente uma notificação, por exemplo, se o usuário dispensar uma notificação específica ou todas as notificações na bandeja (no Android).
Se a flag "requireInteraction" for falsa ou não estiver definida, se a notificação não for dispensada manualmente pelo usuário, mas automaticamente pelo sistema, o evento "notificationclose" não será acionado.
Confira 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));
Você pode testar isso no Notification Generator. Você vai receber um alerta quando fechar a notificação.
Não aborreça os usuários ao substituir uma notificação
Tenho certeza de que o Tio Ben estava falando sobre o sistema de notificação e não sobre os poderes de Peter Parker quando disse "Com grandes poderes vêm grandes responsabilidades". O sistema de notificação é um meio poderoso para interagir com os usuários. Se você abusar da confiança deles, eles desativarão todas as notificações e você poderá perdê-los.
Ao criar uma notificação, você pode configurá-la para criar um alerta sonoro ou vibrar para chamar a atenção do usuário. Além disso, é possível substituir uma notificação existente reutilizando o atributo "tag" em um novo objeto de notificação.
Antes do Chrome 50, toda vez que você criava uma notificação ou substituía uma existente, ela executava um padrão de vibração ou emitia um alerta sonoro, o que poderia causar frustração nos usuários. Agora, no Chrome 50, você tem controle sobre o que acontece durante a nova notificação usando 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 desenvolvedor, você precisa ativar a "renotificação" do usuário definindo a flag como "true".
self.registration.showNotification('Oi!', {
'renotify': true,
'tag': 'tag-id-1'
});
Teste isso no Gerador de notificações.
Gerenciar o carimbo de data/hora exibido para o usuário
No Android, as notificações do Chrome mostram o horário de criação no canto superior direito por padrão. Infelizmente, esse pode não ser o momento em que a notificação foi gerada pelo sistema. Por exemplo, o evento pode ter sido acionado quando o dispositivo estava off-line ou a notificação pode ter sido mostrada para uma reunião futura. A partir do Chrome 50, o Chrome adicionou uma nova propriedade 'carimbo de data/hora' que permite que os desenvolvedores forneçam o horário que 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 não seja visível no computador, ele afeta a ordem de notificação em dispositivos móveis e computadores.
.