Atelier de programmation: créer un client de notification push

Kate Jeffreys
Kate Jeffreys
Kayce Basques
Kayce Basques
X GitHub

Cet atelier de programmation vous explique, étape par étape, comment créer un client de notifications push. À la fin de l'atelier de programmation, vous disposerez d'un client qui :

  • Abonne l'utilisateur aux notifications push.
  • Reçoit les messages push et les affiche sous forme de notifications.
  • Désabonne l'utilisateur des notifications push.

Cet atelier de programmation est axé sur l'apprentissage par la pratique et n'aborde pas beaucoup les concepts. Consultez Fonctionnement de la transmission push pour en savoir plus sur les concepts de notification push.

Le code du serveur de cet atelier de programmation est déjà complet. Dans cet atelier de programmation, vous n'implémenterez que le client. Pour savoir comment implémenter un serveur de notifications push, consultez l'atelier de programmation : Créer un serveur de notifications push.

Compatibilité du navigateur

Cet atelier de programmation est réputé fonctionner avec les combinaisons de système d'exploitation et de navigateur suivantes :

  • Windows : Chrome, Edge
  • macOS : Chrome, Firefox
  • Android : Chrome, Firefox

Cet atelier de programmation est réputé ne pas fonctionner avec les systèmes d'exploitation suivants (ou les combinaisons de systèmes d'exploitation et de navigateurs) :

  • macOS : Brave, Edge, Safari
  • iOS

Configuration

Configurer l'authentification

Pour que les notifications push fonctionnent, vous devez configurer votre serveur et votre client avec des clés d'authentification. Pour en savoir plus, consultez Signer vos requêtes de protocole Web Push. En règle générale, vous stockez les secrets dans un fichier .env, comme celui-ci.

VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:test@test.test"
  1. Ouvrez public/index.js.
  2. Remplacez VAPID_PUBLIC_KEY_VALUE_HERE par la valeur de votre clé publique.

Enregistrer un service worker

Votre client a besoin d'un service worker pour recevoir et afficher des notifications. Il est préférable d'enregistrer le service worker le plus tôt possible. Pour en savoir plus, consultez Recevoir et afficher les messages push en tant que notifications.

  1. Remplacez le commentaire // TODO add startup logic here par le code suivant :

    if ('serviceWorker' in navigator && 'PushManager' in window) {
  navigator.serviceWorker.register('./service-worker.js').then(serviceWorkerRegistration => {
    console.info('Service worker was registered.');
    console.info({serviceWorkerRegistration});
  }).catch(error => {
    console.error('An error occurred while registering the service worker.');
    console.error(error);
  });
  subscribeButton.disabled = false;
} else {
  console.error('Browser does not support service workers or push messages.');
}

subscribeButton.addEventListener('click', subscribeButtonHandler);
unsubscribeButton.addEventListener('click', unsubscribeButtonHandler);

  2. Dans Chrome, ouvrez la console des outils pour les développeurs.

  3. Le message Service worker was registered. doit s'afficher dans la console.

Demander l'autorisation d'envoyer des notifications push

Vous ne devez jamais demander l'autorisation d'envoyer des notifications push lors du chargement de page. À la place, votre UI doit demander à l'utilisateur s'il souhaite recevoir des notifications push. Une fois qu'il a explicitement confirmé (en cliquant sur un bouton, par exemple), vous pouvez lancer le processus formel pour obtenir l'autorisation d'envoyer des notifications push depuis le navigateur.

  1. Dans public/index.js, remplacez le commentaire // TODO dans subscribeButtonHandler() par le code suivant :

    // Prevent the user from clicking the subscribe button multiple times.
