Melhorias nas notificações da Web no Chrome 50: ícones, eventos fechados, preferências de renotificação e carimbos de data/hora

Elas permitem que você ofereça uma ótima experiência de app para os usuários, alertando-os sobre atualizações importantes e oportunas, como mensagens de chat recebidas. A plataforma de notificação é relativamente nova em navegadores e, à medida que mais casos de uso e requisitos são definidos, 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ê pode:

  • 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álises de eventos.
  • gerenciar a experiência de renotificação quando uma notificação substitui a que está em exibição no momento.

O Chrome 50 também adicionou Payloads para notificações push. Para acompanhar a implementação da API Notifications 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 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 esta adição recente, já é 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'}]
});
Notificação na área de trabalho

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 na versão Lollipop e nas versões mais recentes, e um filtro branco antes da versão Lollipop. Já em computadores, ela vai ser colorida. Observação: há uma discussão sobre o futuro desse recurso em computadores. Algumas plataformas podem nem mesmo mostrar ícones de ação. Portanto, verifique se você está usando os ícones para fornecer contexto à ação, e não como o único indicador da intent.

Por fim, como é preciso fazer o download dos recursos, é recomendável manter os ícones o menor possível e armazená-los em cache no evento de instalação. Durante a criação deste módulo, 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 era possível fazer isso até que um conjunto recente de mudanças na especificação de notificações adicionasse um evento "notificationclose".

Ao usar o "notificationclick" e o evento notificationclose, é possível entender como os usuários estão interagindo com suas notificações. Ele está deixando aberto por muito tempo e depois dispensando-os ativamente ou fazendo alguma ação imediata?

Um caso de uso conhecido é a capacidade de sincronizar notificações entre dispositivos. Se o usuário dispensar uma notificação no dispositivo desktop, 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 cada mensagem push precisa ter uma notificação exibida). No entanto, o uso de notificationclose abre a capacidade de lidar com isso, permitindo que você rastreie o estado da notificação para o usuário no servidor e sincronize com os outros dispositivos à medida que o usuário os utiliza.

Para usar o evento notificationclose, registre-o dentro do service worker e ele será disparado somente quando o usuário tiver dispensado 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 deixada sem definição, se a notificação não for dispensada manualmente pelo usuário, mas automaticamente pelo sistema, o evento notificationclose não vai 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 uma lógica personalizada.

self.addEventListener('notificationclose', e => console.log(e.notification));

Teste isso no Gerador de notificações. Você vai receber um alerta quando fechar a notificação.

Não incomode os usuários ao substituir uma notificação

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 vão desativar todas as notificações e você pode perdê-las.

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 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, um padrão de vibração ou um alerta audível era executado, e isso poderia frustrar os usuários. Agora, no Chrome 50, você tem controle sobre o que acontece durante a renotificação por meio de uma simples sinalização booleana chamada "renotify". O novo comportamento padrão ao usar a mesma "tag" para notificações subsequentes é ser silencioso e, como desenvolvedor, você precisa ativar a "nova notificaçã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, por padrão, as notificações do Chrome mostram os horários de criação no canto superior direito. Infelizmente, talvez esse não seja o momento em que a notificação foi gerada pelo seu sistema. Por exemplo, o evento pode ter sido acionado quando o dispositivo estava off-line ou a notificação pode ser exibida para uma próxima reunião. Desde o Chrome 50, o Chrome adicionou uma nova propriedade carimbo de data/hora, que permite aos desenvolvedores informar o horário a ser exibido na 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 não esteja visível no computador, ela afetará a ordem das notificações em dispositivos móveis e computadores.

.