As opções de notificação são divididas em duas seções, uma sobre os aspectos visuais e outra que explique os aspectos comportamentais das notificações (a próxima).
Você pode testar as diversas opções de notificação em vários navegadores e em diversas plataformas usando Peter Beverloo Gerador de notificações.
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 qualquer uma das 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>",
}
Vejamos as opções visuais:
Opções de título e corpo
Uma notificação fica assim sem o título e as opções no Chrome no Windows:
Como você pode ver, o nome do navegador é usado como título e a "Nova notificação" o marcador de posição é usada como o corpo da notificação.
Se um App Web Progressivo estiver instalado no dispositivo, o nome do app da Web será usado. do nome do navegador:
Se executarmos 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, o código ficaria assim:
É assim que uma notificação com muito texto no título e no corpo é exibida no Chrome no No Linux, siga estas etapas:
O Firefox no Linux recolhe o corpo do texto até que você passe o cursor sobre a notificação, fazendo com que a notificação para expandir:
As mesmas notificações no Firefox do Windows têm esta aparência:
A mesma notificação pode ter aparências diferentes em navegadores diferentes. Também pode parecer no mesmo navegador e 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).
O Chrome também tem notificações personalizadas para todas as plataformas de computador. Você pode ativá-lo definindo o
sinalização chrome://flags/#enable-system-notifications para o estado Disabled.
Ícone
A opção icon é basicamente uma pequena imagem que você pode mostrar 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:
Infelizmente, não há diretrizes sólidas sobre qual tamanho de imagem usar para um ícone.
O Android parece querer uma imagem de 64 dp (que é 64 px múltiplos pela proporção de pixels do dispositivo).
Supondo que a proporção de pixels mais alta para um dispositivo seja 3, um tamanho de ícone de 192px ou mais é um aposta segura.
Selo
badge é um pequeno ícone monocromático usado para retratar um pouco mais de informações ao
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 é usado apenas 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 o tamanho a ser usado.
Leia as diretrizes do Android o tamanho recomendado é 24 px multiplicado pela proporção de pixels do dispositivo.
Uma imagem de 72 px ou mais precisa ser boa (supondo uma proporção máxima de 3 pixels do dispositivo).
Imagem
A opção image pode ser usada para mostrar uma imagem maior ao usuário. Isso é particularmente
útil para exibir uma imagem de visualização ao 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á semelhante a esta:
No Chrome para Android, o corte e a proporção são diferentes:
Devido às diferenças de proporção entre computadores e dispositivos móveis, é 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 o melhor
é exibir uma imagem com essa proporção e permitir que o Android corte a imagem. Dito isso,
a opção image ainda pode mudar.
No Android, a única diretriz é que largura de 450 dp.
Usando essa diretriz, uma imagem de largura de 1.350 px ou mais seria uma boa aposta.
Ações (botões)
Você pode 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 um title, um action (que é essencialmente um ID), um icon e
um type. O título e o ícone são exibidos 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.
No momento em que este artigo foi escrito, apenas o Chrome e o Opera para Android são compatíveis.
No exemplo acima, há quatro ações definidas para ilustrar que é possível definir mais ações do que
será exibido. Para saber o número de ações que serão exibidas pelo navegador,
verifique 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 mostram as cores (confira o ícone de rosca rosa):
No Android 6 e versões anteriores, os ícones são 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 são exibidos.
Esperamos que o Chrome mude seu comportamento na área de trabalho para corresponder ao Android (ou seja, aplicar a
esquema de cores apropriado para que os ícones correspondam à aparência do sistema). Enquanto isso, você
pode combinar com a cor do texto do Chrome fazendo com que seus ícones tenham a cor #333333.
Vale ressaltar que os ícones têm aparência nítida no Android, mas não no computador.
O melhor tamanho que eu conseguia trabalhar no Chrome para computadores era 24 x 24 pixels. Com tristeza, isto parece estar fora do lugar no Android.
A melhor prática que podemos tirar dessas diferenças:
- Atenha-se a um esquema de cores consistente para que pelo menos todos os ícones sejam consistentes exibidos ao usuário.
- Eles precisam funcionar no modo monocromático, já que algumas plataformas podem exibi-los dessa forma.
- Teste o tamanho e veja o que funciona melhor para você. 128 px × 128 px funciona bem no Android, mas era ruim no computador.
- É normal que seus ícones de ação não sejam exibidos.
As especificações de notificação estão buscando uma maneira de definir vários tamanhos de ícones, mas parece que um tempo até que algo seja combinado.
Ações (respostas diretas)
É possível adicionar uma resposta in-line à 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);
Ela vai ficar assim no Android:
Um clique no botão de ação abre um campo de entrada de texto:
É possível personalizar o marcador de posição do 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 para Windows, o campo de entrada de texto fica sempre visível sem que você precise clicar na ação botã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 qual direção o texto é mostrado.
da direita para a esquerda ou da esquerda para a direita.
Nos testes, parecia que a direção era amplamente determinada pelo texto, e não por essa . De acordo com a especificação, o objetivo é sugerir ao navegador como definir o layout das opções como ações, mas não notei diferença.
Se possível, o melhor é definir. Caso contrário, o navegador deve fazer a coisa certa de acordo com o 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 a seguinte aparência:
No Firefox (ao passar o cursor sobre ele), você verá o seguinte:
Vibrar
A opção de vibração permite definir um padrão de vibração que será executado quando uma notificação for exibido, supondo que as configurações atuais do usuário permitam vibrações (ou seja, o dispositivo não está silencioso).
O formato da opção de vibração deve ser uma matriz de números que descreva a quantidade milésimos de segundo, o dispositivo deve vibrar, seguido pelo número de milissegundos que o dispositivo deve não vibrar.
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 compatíveis com vibração.
Som
O parâmetro sound permite definir um som a ser reproduzido quando a notificação for recebida.
Até a data deste artigo, nenhum navegador era compatível com 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 notificação sendo enviada.
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
O maior fracasso de UX que vi nas notificações é a falta de especificidade nas informações exibido por uma notificação.
Você deve primeiro considerar por que enviou a mensagem push e verificar se todos os as opções de notificação são usadas para ajudar os usuários a entender por que estão lendo a notificação.
Para ser honesto, é fácil ver exemplos e pensar: "nunca vou cometer 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 no então não as duplique.
- Use todas as informações disponíveis. Se você enviar uma mensagem push porque alguém enviou uma mensagem a um usuário, em vez de usar o título "Nova mensagem" e no corpo de "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
Atualmente, existe uma grande disparidade entre o Chrome e o Firefox em termos de suporte a recursos de notificações.
Felizmente, você pode detectar o suporte aos recursos de notificação consultando o window.Notification
protótipo.
Digamos que queremos saber se uma notificação é compatível com 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 exibida aos usuários.
Com as outras opções, faça o mesmo acima, substituindo 'actions' pelo valor desejado
como o nome do parâmetro.
A seguir
- Visão geral das notificações push na Web
- Como funciona o Push
- Como inscrever um usuário
- UX de permissão
- Como enviar mensagens com bibliotecas push da Web
- Protocolo push na Web
- Como processar eventos de push
- Como exibir uma notificação
- Comportamento das notificações
- Padrões de notificação comuns
- Perguntas frequentes sobre notificações push
- Problemas comuns e como informar bugs