Comportement des notifications

Alexey Rodionov
Alexey Rodionov
X GitHub LinkedIn

Jusqu'à présent, nous avons examiné les options permettant de modifier l'apparence visuelle d'une notification. Il y a et des options qui modifient le comportement des notifications.

Par défaut, appeler showNotification() avec uniquement des options visuelles aura les éléments suivants : comportements:

  • Le fait de cliquer sur la notification n'a aucun effet.
  • Chaque nouvelle notification s'affiche l'une après l'autre. Le navigateur ne réduira pas les notifications de quelque manière que ce soit.
  • La plate-forme peut émettre un son ou vibrer l'appareil de l'utilisateur (selon la plate-forme).
  • Sur certaines plates-formes, la notification disparaît rapidement d'afficher la notification, sauf si l'utilisateur interagit avec elle. (Par exemple, comparez vos notifications sur Android et les ordinateurs de bureau.)

Dans cette section, nous allons voir comment modifier ces comportements par défaut à l'aide d'options. seul. Elles 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. Non même fermer ou même supprimer la notification.

La pratique courante pour un clic sur une notification consiste à la fermer et à exécuter une autre logique (par exemple, ouvrir une fenêtre ou effectuer un appel d'API vers l'application).

Pour ce faire, vous devez ajouter un écouteur d'événements 'notificationclick' à notre service worker. Ce est appelé dès qu'un internaute 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 event.notification Vous pouvez alors accéder aux propriétés et méthodes de la notification. Dans ce vous appelez sa méthode close() et effectuez une tâche supplémentaire.

Actions

Les actions vous permettent de créer un autre niveau d'interaction avec vos utilisateurs. Il vous suffit de cliquer sur le bouton .

Boutons

Dans la section précédente, vous avez vu comment définir des boutons d'action lorsque vous appelez 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 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 de event.action seraient l'une des suivantes: 'coffee-action', 'doughnut-action', 'gramophone-action' ou 'atom-action'.

Ainsi, nous détecterions les clics sur les notifications ou les actions, comme dans l'exemple suivant:

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 contient 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 identifiant de chaîne qui "regroupe" les notifications réunies, ce qui facilite pour déterminer la façon dont plusieurs notifications sont présentées à l'utilisateur. C'est le plus simple à expliquer avec un exemple.

Affichons une notification et attribuons-lui un tag, de 'message-group-1'. Nous afficherions par 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);

Notre première notification s'affiche.

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

Affichons une deuxième notification avec une nouvelle balise '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 seconde notification s'affiche.

Deux notifications où le deuxième tag du groupe de messages 2.

Affichons maintenant une troisième notification en réutilisant la première balise de 'message-group-1'. Faire ceci 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 les anciennes notifications actuellement affichées seront fermées si elles comportent le même tag qu'une nouvelle notification.

L'utilisation de tag présente une subtilité : lorsqu'elle remplace une notification, elle le fait sans son. ou vibreur.

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

Renotifier

Cela s'applique principalement aux appareils mobiles au moment de la rédaction de ce document. Cette option permet de créer les notifications font vibrer votre appareil et émettent un son.

Dans certains cas, vous souhaiterez peut-être qu'une notification de remplacement informe l'utilisateur plutôt que effectuer la mise à jour silencieusement. Les applications de chat en sont un bon exemple. Dans ce cas, vous devez définir tag et renotify à 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 elle empêche le comportement par défaut du vibreur, et allumer l'écran de l'appareil.

C'est la solution idéale si vos notifications ne requièrent pas immédiatement l'attention 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 activé Ce comportement n'est pas le cas sur Android. Les notifications restent affichées jusqu'à ce que l'utilisateur interagit avec elles.

Pour forcer une notification à rester visible jusqu'à ce que l'utilisateur interagisse avec elle, ajoutez le 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 quoi qu’ils font pour ignorer votre notification peut être frustrant.

Dans la section suivante, nous allons examiner quelques-uns des modèles couramment utilisés sur le Web pour la gestion des notifications et l'exécution d'actions telles que l'ouverture de pages lorsqu'un utilisateur clique sur une notification.

Étapes suivantes

Ateliers de programmation