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

Kate Jeffreys
Kate Jeffreys
Kayce Basques

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

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

Cet atelier de programmation vise à vous aider à apprendre par la pratique et ne traite pas beaucoup des concepts. Consultez la section Comment fonctionnent les notifications push ? pour en savoir plus sur les concepts liés aux notifications push.

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

Consultez push-notifications-client-codelab-complete (source) pour voir le code complet.

Compatibilité du navigateur

Cet atelier de programmation fonctionne 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 ne fonctionne pas avec les systèmes d'exploitation suivants (ou combinaisons de système d'exploitation et de navigateur):

  • macOS: Brave, Edge, Safari
  • iOS

Configuration

Obtenir une copie modifiable du code

L'éditeur de code que vous voyez à droite de ces instructions sera appelé UI Glitch tout au long de cet atelier de programmation.

  1. Cliquez sur Remixer pour modifier pour rendre le projet modifiable.

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.

  1. Dans l'interface utilisateur de Glitch, cliquez sur Outils, puis sur Terminal pour ouvrir le terminal Glitch.
  2. Dans le terminal Glitch, exécutez npx web-push generate-vapid-keys. Copiez les valeurs de la clé privée et de la clé publique.
  3. Dans l'interface utilisateur de Glitch, ouvrez .env et mettez à jour VAPID_PUBLIC_KEY et VAPID_PRIVATE_KEY. Définissez VAPID_SUBJECT sur mailto:test@test.test. Toutes ces valeurs doivent être placées entre guillemets doubles. Une fois les modifications effectuées, votre fichier .env doit se présenter comme suit :
VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:test@test.test"
  1. Fermez le terminal Glitch.
  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 aura éventuellement besoin d'un service worker pour recevoir et afficher les notifications. Il est préférable d'enregistrer le service worker dès que possible. Pour en savoir plus, consultez Recevoir et afficher les messages envoyés sous forme de notifications.

  1. Remplacez le commentaire // TODO add startup logic here par le code suivant :
// TODO add startup logic here
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);
  1. Pour prévisualiser le site, appuyez sur Afficher l'application, puis sur Plein écran plein écran.
  1. Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir DevTools.
  2. Cliquez sur l'onglet Console. Le message Service worker was registered. doit s'afficher dans la console.

Demander l'autorisation de notification push

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

  1. Dans l'interface utilisateur de Glitch, cliquez sur Afficher le code source pour revenir à votre code.
  2. Dans public/index.js, remplacez le commentaire // TODO dans subscribeButtonHandler() par le code suivant :
// TODO
// 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.');
}
  1. Revenez à l'onglet de l'application, puis cliquez sur S'abonner aux notifications push. Votre navigateur ou votre système d'exploitation vous demandera probablement si vous souhaitez autoriser le site Web à vous envoyer des notifications push. Cliquez sur Allow (Autoriser) (ou sur l'expression équivalente utilisée par votre navigateur/OS). Dans la console, un message vous indiquera si la demande 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 demander au serveur de les stocker dans une base de données à long terme. Pour en savoir plus sur le processus d'abonnement, consultez Inscrivre le client aux notifications push.

  1. Ajoutez le code mis en surbrillance suivant à 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 (push silencieux), mais les navigateurs n'autorisent pas cette fonctionnalité 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 de transfert.

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 au cas où il changerait d'avis et ne souhaiterait plus recevoir de notifications push.

  1. Remplacez le commentaire // TODO dans unsubscribeButtonHandler() par le code suivant:
// TODO
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 en tant que 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 à partir de votre serveur. Pour en savoir plus, consultez Recevoir et afficher les messages envoyés 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:
// TODO
let data = event.data.json();
const image = 'https://cdn.glitch.com/614286c9-b4fc-4303-a6a9-a4cef0601b74%2Flogo.png?v=1605150951230';
const options = {
  body: data.options.body,
  icon: image
}
self.registration.showNotification(
  data.title, 
  options
);
  1. Revenez à l'onglet "Applications".
  2. Cliquez sur M'envoyer une notification. Vous devriez recevoir une notification push.
  3. Ouvrez l'URL de l'onglet de votre application sur d'autres navigateurs (ou même sur d'autres appareils), suivez le workflow d'abonnement, puis cliquez sur Notifier tout. Vous devriez recevoir la même notification push dans tous les navigateurs auxquels vous êtes abonné. Consultez la section Compatibilité des navigateurs pour obtenir la liste des combinaisons de navigateur/OS connues pour fonctionner ou non.

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 la pratique, vous utiliserez probablement la notification pour réengager votre 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:
// TODO
event.notification.close();
event.waitUntil(self.clients.openWindow('https://web.dev'));
  1. Revenez à l'onglet de l'application, envoyez-vous une autre notification, puis cliquez dessus. Votre navigateur doit ouvrir un nouvel onglet et charger https://web.dev.

Étapes suivantes