Comportement des notifications

Alexey Rodionov
Alexey Rodionov
X GitHub LinkedIn

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 entraîne 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éduira en aucun cas les notifications.
  • La plate-forme peut émettre un son ou faire vibrer l'appareil de l'utilisateur (selon la plate-forme).
  • Sur certaines plates-formes, la notification disparaît après un court laps de temps, tandis que sur d'autres, elle s'affiche tant que l'utilisateur n'interagit pas 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. Elles sont relativement faciles à mettre en œuvre et à exploiter.

Événement de clic sur une notification

Lorsqu'un utilisateur clique sur une notification, le comportement par défaut est qu'il ne se passe rien. Elle ne ferme pas non plus la notification et ne la supprime pas.

En général, un clic sur une notification entraîne sa fermeture et l'exécution d'une autre logique (par exemple, l'ouverture d'une fenêtre ou l'envoi d'un appel d'API à l'application).

Pour ce faire, vous devez ajouter un écouteur d'événements 'notificationclick' à notre service worker. Il sera appelé chaque fois qu'un utilisateur cliquera 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 ainsi accéder aux propriétés et aux méthodes de la notification. Dans ce cas, vous appelez sa méthode close() et effectuez des tâches supplémentaires.

Actions

Les actions vous permettent de créer un autre niveau d'interaction avec vos utilisateurs, au-delà du simple clic 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 identifier le bouton d'action sur lequel il 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 les actions 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, vous avez également 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 plusieurs notifications sont affichées pour l'utilisateur. Le plus simple est d'expliquer cela à l'aide d'un exemple.

Affichons une notification et ajoutons-lui un tag 'message-group-1'. Nous afficherions la notification avec ce code :

const title = 'Notification 1 of 3';

const options = {
  body: "With 'tag' of 'message-group-1'",
  tag: 'message-group-1',
};

registration.showNotification(title, options);

qui affichera notre première notification.

Première notification avec le tag du groupe de messages 1.

Affichons une deuxième notification avec un nouveau tag 'message-group-2', comme suit :

const title = 'Notification 2 of 3';

const options = {
  body: "With 'tag' of 'message-group-2'",
  tag: 'message-group-2',
};

registration.showNotification(title, options);

Une deuxième notification s'affiche alors pour l'utilisateur.

Deux notifications où la deuxième balise du groupe de messages 2.

Affichons maintenant une troisième notification, mais en réutilisant le premier tag de 'message-group-1'. Cela fermera la première notification et la remplacera par la nouvelle.

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.

Deux notifications, où la première est remplacée par une troisième.

L'option tag permet simplement de regrouper les messages afin que toutes les anciennes notifications actuellement affichées soient fermées si elles ont le même tag qu'une nouvelle notification.

Une subtilité de l'utilisation de tag est que lorsqu'il remplace une notification, il le fait sans son ni vibration.

C'est là qu'entre en jeu l'option renotify.

Renotifier

À l'heure où nous écrivons ces lignes, cela s'applique principalement aux appareils mobiles. Si vous activez cette option, les nouvelles notifications feront vibrer l'appareil et émettront un son système.

Dans certains cas, vous pouvez souhaiter qu'une notification de remplacement avertisse l'utilisateur plutôt que de se mettre à jour de manière 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 de vibration, de son et d'activation de l'écran de l'appareil.

Cette option est idéale si vos notifications ne nécessitent pas l'attention immédiate de l'utilisateur.

const title = 'Silent Notification';

const options = {
  silent: true,
};

registration.showNotification(title, options);

Nécessite une interaction

Chrome sur ordinateur affiche les notifications pendant une période définie avant de les masquer. Chrome sur Android n'a pas ce comportement. Les notifications s'affichent jusqu'à ce que l'utilisateur interagisse avec elles.

Pour forcer une notification à rester visible jusqu'à ce que l'utilisateur interagisse avec elle, 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 précaution. Afficher une notification et forcer l'utilisateur à arrêter ce qu'il fait pour la fermer peut être frustrant.

Dans la section suivante, nous allons examiner certains des modèles courants utilisés sur le Web pour gérer les notifications et effectuer des actions, comme l'ouverture de pages lorsqu'un utilisateur clique sur une notification.

Étapes suivantes

Ateliers de programmation