Atelier de programmation: Créer un serveur de notifications push

Kate Jeffreys
Kate Jeffreys
Kayce Basques
Kayce Basques
X GitHub

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

  • Effectue le suivi des abonnements aux notifications push (c'est-à-dire que le serveur crée un enregistrement de base de données lorsqu'un client s'abonne aux notifications push et supprime un enregistrement de base de données existant lorsqu'un client se désabonne).
  • Envoie une notification push à un seul client
  • Envoie une notification push à tous les clients abonnés

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

Le code client de cet atelier de programmation est déjà complet. Dans cet atelier de programmation, vous n'implémenterez que le serveur. Pour découvrir comment implémenter un client de notifications push, consultez l'atelier de programmation : créer un client 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 (ou combinaisons de système d'exploitation et de navigateur) suivants :

  • macOS : Brave, Edge, Safari
  • iOS

Pile d'applications

  • Le serveur est basé sur Express.js.
  • La bibliothèque Node.js web-push gère toute la logique des notifications push.
  • Les données d'abonnement sont écrites dans un fichier JSON à l'aide de lowdb.

Vous n'avez pas besoin d'utiliser l'une de ces technologies pour implémenter les notifications push. Nous avons choisi ces technologies, car elles offrent une expérience fiable pour les ateliers de programmation.

Configuration

Configurer l'authentification

Avant de pouvoir recevoir des notifications push, 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. Ouvrez le terminal.
  2. Dans le terminal, exécutez npx web-push generate-vapid-keys. Copiez les valeurs de la clé privée et de la clé publique.
  3. 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 vos modifications effectuées, votre fichier .env doit ressembler à ceci :
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.

Gérer les abonnements

Votre client gère la majeure partie du processus d'abonnement. Les principales tâches que votre serveur doit effectuer sont d'enregistrer les nouveaux abonnements aux notifications push et de supprimer les anciens. Ces abonnements vous permettent d'envoyer des messages aux clients à l'avenir. Pour en savoir plus sur le processus d'abonnement, consultez Abonner le client aux notifications push.

Enregistrer les nouvelles informations sur l'abonnement

  1. Cliquez sur Register service worker (Enregistrer le service worker) dans l'onglet de l'application. Un message semblable à celui-ci doit s'afficher dans la zone d'état :
Service worker registered. Scope: https://example.com
  1. Dans l'onglet de l'application, 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 Autoriser (ou sur l'expression équivalente utilisée par votre navigateur/OS). Un message semblable à celui-ci doit s'afficher dans la zone d'état :
Service worker subscribed to push.  Endpoint: https://fcm.googleapis.com/fcm/send/…
  1. Ouvrez le terminal pour afficher les journaux. Vous devriez voir /add-subscription suivi de données. /add-subscription est l'URL à laquelle le client envoie une requête POST lorsqu'il souhaite s'abonner aux notifications push. Les données qui suivent sont les informations d'abonnement du client que vous devez enregistrer.
  2. Ouvrez server.js.
  3. Mettez à jour la logique du gestionnaire de route /add-subscription avec le code suivant :
app.post('/add-subscription', (request, response) => {
  console.log('/add-subscription');
  console.log(request.body);
  console.log(`Subscribing ${request.body.endpoint}`);
  db.get('subscriptions')
    .push(request.body)
    .write();
  response.sendStatus(200);
});

Supprimer les anciennes informations sur l'abonnement

  1. Revenez à l'onglet de l'application.
  2. Cliquez sur Se désabonner des notifications push.
  3. Consultez à nouveau les journaux. Vous devriez voir /remove-subscription suivi des informations sur l'abonnement du client.
  4. Mettez à jour la logique du gestionnaire de route /remove-subscription avec le code suivant :
app.post('/remove-subscription', (request, response) => {
  console.log('/remove-subscription');
  console.log(request.body);
  console.log(`Unsubscribing ${request.body.endpoint}`);
  db.get('subscriptions')
    .remove({endpoint: request.body.endpoint})
    .write();
  response.sendStatus(200);
});

Envoyer des notifications

Comme expliqué dans Envoyer un message push, votre serveur n'envoie pas directement les messages push aux clients. Il s'appuie plutôt sur un service push pour ce faire. Votre serveur lance simplement le processus d'envoi de messages aux clients en effectuant des requêtes de service Web (requêtes de protocole Web Push) vers un service Web (le service Push) appartenant au fournisseur du navigateur utilisé par votre utilisateur.

  1. Mettez à jour la logique du gestionnaire de route /notify-me avec le code suivant :
app.post('/notify-me', (request, response) => {
  console.log('/notify-me');
  console.log(request.body);
  console.log(`Notifying ${request.body.endpoint}`);
  const subscription = 
      db.get('subscriptions').find({endpoint: request.body.endpoint}).value();
  sendNotifications([subscription]);
  response.sendStatus(200);
});
  1. Modifiez la fonction sendNotifications() avec le code suivant :
function sendNotifications(subscriptions) {
  // TODO
  // Create the notification content.
  const notification = JSON.stringify({
    title: "Hello, Notifications!",
    options: {
      body: `ID: ${Math.floor(Math.random() * 100)}`
    }
  });
  // Customize how the push service should attempt to deliver the push message.
  // And provide authentication information.
  const options = {
    TTL: 10000,
    vapidDetails: vapidDetails
  };
  // Send a push message to each client specified in the subscriptions array.
  subscriptions.forEach(subscription => {
    const endpoint = subscription.endpoint;
    const id = endpoint.substr((endpoint.length - 8), endpoint.length);
    webpush.sendNotification(subscription, notification, options)
      .then(result => {
        console.log(`Endpoint ID: ${id}`);
        console.log(`Result: ${result.statusCode}`);
      })
      .catch(error => {
        console.log(`Endpoint ID: ${id}`);
        console.log(`Error: ${error} `);
      });
  });
}
  1. Mettez à jour la logique du gestionnaire de route /notify-all avec le code suivant :
app.post('/notify-all', (request, response) => {
  console.log('/notify-all');
  response.sendStatus(200);
  console.log('Notifying all subscribers');
  const subscriptions =
      db.get('subscriptions').cloneDeep().value();
  if (subscriptions.length > 0) {
    sendNotifications(subscriptions);
    response.sendStatus(200);
  } else {
    response.sendStatus(409);
  }
});
  1. Revenez à l'onglet de l'application.
  2. Cliquez sur M'avertir. Vous devriez recevoir une notification push. Le titre doit être Hello, Notifications! et le corps doit être ID: <ID>, où <ID> est un nombre aléatoire.
  3. Ouvrez votre application sur d'autres navigateurs ou appareils, essayez de les abonner aux notifications push, puis cliquez sur le bouton Notifier tout le monde. Vous devriez recevoir la même notification sur tous les appareils auxquels vous êtes abonné (c'est-à-dire que l'ID figurant dans le corps de la notification push devrait être le même).

Étapes suivantes