As opções de notificação são divididas em duas seções: uma que aborda os aspectos visuais (esta seção) e outra que explica os aspectos comportamentais das notificações (a próxima seção).
É possível testar várias opções de notificação em diversos navegadores e plataformas usando o Gerador de notificações de Peter Beverloo (links em inglês).
Opções visuais
A API para mostrar uma notificação é simples:
<ServiceWorkerRegistration>.showNotification(<title>, <options>);
Ambos os argumentos, title e options, são opcionais.
O título é uma string, e as opções podem ser as seguintes:
{
"//": "Visual Options",
"body": "<String>",
"icon": "<URL String>",
"image": "<URL String>",
"badge": "<URL String>",
"dir": "<String of 'auto' | 'ltr' | 'rtl'>",
"timestamp": "<Long>"
"//": "Both visual & behavioral options",
"actions": "<Array of Strings>",
"data": "<Anything>",
"//": "Behavioral Options",
"tag": "<String>",
"requireInteraction": "<boolean>",
"renotify": "<Boolean>",
"vibrate": "<Array of Integers>",
"sound": "<URL String>",
"silent": "<Boolean>",
}
Vamos conferir as opções visuais:
Opções de título e corpo
Esta é uma notificação sem o título e as opções no Chrome no Windows:
Como você pode notar, o nome do navegador é usado como título e o marcador "Nova notificação" é usado como o corpo da notificação.
Se um Progressive Web App estiver instalado no dispositivo, o nome do app da Web vai ser usado no lugar do nome do navegador:
Se executássemos o seguinte código:
const title = 'Simple Title';
const options = {
body: 'Simple piece of body text.\nSecond line of body text :)',
};
registration.showNotification(title, options);
receberíamos esta notificação no Chrome no Linux:
No Firefox no Linux, ficaria assim:
A notificação com muito texto no título e no corpo é assim no Chrome no Linux:
O Firefox no Linux recolhe o corpo do texto até que você passe o cursor sobre a notificação, fazendo com que ela se expanda:
As notificações do Firefox no Windows são parecidas com estas:
Como você pode ver, a mesma notificação pode ser diferente em navegadores diferentes. Também pode parecer diferente no mesmo navegador em diferentes plataformas.
O Chrome e o Firefox usam as notificações do sistema e a central de notificações nas plataformas em que estão disponíveis.
Por exemplo, as notificações do sistema no macOS não oferecem suporte a imagens e ações (botões e respostas in-line).
O Chrome também tem notificações personalizadas para todas as plataformas da área de trabalho. É possível ativá-la definindo a
flag chrome://flags/#enable-system-notifications como o estado Disabled.
Icon
A opção icon é essencialmente uma imagem pequena que pode ser mostrada ao lado do título e do corpo do texto.
No seu código, é necessário fornecer um URL para a imagem que você quer carregar:
const title = 'Icon Notification';
const options = {
icon: '/images/demos/icon-512x512.png',
};
registration.showNotification(title, options);
Você recebe esta notificação no Chrome no Linux:
e no Firefox para Linux:
É uma pena que não existam diretrizes sobre o tamanho da imagem para um ícone.
O Android parece querer uma imagem de 64 dp (que é múltiplo de 64 px pela proporção de pixels do dispositivo).
Supondo que a maior proporção de pixels para um dispositivo seja 3, um tamanho de ícone de 192 px ou mais é uma aposta segura.
Selo
O badge é um pequeno ícone monocromático usado para mostrar um pouco mais de informações ao
usuário sobre a origem da notificação:
const title = 'Badge Notification';
const options = {
badge: '/images/demos/badge-128x128.png',
};
registration.showNotification(title, options);
No momento em que este artigo foi escrito, o selo só era usado no Chrome no Android.
Em outros navegadores (ou no Chrome sem o selo), você verá um ícone do navegador.
Assim como na opção icon, não há diretrizes reais sobre qual tamanho usar.
Analisando as diretrizes do Android, o tamanho recomendado é 24 px multiplicado pela proporção de pixels do dispositivo.
Uma imagem de 72 pixels ou mais precisa ser boa (supondo que a proporção máxima de pixels do dispositivo seja 3).
Imagem
A opção image pode ser usada para exibir uma imagem maior ao usuário. Isso é particularmente
útil para mostrar uma imagem de visualização para o usuário.
const title = 'Image Notification';
const options = {
image: '/images/demos/unsplash-farzad-nazifi-1600x1100.jpg',
};
registration.showNotification(title, options);
No Chrome no Linux, a notificação será parecida com esta:
No Chrome para Android, o corte e a proporção são diferentes:
Devido às diferenças na proporção entre computador e dispositivo móvel, é extremamente difícil sugerir diretrizes.
Como o Chrome no computador não preenche o espaço disponível e tem uma proporção de 4:3, talvez a melhor
abordagem seja veicular uma imagem com essa proporção e permitir que o Android a corte. No entanto,
a opção image ainda pode mudar.
No Android, a única diretriz é uma largura de 450 dp.
Usando essa diretriz, uma imagem de largura de 1350px ou mais seria uma boa aposta.
Ações (botões)
É possível definir actions para mostrar botões com uma notificação:
const title = 'Actions Notification';
const options = {
actions: [
{
action: 'coffee-action',
type: 'button',
title: 'Coffee',
icon: '/images/demos/action-1-128x128.png',
},
{
action: 'doughnut-action',
type: 'button',
title: 'Doughnut',
icon: '/images/demos/action-2-128x128.png',
},
{
action: 'gramophone-action',
type: 'button',
title: 'Gramophone',
icon: '/images/demos/action-3-128x128.png',
},
{
action: 'atom-action',
type: 'button',
title: 'Atom',
icon: '/images/demos/action-4-128x128.png',
},
],
};
registration.showNotification(title, options);
Para cada ação, você pode definir title, action (que é essencialmente um ID), icon e
type. O título e o ícone são o que você pode ver na notificação. O ID é usado para detectar
que o botão de ação foi clicado (mais sobre isso na próxima seção). O tipo pode ser omitido porque 'button' é o valor padrão.
Até o momento, apenas o Chrome e o Opera para Android oferecem suporte a ações.
No exemplo acima, há quatro ações definidas para ilustrar que você pode definir mais ações do que o
que será mostrado. Se você quiser saber o número de ações que serão exibidas pelo navegador,
consulte window.Notification?.maxActions:
const maxVisibleActions = window.Notification?.maxActions;
if (maxVisibleActions) {
options.body = `Up to ${maxVisibleActions} notification actions can be displayed.`;
} else {
options.body = 'Notification actions are not supported.';
}
No computador, os ícones do botão de ação exibem suas cores (veja o círculo rosa):
No Android 6 e versões anteriores, os ícones ficam coloridos para combinar com o esquema de cores do sistema:
No Android 7 e versões mais recentes, os ícones de ação não aparecem.
Esperamos que o Chrome mude seu comportamento no computador para combinar com o Android, ou seja, aplique o
esquema de cores adequado para que os ícones combinem com a aparência do sistema. Enquanto isso, você
pode combinar a cor do texto do Chrome usando a cor #333333 nos seus ícones.
Também é importante ressaltar que os ícones têm uma aparência nítida no Android, mas não no computador.
O melhor tamanho que eu poderia trabalhar no Chrome para computador era 24 x 24 pixels. Infelizmente, isso parece fora de lugar no Android.
A prática recomendada que podemos aproveitar dessas diferenças:
- Use um esquema de cores consistente para os ícones, para que pelo menos todos eles sejam exibidos de forma consistente para o usuário.
- Eles precisam funcionar no modo monocromático, já que algumas plataformas podem mostrar esse formato.
- Teste o tamanho e veja qual funciona para você. 128 x 128 px funciona bem no Android para mim, mas tem baixa qualidade em computadores.
- Os ícones de ação não serão exibidos.
A especificação de notificação está explorando uma maneira de definir vários tamanhos de ícones, mas parece que vai levar algum tempo até que algo seja acordado.
Ações (respostas diretas)
É possível adicionar uma resposta inline à notificação definindo uma ação com o tipo 'text':
const title = 'Alexey Rodionov';
const options = {
body: 'How are you doing? )',
image: '/images/demos/avatar-512x512.jpg',
icon: '/images/demos/icon-512x512.png',
badge: '/images/demos/badge-128x128.png',
actions: [
{
action: 'reply',
type: 'text',
title: 'Reply',
icon: '/images/demos/action-5-128x128.png',
}
],
};
registration.showNotification(title, options);
Esta será a aparência dele no Android:
Clicar no botão de ação abre um campo de entrada de texto:
Você pode personalizar o marcador de posição para o campo de entrada de texto:
const title = 'Alexey Rodionov';
const options = {
body: 'How are you doing? )',
icon: '/images/demos/avatar-512x512.jpg',
badge: '/images/demos/badge-128x128.png',
actions: [
{
action: 'reply',
type: 'text',
title: 'Reply',
icon: '/images/demos/action-5-128x128.png',
placeholder: 'Type text here',
}
],
};
registration.showNotification(title, options);
No Chrome no Windows, o campo de entrada de texto fica sempre visível sem precisar clicar no botão de ação:
É possível adicionar mais de uma resposta inline ou combinar botões e respostas inline:
const title = 'Poll';
const options = {
body: 'Do you like this photo?',
image: '/images/demos/cat-image.jpg',
icon: '/images/demos/icon-512x512.png',
badge: '/images/demos/badge-128x128.png',
actions: [
{
action: 'yes',
type: 'button',
title: '👍 Yes',
},
{
action: 'no',
type: 'text',
title: '👎 No (explain why)',
placeholder: 'Type your explanation here',
},
],
};
registration.showNotification(title, options);
Direção
O parâmetro dir permite definir em que direção o texto vai ser mostrado,
da direita para a esquerda ou da esquerda para a direita.
Nos testes, parecia que a direção era determinada em grande parte pelo texto e não pelo parâmetro. De acordo com a especificação, o objetivo é sugerir ao navegador como definir opções de layout, como ações, mas não notei nenhuma diferença.
Provavelmente é melhor definir, se possível. Caso contrário, o navegador fará a coisa certa de acordo com o texto fornecido.
O parâmetro precisa ser definido como auto, ltr ou rtl.
Um idioma da direita para a esquerda usado no Chrome no Linux tem esta aparência:
No Firefox (ao passar o cursor sobre ele), você encontra o seguinte:
Vibrar
A opção de vibração permite que você defina um padrão de vibração que será executado quando uma notificação for mostrada, supondo que as configurações atuais do usuário permitam vibrações (ou seja, o dispositivo não está no modo silencioso).
O formato da opção de vibração precisa ser uma matriz de números que descrevem o número de milissegundos em que o dispositivo deve vibrar, seguido pelo número de milissegundos em que o dispositivo não vibra.
const title = 'Vibrate Notification';
const options = {
// Star Wars shamelessly taken from the awesome Peter Beverloo
// https://tests.peter.sh/notification-generator/
vibrate: [
500, 110, 500, 110, 450, 110, 200, 110, 170, 40, 450, 110, 200, 110, 170,
40, 500,
],
};
registration.showNotification(title, options);
Isso afeta apenas dispositivos com suporte à vibração.
Áudio
O parâmetro de som permite definir um som a ser reproduzido quando a notificação for recebida.
Até o momento, nenhum navegador oferece suporte a essa opção.
const title = 'Sound Notification';
const options = {
sound: '/demos/notification-examples/audio/notification-sound.mp3',
};
registration.showNotification(title, options);
Carimbo de data/hora
O carimbo de data/hora permite informar à plataforma a hora em que ocorreu um evento que resultou no envio da notificação push.
O timestamp precisa ser o número de milissegundos desde 00:00:00 UTC, que é 1o de janeiro de 1970
(que é a época do UNIX).
const title = 'Timestamp Notification';
const options = {
body: 'Timestamp is set to "01 Jan 2000 00:00:00".',
timestamp: Date.parse('01 Jan 2000 00:00:00'),
};
registration.showNotification(title, options);
Práticas recomendadas de UX
A maior falha de UX que já vi com notificações é a falta de especificidade das informações exibidas por uma notificação.
Considere primeiro por que você enviou a mensagem push e verifique se todas as opções de notificação são usadas para ajudar os usuários a entender por que estão lendo essa notificação.
Para ser honesto, é fácil ver exemplos e pensar: "Nunca cometo esse erro". Mas é mais fácil cair nessa armadilha do que você imagina.
Algumas armadilhas comuns a serem evitadas:
- Não coloque seu site no título ou no corpo. Os navegadores incluem seu domínio na notificação, portanto, não duplique-o.
- Use todas as informações disponíveis. Se você enviar uma mensagem push porque alguém enviou uma mensagem para um usuário, em vez de usar o título "Nova mensagem" e o corpo "Clique aqui para ler", use o título "João acabou de enviar uma nova mensagem" e defina o corpo da notificação como parte da mensagem.
Navegadores e detecção de recursos
No momento em que este artigo foi escrito, havia uma grande disparidade entre o Chrome e o Firefox em termos de suporte de recursos para notificações.
Felizmente, é possível detectar a compatibilidade com recursos de notificação observando o protótipo
window.Notification.
Digamos que quiséssemos saber se uma notificação oferece suporte a botões de ação. Faça o seguinte:
if ('actions' in window.Notification?.prototype) {
// Action buttons are supported.
} else {
// Action buttons are NOT supported.
}
Com isso, podemos alterar a notificação que exibimos aos nossos usuários.
Com as outras opções, basta fazer o mesmo acima, substituindo 'actions' pelo nome do parâmetro
desejado.
A seguir
- Visão geral das notificações push da Web
- Como funciona o envio por push
- Como inscrever um usuário
- UX de permissão
- Como enviar mensagens com bibliotecas push da Web
- Protocolo push da Web
- Como processar eventos push
- Exibição de uma notificação
- Comportamento das notificações
- Padrões comuns de notificação
- Perguntas frequentes sobre notificações push
- Problemas comuns e como informar bugs