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

Kate Jeffreys
Kate Jeffreys
Kayce basques

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

  • Suivi des abonnements aux notifications push (par exemple, le serveur crée un enregistrement de base de données lorsqu'un client accepte les notifications push, et supprime un enregistrement de base de données existant lorsqu'un client désactive cette fonctionnalité).
  • Envoie une notification push à un seul client
  • Envoie une notification push à tous les clients abonnés.

Cet atelier de programmation est conçu pour vous aider à apprendre par la pratique et ne parle pas beaucoup de concepts. Pour en savoir plus sur les concepts liés aux notifications push, consultez Comment fonctionnent les notifications push.

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

Consultez push-notifications-server-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 les combinaisons de système d'exploitation et de navigateur) suivantes :

  • macOS: Brave, Edge et Safari
  • iOS

Pile d'applications

  • Ce serveur repose 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 ces technologies pour implémenter les notifications push. Nous avons choisi ces technologies, car elles offrent une expérience d'atelier de programmation fiable.

Préparation

Obtenir une copie modifiable du code

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

  1. Cliquez sur Remix to Edit (Remixer pour modifier) pour rendre le projet modifiable.

Configurer l'authentification

Avant de pouvoir activer les notifications push, vous devez configurer votre serveur et votre client avec des clés d'authentification. Pour en savoir plus, consultez la section Signer vos requêtes du protocole Web push.

  1. Ouvrez le terminal Glitch en cliquant sur Tools (Outils), puis sur Terminal.
  2. Dans le terminal, exécutez npx web-push generate-vapid-keys. Copiez la clé privée et les valeurs de la clé publique.
  3. Ouvrez .env, puis mettez à jour VAPID_PUBLIC_KEY et VAPID_PRIVATE_KEY. Définissez VAPID_SUBJECT sur mailto:test@test.test. Toutes ces valeurs doivent être encapsulées entre guillemets. Une fois les modifications effectuées, le fichier .env devrait 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. Votre serveur doit enregistrer les nouveaux abonnements aux notifications push et supprimer les anciens abonnements. Ce sont ces abonnements qui vous permettent de transmettre des messages aux clients à l'avenir. Pour en savoir plus sur le processus d'abonnement, consultez la section Activer les notifications push du client.

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 Register service worker (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 pour transmettre. 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 toute expression équivalente utilisée par votre navigateur/système d'exploitation). 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 la source dans l'interface utilisateur Glitch.
  2. Ouvrez les journaux de 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 sont les informations d'abonnement du client que vous devez enregistrer.
  3. Ouvrez server.js.
  4. Mettez à jour la logique du gestionnaire de routes /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 "Application".
  2. Cliquez sur Se désabonner des notifications push.
  3. Consultez à 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 la section Envoyer un message push, votre serveur n'envoie pas les messages directement aux clients. Il s'agit plutôt d'un service push pour ce faire. Votre serveur lance simplement le processus de transmission des messages aux clients en envoyant des requêtes de service Web (requêtes du protocole Web push) à un service Web (le service push) appartenant au fournisseur du navigateur utilisé par votre utilisateur.

  1. Mettez à jour la logique du gestionnaire de routes /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. Mettez à jour 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 "Application".
  2. Cliquez sur Se désabonner des notifications push, puis à nouveau sur S'abonner au flux 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'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.
  4. Ouvrez votre application sur d'autres navigateurs ou appareils, essayez de les abonner aux notifications push, puis cliquez sur le bouton Notifier tout. Vous devriez recevoir la même notification sur tous vos appareils abonnés (l'ID dans le corps de la notification push doit être le même).

Étapes suivantes