Enviando Notificações Personalizadas na sua Web App

4 min readOct 22, 2020

Um dos grandes trunfos da web moderna se dá pela vinda das Progressive Web App’s. Nossa aplicação registra um script em Background chamado Service Worker e com ele temos a possibilidade de implementar Push Notifications que são emitidas mesmo se o seu navegador estiver fechado.

Neste artigo irei mostrar como podemos emitir notificações com diversas personalizações para elevarmos o engajamento do usuário.

Caso queira se aprofundar no vasto universo das PWA’s recomendo acompanhar o Guia oficial da Google. Eu também possuo um curso gratuito onde ensino a criar uma PWA com o framework Angular.

O envio da notificação é feita pelo servidor, portanto nos exemplos abaixo irei utilizar o Node.js integrado com a biblioteca Web-Push. Existem bibliotecas de envio de Push Notifications para várias outras linguagens que podem ser utilizadas com o mesmo propósito.

O método sendNotification recebe três parâmetros, o primeiro é a Push Subscription (No caso o destinatário da notificação), o segundo é o Payload e o terceiro são outras configurações opcionais. Vamos focar no Payload, que recebe um objeto onde podemos personalizar a notificação.

webpush.sendNotification(
 pushSubscription,
 payload,
 options
);

Opções Principais

Este é o exemplo mais comum encontrado nos guias da internet:

title: Texto principal
body: corpo da mensagem
icon: Imagem que será mostrada ao lado do title e body. Pode ser o caminho relativo da aplicação no Front-End ou então a URL de uma imagem
vibrate: Array com a sequência de vibração do dispositivo
data: Objeto onde é possível enviar qualquer dado

Opções Visuais e Sonoras

Além das opções principais, podemos informar alguns campos adicionais para personalizarmos a notificação:

badge: Pequeno ícone monocromático que é mostrado para identificar a origem da notificação
image: Imagem adicional que será demonstrada abaixo do corpo da mensagem
sound: Áudio que será tocado quando a notificação é recebida

Opções de Comportamento

Essas opções podem ser informadas em determinadas situações para que a notificação seja entregue da melhor forma para o usuário.

requireInteraction: Opção booleana que quando passada como true exige que o usuário interaja com a notificação para que ela seja fechada
tag: Ao declarar uma tag significa que quando o usuário receber uma nova notificação com uma mesma tag, a anterior será substituída pela nova. Esta opção é muito útil para aplicações de chat em tempo real, onde não precisamos notificar todas as mensagens que um usuário mandar, e sim somente a mais recente.
renotify: Esta opção é utilizada em conjunto com a tag. Quando passada como true, mesmo que a notificação seja substituída ela emitirá vibração e áudio
timestamp: Permite informar a data e hora que a notificação será emitida. Por padrão é emitida imediatamente.

Ações

Dentro de uma notificação é possível também definir botões adicionais para outras ações que o usuário deseja realizar, elevando ainda mais o engajamento. Desta forma, uma ação que o usuário precisaria acessar a aplicação para ser realizada pode ser feita diretamente na notificação. Você pode informar um array de ações que possuem as seguintes propriedades:

action: Um identificador único para a sua ação. Com essa propriedade a aplicação poderá saber o que fazer caso o usuário clique na ação
title: O título que será visível para o usuário
icon: Ícone opcional que aparecerá em conjunto com o título

Ação de Resposta Diretamente na Notificação

Esta é uma feature que foi adicionada recentemente, portanto nem todas as pessoas têm ciência dela. Quando recebemos notificações de novas mensagens no WhatsApp e outros Apps de mensagens temos a possibilidade de respondê-las diretamente na notificação. Com Push Notifications também temos este privilégio! Basta informar nos objetos de action o type como text.

type: Por padrão o tipo é button. Basta alterar para text para termos o resultado esperado
placeholder: Quando o usuário clicar para responder, temos a possibilidade de informar um placeholder

Observações Finais

Vale ressaltar que o visual e o comportamento das notificações variam de navegador para navegador e de S.O para S.O. Então se sua notificação não se comportou da forma prevista talvez seja por este motivo. Este site poderá te ajudar a fazer testes.

Mesmo com algumas limitações, é inegável o poder que as Progressive Web Apps's podem oferecer, se assemelhando cada vez mais a um aplicativo nativo. As Push Notifications estão dentro desse pacote. Aproveite-as!