Les options de notification sont divisées en deux sections, l'une qui traite des aspects visuels (cette section) et l'autre qui explique les aspects comportementaux des notifications (la section suivante).
Vous pouvez tester différentes options de notification dans différents navigateurs et plates-formes à l'aide du générateur de notifications de Peter Beverloo.
Options visuelles
L'API permettant d'afficher une notification est simple:
<ServiceWorkerRegistration>.showNotification(<title>, <options>);
Les arguments title et options sont facultatifs.
Le titre est une chaîne et les options peuvent correspondre à l'un des éléments suivants:
{
"//": "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>",
}
Examinons les options visuelles:
Options pour le titre et le corps du texte
Voici à quoi ressemble une notification sans le titre et les options dans Chrome sous Windows:
Comme vous pouvez le voir, le nom du navigateur est utilisé comme titre et l'espace réservé "New notification" (Nouvelle notification) est utilisé comme corps de la notification.
Si une progressive web app est installée sur l'appareil, le nom de l'application Web est utilisé à la place du nom du navigateur:
Si nous exécutions le code suivant:
const title = 'Simple Title';
const options = {
body: 'Simple piece of body text.\nSecond line of body text :)',
};
registration.showNotification(title, options);
nous recevions cette notification dans Chrome sous Linux:
Dans Firefox sous Linux, cela ressemblerait à ceci:
Voici à quoi ressemble une notification dont le titre et le corps comportent beaucoup de texte dans Chrome sous Linux:
Sous Linux, Firefox réduit le corps du texte jusqu'à ce que vous passiez la souris sur la notification. Celle-ci s'affiche alors:
Les mêmes notifications dans Firefox sous Windows se présentent comme suit:
Comme vous pouvez le voir, l'apparence d'une même notification peut varier selon les navigateurs. Elle peut également s'afficher différemment dans le même navigateur selon les plates-formes.
Chrome et Firefox utilisent le centre de notifications et de notifications système sur les plates-formes où elles sont disponibles.
Par exemple, les notifications système sur macOS ne sont pas compatibles avec les images et les actions (boutons et réponses intégrées).
Chrome propose également des notifications personnalisées pour toutes les plates-formes de bureau. Vous pouvez l'activer en définissant l'option chrome://flags/#enable-system-notifications sur l'état Disabled.
Icon
L'option icon est essentiellement une petite image que vous pouvez afficher à côté du titre et du corps du texte.
Dans votre code, vous devez fournir une URL vers l'image que vous souhaitez charger:
const title = 'Icon Notification';
const options = {
icon: '/images/demos/icon-512x512.png',
};
registration.showNotification(title, options);
La notification suivante s'affiche dans Chrome sous Linux:
et dans Firefox sous Linux:
Malheureusement, il n'existe pas de directives précises concernant la taille d'image à utiliser pour une icône.
Android semble vouloir une image de 64 dp (soit des multiples de 64 px par le ratio de pixels de l'appareil).
En supposant que le ratio de pixels le plus élevé pour un appareil soit de 3, il est recommandé d'utiliser une taille d'icône de 192 pixels ou plus.
Badge
badge est une petite icône monochrome qui permet de présenter un peu plus d'informations à l'utilisateur sur l'origine de la notification:
const title = 'Badge Notification';
const options = {
badge: '/images/demos/badge-128x128.png',
};
registration.showNotification(title, options);
Au moment de la rédaction de ce document, le badge n'est utilisé que dans Chrome sur Android.
Sur les autres navigateurs (ou dans Chrome sans le badge), une icône du navigateur s'affiche.
Comme pour l'option icon, il n'y a pas de directives réelles sur la taille à utiliser.
En parcourant les consignes Android, la taille recommandée est de 24 px multipliés par le ratio en pixels de l'appareil.
Cela signifie qu'une image de 72 pixels ou plus devrait convenir (en supposant un ratio de pixels maximal de l'appareil de 3).
Images
L'option image permet d'afficher une image plus grande. Cela s'avère particulièrement utile pour présenter une image d'aperçu à l'utilisateur.
const title = 'Image Notification';
const options = {
image: '/images/demos/unsplash-farzad-nazifi-1600x1100.jpg',
};
registration.showNotification(title, options);
Dans Chrome sous Linux, la notification se présente comme suit:
Dans Chrome sous Android, le recadrage et le format sont différents:
Compte tenu des différences de ratio entre les ordinateurs et les mobiles, il est extrêmement difficile de suggérer des recommandations.
Étant donné que Chrome sur ordinateur ne remplit pas l'espace disponible et que son format est de 4:3, la meilleure approche consiste peut-être à diffuser une image dans ce format et à autoriser Android à la recadrer. Cela dit, l'option image peut toujours changer.
Sous Android, la seule limite est une largeur de 450 dp.
En suivant cette consigne, nous vous conseillons d'utiliser une image d'au moins 1 350 pixels de large.
Actions (boutons)
Vous pouvez configurer actions pour afficher des boutons avec une notification:
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);
Pour chaque action, vous pouvez définir un title, un action (qui est essentiellement un ID), un icon et un type. Le titre et l'icône sont les éléments qui apparaissent dans la notification. L'ID est utilisé lors de la détection d'un clic sur le bouton d'action (plus d'informations à ce sujet dans la section suivante). Le type peut être omis, car 'button' est la valeur par défaut.
Au moment de la rédaction de ce document, seules les actions compatibles avec Chrome et Opera pour Android sont compatibles.
Dans l'exemple ci-dessus, quatre actions sont définies pour illustrer le fait que vous pouvez définir plus d'actions qu'elles ne seront affichées. Si vous souhaitez connaître le nombre d'actions qui seront affichées par le navigateur, vous pouvez cocher 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.';
}
Sur un ordinateur de bureau, les icônes des boutons d'action affichent leur couleur (voir l'anneau rose):
Sous Android 6 et versions antérieures, les icônes sont colorées pour correspondre au jeu de couleurs du système:
Sur Android 7 et versions ultérieures, les icônes d'action ne s'affichent pas du tout.
Chrome devrait modifier son comportement sur ordinateur pour qu'il corresponde à Android (par exemple, appliquer le jeu de couleurs approprié pour que les icônes correspondent à l'apparence du système). En attendant, vous pouvez faire correspondre la couleur du texte de Chrome en choisissant la couleur #333333 pour vos icônes.
Il convient également de souligner que les icônes sont nettes sur Android, mais pas sur ordinateur.
La taille de 24 x 24 pixels que je pouvais utiliser au mieux sur Chrome pour ordinateur était de 24 x 24 pixels. Malheureusement, cela ne semble pas à sa place sur Android.
La bonne pratique que nous pouvons tirer de ces différences:
- Respectez un jeu de couleurs cohérent pour vos icônes afin qu'au moins toutes vos icônes s'affichent de manière cohérente pour l'utilisateur.
- Assurez-vous qu'ils fonctionnent en monochrome, car certaines plates-formes peuvent les afficher ainsi.
- Testez la taille et voyez ce qui fonctionne pour vous. La taille 128 × 128 pixels fonctionne bien sur Android, mais est médiocre sur ordinateur.
- Attendez-vous à ce que vos icônes d'action ne s'affichent pas du tout.
La spécification de notification étudie un moyen de définir plusieurs tailles d'icônes, mais il semble qu'il faudra un certain temps avant qu'un accord ne soit conclu.
Actions (réponses intégrées)
Vous pouvez ajouter une réponse intégrée à la notification en définissant une action avec le type '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);
Voici comment cela se présentera sur Android:
Cliquez sur le bouton d'action pour ouvrir un champ de saisie de texte:
Vous pouvez personnaliser l'espace réservé pour le champ de saisie de texte:
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);
Dans Chrome sous Windows, le champ de saisie de texte est toujours visible sans qu'il soit nécessaire de cliquer sur le bouton d'action:
Vous pouvez ajouter plusieurs réponses ou combiner des boutons et des réponses intégrées:
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);
Sens
Le paramètre dir vous permet de définir le sens d'affichage du texte (de droite à gauche ou de gauche à droite).
Lors des tests, il semblait que l'orientation était en grande partie déterminée par le texte plutôt que par ce paramètre. Selon la spécification, cela vise à suggérer au navigateur comment mettre en page des options telles que des actions, mais je n'ai vu aucune différence.
Il est sans doute préférable de définir si c'est possible, sinon le navigateur devrait s'adapter au texte fourni.
Le paramètre doit être défini sur auto, ltr ou rtl.
La langue de droite à gauche utilisée dans Chrome sous Linux ressemble à ceci:
Dans Firefox, passez la souris dessus pour obtenir le résultat suivant:
Vibreur
L'option "Vibreur" vous permet de définir un motif de vibration qui se déclenchera lorsqu'une notification s'affichera, à condition que les paramètres actuels de l'utilisateur autorisent les vibrations (par exemple, lorsque l'appareil n'est pas en mode silencieux).
Le format de l'option "Vibreur" doit être un tableau de nombres qui décrivent le nombre de millisecondes pendant lequel l'appareil doit vibrer, suivi du nombre de millisecondes pendant lequel l'appareil ne doit pas vibrer.
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);
Cela ne concerne que les appareils compatibles avec le vibreur.
Son
Le paramètre "Son" vous permet de définir un son à émettre lors de la réception d'une notification.
Pour le moment, aucun navigateur n'est compatible avec cette option.
const title = 'Sound Notification';
const options = {
sound: '/demos/notification-examples/audio/notification-sound.mp3',
};
registration.showNotification(title, options);
Code temporel
L'horodatage vous permet d'indiquer à la plate-forme l'heure à laquelle un événement ayant entraîné l'envoi de la notification push s'est produit.
La valeur timestamp doit correspondre au nombre de millisecondes écoulées depuis 00:00:00 UTC, qui correspond au 1er janvier 1970 (ce qui correspond à l'époque 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);
Bonnes pratiques en matière d'expérience utilisateur
Le plus grand échec de l'expérience utilisateur avec les notifications est le manque de spécificité des informations affichées par une notification.
Vous devez déterminer pourquoi vous avez envoyé le message push en premier lieu et vous assurer que toutes les options de notification sont utilisées pour aider les utilisateurs à comprendre pourquoi ils lisent cette notification.
Pour être honnête, il est facile de voir des exemples et de penser qu'il ne faut jamais faire cette erreur. Mais il est plus facile de tomber dans ce piège que vous ne le pensez.
Voici quelques écueils courants à éviter:
- N'insérez pas votre site Web dans le titre ni dans le corps. Les navigateurs incluent votre domaine dans la notification. Par conséquent, ne le dupliquez pas.
- Utilisez toutes les informations à votre disposition. Si vous envoyez un message push parce que quelqu'un a envoyé un message à un utilisateur, au lieu d'utiliser le titre "New Message" (Nouveau message) et le corps de "Click here to read it" (Cliquez ici pour le lire), utilisez le titre "Jean vient d'envoyer un nouveau message" et définissez le corps de la notification sur une partie du message.
Navigateurs et détection de fonctionnalités
Au moment de la rédaction de ce document, il existe une disparité assez importante entre Chrome et Firefox en ce qui concerne la prise en charge des fonctionnalités pour les notifications.
Heureusement, vous pouvez détecter la prise en charge des fonctionnalités de notification en examinant le prototype window.Notification.
Supposons que nous voulions savoir si une notification prend en charge les boutons d'action. Voici comment procéder:
if ('actions' in window.Notification?.prototype) {
// Action buttons are supported.
} else {
// Action buttons are NOT supported.
}
Cela nous a permis de modifier la notification que nous présentons aux utilisateurs.
Pour les autres options, procédez comme ci-dessus, en remplaçant 'actions' par le nom du paramètre souhaité.
Étapes suivantes
- Présentation des notifications push Web
- Fonctionnement du mode Push
- S'abonner d'un utilisateur
- Expérience utilisateur des autorisations
- Envoyer des messages avec les bibliothèques Web Push
- Protocole Web push
- Gérer les événements push
- Affichage d'une notification
- Comportement des notifications
- Schémas de notification courants
- Questions fréquentes sur les notifications push
- Problèmes courants et signalement de bugs