Jusqu'à présent, nous avons examiné les options qui modifient l'apparence visuelle d'une notification. Il existe également des options qui modifient le comportement des notifications.
Par défaut, l'appel de showNotification()
avec uniquement des options visuelles aura les comportements suivants:
- Cliquer sur la notification n'a aucun effet.
- Chaque nouvelle notification s'affiche l'une après l'autre. Le navigateur ne réduit en aucun cas les notifications.
- La plate-forme peut émettre un son ou vibrer sur l'appareil de l'utilisateur (en fonction de la plate-forme).
- Sur certaines plates-formes, la notification disparaît après une courte période, tandis que d'autres l'affichent, sauf si l'utilisateur interagit avec elle. (Par exemple, comparez vos notifications sur Android et sur ordinateur.)
Dans cette section, nous allons voir comment modifier ces comportements par défaut en utilisant uniquement des options. Celles-ci sont relativement faciles à mettre en œuvre et à exploiter.
Événement de clic sur une notification
Par défaut, lorsqu'un utilisateur clique sur une notification, rien ne se passe. Il ne ferme ni ne supprime même la notification.
Il est courant qu'un clic sur une notification se ferme et qu'il exécute une autre logique (c'est-à-dire qu'il ouvre une fenêtre ou effectue un appel d'API vers l'application).
Pour ce faire, vous devez ajouter un écouteur d'événements 'notificationclick'
à notre service worker. Elle est appelée chaque fois que l'utilisateur clique sur une notification.
self.addEventListener('notificationclick', (event) => {
const clickedNotification = event.notification;
clickedNotification.close();
// Do something as the result of the notification click
const promiseChain = doSomething();
event.waitUntil(promiseChain);
});
Comme vous pouvez le voir dans cet exemple, la notification sur laquelle l'utilisateur a cliqué est accessible en tant que event.notification
. Vous pouvez alors accéder aux propriétés et aux méthodes de la notification. Dans ce cas, vous appelez sa méthode close()
et vous effectuez des tâches supplémentaires.
Actions
Les actions vous permettent de créer un autre niveau d'interaction avec vos utilisateurs en cliquant simplement sur la notification.
Boutons
Dans la section précédente, vous avez vu comment définir des boutons d'action lors de l'appel de showNotification()
:
const title = 'Actions Notification';
const options = {
actions: [
{
action: 'coffee-action',
title: 'Coffee',
type: 'button',
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);
Si l'utilisateur clique sur un bouton d'action, vérifiez la valeur event.action
dans l'événement noticationclick
pour savoir sur quel bouton d'action l'utilisateur a cliqué.
event.action
contiendra la valeur action
définie dans les options. Dans l'exemple ci-dessus, les valeurs event.action
seraient l'une des suivantes: 'coffee-action'
, 'doughnut-action'
, 'gramophone-action'
ou 'atom-action'
.
Cela nous permet de détecter les clics sur les notifications ou les clics sur l'action, comme suit:
self.addEventListener('notificationclick', (event) => {
if (!event.action) {
// Was a normal notification click
console.log('Notification Click.');
return;
}
switch (event.action) {
case 'coffee-action':
console.log("User ❤️️'s coffee.");
break;
case 'doughnut-action':
console.log("User ❤️️'s doughnuts.");
break;
case 'gramophone-action':
console.log("User ❤️️'s music.");
break;
case 'atom-action':
console.log("User ❤️️'s science.");
break;
default:
console.log(`Unknown action clicked: '${event.action}'`);
break;
}
});
Réponses intégrées
Dans la section précédente, nous avons vu comment ajouter une réponse intégrée à la notification:
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);
event.reply
contiendra la valeur saisie par l'utilisateur dans le champ de saisie:
self.addEventListener('notificationclick', (event) => {
const reply = event.reply;
// Do something with the user's reply
const promiseChain = doSomething(reply);
event.waitUntil(promiseChain);
});
Tag
L'option tag
est essentiellement un ID de chaîne qui "regroupe" les notifications, ce qui permet de déterminer facilement comment les différentes notifications sont présentées à l'utilisateur. C'est plus facile à expliquer
avec un exemple.
Affichons une notification et ajoutons-lui le tag 'message-group-1'
. Nous afficherions la notification avec le code suivant:
const title = 'Notification 1 of 3';
const options = {
body: "With 'tag' of 'message-group-1'",
tag: 'message-group-1',
};
registration.showNotification(title, options);
La première notification s'affiche.
Affichons une deuxième notification avec une nouvelle balise 'message-group-2'
, comme ceci:
const title = 'Notification 2 of 3';
const options = {
body: "With 'tag' of 'message-group-2'",
tag: 'message-group-2',
};
registration.showNotification(title, options);
L'utilisateur reçoit alors une seconde notification.
Affichons maintenant une troisième notification, mais réutilisez la première balise de 'message-group-1'
. Cela fermera la première notification et la remplacera par notre nouvelle notification.
const title = 'Notification 3 of 3';
const options = {
body: "With 'tag' of 'message-group-1'",
tag: 'message-group-1',
};
registration.showNotification(title, options);
Nous avons maintenant deux notifications, même si showNotification()
a été appelé trois fois.
L'option tag
est simplement un moyen de regrouper les messages afin que toutes les anciennes notifications actuellement affichées soient fermées si elles ont la même balise qu'une nouvelle notification.
L'utilisation de tag
présente une subtilité : lorsqu'elle remplace une notification, elle s'effectue sans son ni vibration.
C'est là que l'option renotify
entre en jeu.
Renotifier
Au moment de la rédaction de ce document, ces consignes concernent principalement les appareils mobiles. Avec cette option, les nouvelles notifications vibrent et émettent un son système.
Dans certains cas, vous pouvez souhaiter qu'une notification de remplacement informe l'utilisateur au lieu d'effectuer une mise à jour silencieuse. Les applications de chat en sont un bon exemple. Dans ce cas, vous devez définir tag
et renotify
sur true
.
const title = 'Notification 2 of 2';
const options = {
tag: 'renotify',
renotify: true,
};
registration.showNotification(title, options);
Silencieux
Cette option vous permet d'afficher une nouvelle notification, mais empêche le comportement par défaut des vibrations et du son, ainsi que l'activation de l'écran de l'appareil.
Cette approche est idéale si vos notifications ne requièrent pas l'attention immédiate de l'utilisateur.
const title = 'Silent Notification';
const options = {
silent: true,
};
registration.showNotification(title, options);
Interaction requise
Sur ordinateur, Chrome affiche les notifications pendant une période définie avant de les masquer. Ce comportement n'est pas disponible dans Chrome sur Android. Les notifications sont affichées jusqu'à ce que l'utilisateur interagisse avec elles.
Pour forcer une notification à rester visible jusqu'à ce que l'utilisateur interagisse avec, ajoutez l'option requireInteraction
. La notification s'affiche jusqu'à ce que l'utilisateur la ferme ou clique dessus.
const title = 'Require Interaction Notification';
const options = {
requireInteraction: true,
};
registration.showNotification(title, options);
Utilisez cette option avec rigueur. Il peut être frustrant d'afficher une notification et de forcer l'utilisateur à interrompre ses actions pour l'ignorer.
Dans la section suivante, nous allons examiner certains des modèles couramment utilisés sur le Web pour gérer les notifications et effectuer des actions telles que l'ouverture de pages lorsqu'un utilisateur clique sur une notification.
É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
- Afficher une notification
- Comportement des notifications
- Schémas de notification courants
- Questions fréquentes sur les notifications push
- Problèmes courants et signalement de bugs