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

Kate Jeffreys
Kate Jeffreys
Kayce Basques

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

  • Il suit les abonnements aux notifications push (c'est-à-dire que le serveur crée un nouvel enregistrement de base de données lorsqu'un client active les notifications push et qu'il supprime un enregistrement de base de données existant lorsqu'un client les désactive).
  • 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 faisant et ne parle pas beaucoup des concepts. Consultez Comment fonctionnent les notifications push ? pour en savoir plus sur les concepts des notifications push.

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

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

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 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

Pile d'applications

  • Le serveur est basé sur Express.js.
  • La bibliothèque Node.js web-push gère toute la logique de notification 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 des notifications push. Nous avons choisi ces technologies, car elles offrent une expérience d'atelier de programmation fiable.

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. Ouvrez le terminal Glitch en cliquant sur Tools (Outils), puis sur Terminal (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 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.

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 abonnements. Ces abonnements vous permettent d'envoyer des messages aux clients à l'avenir. Pour en savoir plus sur le processus d'abonnement, consultez Inscrivre le client aux notifications push.

Enregistrer les nouvelles informations d'abonnement

  1. Pour prévisualiser le site, appuyez sur Afficher l'application, puis sur Plein écran plein écran.
  1. Cliquez sur Enregistrer un service worker dans l'onglet de l'application. Dans la zone d'état, un message semblable à celui-ci doit s'afficher:
Service worker registered. Scope: https://desert-cactus-sunset.glitch.me/
  1. Dans l'onglet de l'application, cliquez sur S'abonner à la diffusion. 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 zone d'état, un message semblable à celui-ci doit s'afficher:
Service worker subscribed to push.  Endpoint: https://fcm.googleapis.com/fcm/send/…
  1. Revenez à votre code en cliquant sur Afficher le code source dans l'interface utilisateur de Glitch.
  2. Ouvrez les journaux Glitch en cliquant sur Tools (Outils), puis sur Logs (Journaux). Vous devriez voir /add-subscription suivi de quelques 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 correspondent aux informations d'abonnement du client que vous devez enregistrer.
  3. Ouvrez server.js.
  4. Modifiez 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 d'abonnement

  1. Revenez à l'onglet "Applications".
  2. Cliquez sur Se désabonner du push.
  3. Examinez à nouveau les journaux de glitch. Vous devriez voir /remove-subscription, suivi des informations d'abonnement du client.
  4. Mettez à jour la logique du gestionnaire de routes /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. Votre serveur lance simplement le processus d'envoi de messages aux clients en envoyant des requêtes de service Web (requêtes de protocole Web Push) à un service Web (service push) appartenant au fournisseur du navigateur utilisé par votre utilisateur.

  1. Modifiez 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 routes /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 "Applications".
  2. Cliquez sur Désabonner des notifications push, puis à nouveau sur S'abonner aux notifications push. Cela n'est nécessaire que parce que, comme indiqué précédemment, Glitch redémarre le projet chaque fois que vous modifiez le code et que le projet est configuré pour supprimer la base de données au démarrage.
  3. Cliquez sur M'envoyer une notification. Vous devriez recevoir une notification push. Le titre doit être Hello, Notifications! et le corps ID: <ID>, où <ID> est un nombre aléatoire.
  4. Ouvrez votre application sur d'autres navigateurs ou appareils, puis essayez de les inscrire aux notifications push en cliquant sur le bouton Notifier tout. Vous devriez recevoir la même notification sur tous vos appareils abonnés (c'est-à-dire que l'ID dans le corps de la notification push doit être le même).

Étapes suivantes