subscribeButton.disabled = true;
const result = await Notification.requestPermission();
if (result === 'denied') {
  console.error('The user explicitly denied the permission request.');
  return;
}
if (result === 'granted') {
  console.info('The user accepted the permission request.');
}

  2. Revenez à l'onglet de l'application, puis cliquez sur Subscribe to push (S'abonner aux notifications push). Votre navigateur ou votre système d'exploitation vous demandera si vous souhaitez autoriser le site Web à vous envoyer des notifications push.

  3. Sélectionnez Autoriser (ou l'expression équivalente utilisée par votre navigateur ou votre système d'exploitation). Dans la console, un message doit s'afficher pour indiquer si la requête a été acceptée ou refusée.

S'abonner aux notifications push

Le processus d'abonnement implique d'interagir avec un service Web contrôlé par le fournisseur du navigateur, appelé service push. Une fois que vous avez obtenu les informations d'abonnement aux notifications push, vous devez les envoyer à un serveur et les stocker dans une base de données à long terme.

  1. Ajoutez le code suivant en surbrillance à subscribeButtonHandler() :

    subscribeButton.disabled = true;
const result = await Notification.requestPermission();
if (result === 'denied') {
  console.error('The user explicitly denied the permission request.');
  return;
}
if (result === 'granted') {
  console.info('The user accepted the permission request.');
}
const registration = await navigator.serviceWorker.getRegistration();
const subscribed = await registration.pushManager.getSubscription();
if (subscribed) {
  console.info('User is already subscribed.');
  notifyMeButton.disabled = false;
  unsubscribeButton.disabled = false;
  return;
}
const subscription = await registration.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey: urlB64ToUint8Array(VAPID_PUBLIC_KEY)
});
notifyMeButton.disabled = false;
fetch('/add-subscription', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(subscription)
});

L'option userVisibleOnly doit être true. Il sera peut-être possible un jour d'envoyer des messages sans afficher de notifications visibles par l'utilisateur (pushs silencieux), mais les navigateurs ne le permettent pas pour des raisons de confidentialité.

La valeur applicationServerKey repose sur une fonction utilitaire qui convertit une chaîne base64 en Uint8Array. Cette valeur est utilisée pour l'authentification entre votre serveur et le service push.

Se désabonner des notifications push

Une fois qu'un utilisateur s'est abonné aux notifications push, votre UI doit lui permettre de se désabonner s'il change d'avis et ne souhaite plus recevoir de notifications push.

  • Remplacez le commentaire // TODO dans unsubscribeButtonHandler() par le code suivant :
const registration = await navigator.serviceWorker.getRegistration();
const subscription = await registration.pushManager.getSubscription();
fetch('/remove-subscription', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({endpoint: subscription.endpoint})
});
const unsubscribed = await subscription.unsubscribe();
if (unsubscribed) {
  console.info('Successfully unsubscribed from push notifications.');
  unsubscribeButton.disabled = true;
  subscribeButton.disabled = false;
  notifyMeButton.disabled = true;
}

Recevoir un message push et l'afficher sous forme de notification

Comme indiqué précédemment, vous avez besoin d'un service worker pour gérer la réception et l'affichage des messages envoyés au client depuis votre serveur. Pour en savoir plus, consultez Recevoir et afficher les messages push sous forme de notifications.

  1. Ouvrez public/service-worker.js et remplacez le commentaire // TODO dans le gestionnaire d'événements push du service worker par le code suivant :

    let data = event.data.json();
const image = 'logo.png';
const options = {
  body: data.options.body,
  icon: image
}
self.registration.showNotification(
  data.title,
  options
);

  2. Revenez à l'onglet de l'application.

  3. Cliquez sur M'avertir. Vous devriez recevoir une notification push.

  4. Ouvrez l'URL de l'onglet de votre application dans d'autres navigateurs compatibles. Suivez la procédure d'abonnement, puis cliquez sur Tout notifier. Vous devriez recevoir la même notification push dans chacune d'elles.

Vous pouvez personnaliser la notification de différentes manières. Pour en savoir plus, consultez les paramètres de ServiceWorkerRegistration.showNotification().

Ouvrir une URL lorsqu'un utilisateur clique sur une notification

Dans un cas réel, vous utiliserez probablement la notification pour réengager l'utilisateur et l'inviter à visiter votre site. Pour ce faire, vous devez configurer un peu plus votre service worker.

  1. Remplacez le commentaire // TODO dans le gestionnaire d'événements notificationclick du service worker par le code suivant :

    event.notification.close();
event.waitUntil(self.clients.openWindow('https://web.dev'));

  2. Revenez à l'onglet de l'application, envoyez-vous une autre notification, puis cliquez dessus. Votre navigateur devrait ouvrir un nouvel onglet et charger https://web.dev.

Étapes suivantes