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 (le serveur crée un un nouvel enregistrement de base de données lorsqu'un client accepte les notifications push, 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

L'objectif de cet atelier de programmation est de vous aider à apprendre par la pratique. beaucoup parler de concepts. Départ 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à terminé. Vous ne pourrez à implémenter le serveur dans cet atelier de programmation. Pour apprendre à mettre en œuvre via un client de notification push, consultez Atelier de programmation: Créer une notification push client.

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 une combinaison de système d'exploitation et de navigateur):

  • macOS: Brave, Edge, Safari
  • iOS

Pile d'applications

  • Le serveur repose sur Express.js.
  • 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 besoin d'utiliser aucune de ces technologies pour implémenter les 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 affiché à droite de ces instructions s'appellera l'UI de Glitch tout au long de cet atelier de programmation.

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

Configurer l'authentification

Pour que les notifications push fonctionnent, vous devez configurer votre serveur et votre client à l'aide de clés d'authentification. Consultez Signer vos requêtes de protocole Web push. pour en savoir plus.

  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. Copier la clé privée et les valeurs des clés publiques.
  3. Ouvrez .env, puis mettez à jour VAPID_PUBLIC_KEY et VAPID_PRIVATE_KEY. Définir De VAPID_SUBJECT à mailto:test@test.test. Toutes ces valeurs doivent être encapsulées entre guillemets. Une fois vos modifications effectuées, le fichier .env doit se présenter comme suit : semblable à celle-ci:
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. La principale votre serveur doit enregistrer les nouveaux abonnements aux notifications push. et supprimer les anciens abonnements. Ces abonnements vous permettent transmettre des messages aux clients à l'avenir. Consultez la section Abonner le client aux notifications push. pour en savoir plus sur le processus d'abonnement.

Enregistrer les informations du nouvel abonnement

  1. Pour prévisualiser le site, appuyez sur Afficher l'application. Appuyez ensuite sur Plein écran plein écran
  1. Cliquez sur Enregistrer un service worker dans l'onglet de l'application. Dans la zone d'état, vous un message semblable à celui-ci s'affiche:
Service worker registered. Scope: https://desert-cactus-sunset.glitch.me/
  1. Dans l'onglet de l'application, cliquez sur S'abonner pour envoyer des messages push. Votre navigateur ou système d'exploitation vous demander si vous souhaitez autoriser le site Web à vous envoyer des notifications push. Cliquez sur Autoriser (ou l'expression équivalente utilisée par votre navigateur ou système d'exploitation). Dans la zone d'état, vous devriez voir un message semblable à par:
Service worker subscribed to push.  Endpoint: https://fcm.googleapis.com/fcm/send/…
  1. Revenez à votre code en cliquant sur View Source (Afficher la source) dans l'interface utilisateur de Glitch.
  2. Ouvrez les journaux Glitch en cliquant sur Tools (Outils), puis sur Logs (Journaux). Toi /add-subscription doit s'afficher, suivi de certaines données. /add-subscription correspond à l'URL à laquelle le client envoie une PUBLIER lorsqu'il souhaite s'abonner aux notifications push. Les données qui voici 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 de l'application.
  2. Cliquez sur Se désabonner du push.
  3. Examinez à nouveau les journaux de glitch. Vous devriez voir la mention /remove-subscription suivie par les 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 réellement les messages push directement aux clients. Pour ce faire, elle repose plutôt sur un service push. Votre serveur en gros lance simplement le processus de transmission de messages aux clients Requêtes de service (requêtes de protocole Web push) vers un service Web (le service push) appartenant au fournisseur du navigateur utilisé par l'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 de l'application.
  2. Cliquez sur Se désabonner du mode push, puis à nouveau sur S'abonner pour envoyer des notifications push. Cela n'est nécessaire que parce que, comme mentionné 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 doit être Hello, Notifications! et le corps doit être ID: <ID>, où <ID> est un un nombre aléatoire.
  4. Ouvrez votre appli sur d'autres navigateurs ou appareils, et essayez de les abonner aux notifications push puis en cliquant sur le bouton Notifier tout. Vous devriez recevoir la même notification tous vos appareils auxquels vous êtes abonné (par exemple, l'identifiant figurant dans le corps de la notification push doit identiques).

Étapes suivantes