Com as notificações PPush, você pode oferecer uma ótima experiência aos seus usuários, alertando-os sobre atualizações importantes e oportunas, como o recebimento de mensagens e envio de mensagens. A plataforma de notificação é relativamente nova em navegadores e conforme mais e mais casos de uso e requisitos são definidos, estamos vendo e adições às APIs para notificações. O Chrome 50 (beta em março de 2016) não é exceção, com no mínimo quatro recursos que dão aos desenvolvedores mais controle sobre as notificações. Você recebe o capacidade de:
- adicionar ícones a botões de notificação,
- modifique a marcação de tempo para criar uma experiência consistente,
- para sincronizar notificações e fornecer análise de dados,
- gerenciar a experiência de renotificação quando uma notificação substituir a atual notificação exibida.
O Chrome 50 também adicionou Payloads para notificações push. Para ficar por dentro das novidades com a API Notifications implementada no Chrome, siga as spec e o Issue Tracker das especificações.
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 aos botões de notificação para torná-las elegante e atraente, mas você pode usar caracteres Unicode para emojis inline etc. Agora você não precisa mais se preocupar: com esta recente adição Agora você pode 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, terá um filtro cinza escuro aplicado no Lollipop e nas versões superiores, e um antes de Lollipop, enquanto em computadores eles são em cores. (Observação: não há discussão sobre o futuro disso no computador.) Algumas plataformas podem nem mesmo ser capazes de exibir ícones de ação, portanto, certifique-se de estar Usar os ícones para dar contexto à ação, e não como o único indicador. da intent.
E, por fim, como é preciso fazer o download dos recursos, é uma boa prática mantenha os ícones o menor possível e armazene-os previamente em cache no evento de instalação. No momento em que este artigo foi escrito, as buscas de recursos de notificação no Chrome não eram roteadas pelo service worker.)
Eventos de fechamento de notificação
Um recurso de notificações solicitado com frequência é a capacidade de saber quando a usuário dispensou uma notificação. Não era possível fazer isso até um conjunto recente de mudanças nas especificações de notificações (em inglês). adicionou um evento notificationclose.
Usando os eventos notificationclick e notificationclose, é possível entender como seus usuários estão interagindo com suas notificações. Eles estão deixando-as abertas por muito tempo e depois dispensando-as ou agir com base neles imediatamente.
Um caso de uso conhecido é a capacidade de sincronizar notificações entre dispositivos. Se o usuário dispensar uma notificação no dispositivo desktop, o mesmo no dispositivo móvel também devem ser dispensadas. Ainda não temos a capacidade de fazer isso silenciosamente (lembre-se de que cada mensagem push deve ter um exibida), mas ao usar a função de notificação, ela abre a capacidade para lidar com isso, permitindo que você acompanhe o estado da notificação para o usuário no seu servidor e sincronizá-lo com os outros dispositivos conforme o usuário os utiliza.
Para usar o evento notificationclose, registre-o no service worker e será acionada somente quando o usuário tiver dispensado ativamente uma notificação, por exemplo, se o usuário dispensar uma notificação específica ou dispensar todos os notificações em sua bandeja (no Android).
Se a flag exigirInteraction for falsa ou não estiver definida, se a notificação for não dispensada manualmente pelo usuário, mas automaticamente pelo sistema, a 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 no qual pode realizar lógica.
self.addEventListener('notificationclose', e => console.log(e.notification));
Teste isso no Gerador de notificações. você receberá um alerta quando fechar a notificação.
Não incomode os usuários ao substituir uma notificação
Tenho certeza de que o tio Ben falando sobre o sistema de notificações, e não os poderes de Peter Parker quando disse: "Com grandes poderes vêm grandes responsabilidades". O sistema de notificação é uma um meio eficiente de interagir com os usuários. Se você abusar da confiança deles, desativar todas as notificações, podendo perdê-las completamente.
Ao criar uma notificação, é possível configurá-la para gerar um alerta audível ou vibrar para chamar a atenção do usuário. Além disso, é possível substituir um notificação existente reutilizando a tag atributo em um novo objeto de notificação.
Antes do Chrome 50, toda vez que você criava uma notificação ou substituía uma já existente, ele executa um padrão de vibração ou toca um alerta sonoro, e isso pode causar frustração aos usuários. Agora, no Chrome 50, você tem controle sobre o que acontece durante a renotificação por meio de um sinalizador booleano simples chamado "renotify". O novo comportamento padrão ao usar a mesma tag para as notificações subsequentes é ficar em silêncio e, como desenvolvedor, é preciso ativar a "nova notificação" o 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 os horários de criação no canto superior direito. por padrão. Infelizmente, este pode não ser o momento em que o a notificação foi gerada pelo sistema. Por exemplo, o evento pode foram acionadas quando o dispositivo estava off-line, ou a notificação pode ter mostrado para uma próxima reunião. A partir do Chrome 50, o Chrome tem adicionou um novo "timestamp" que permite que os desenvolvedores forneçam o horário que será exibido no a notificação.
self.registration.showNotification('Best day evar!', {
'timestamp': 360370800000
});
No momento, o carimbo de data/hora só é visível no Chrome para Android. Embora seja visível no computador, isso afetará a ordem de notificações em dispositivos móveis e computador.
.