Cette page a été traduite par l'API Cloud Translation.

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

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:

effectue le suivi des abonnements aux notifications push (par exemple, le serveur crée un enregistrement de base de données lorsqu'un client active les notifications push et supprime un enregistrement de base de données existant lorsqu'un client désactive ces notifications) ;
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. Il 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 client de cet atelier de programmation est déjà terminé. Vous n'implémenterez le serveur que dans cet atelier de programmation. Pour savoir comment implémenter un client de notification push, consultez 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 (ou les combinaisons système d'exploitation/navigateur suivants):

macOS: Brave, Edge, Safari
iOS

Pile d'applications

Le serveur repose 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 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.

Préparation

Obtenir une copie modifiable du code

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

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 avec des clés d'authentification. Pour en savoir plus, consultez Signer vos requêtes de protocole Web push.

Ouvrez le terminal Glitch en cliquant sur Tools (Outils), puis sur Terminal (Terminal).
Dans le terminal, exécutez npx web-push generate-vapid-keys. Copiez les valeurs de la clé privée et de la clé publique.
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 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"

Fermez le terminal Glitch.

Les valeurs des variables d'environnement (contenus dans .env) sont propres à un seul projet Glitch. Si vous remixez votre projet, les valeurs dans .env ne seront pas copiées.

Ouvrez public/index.js.
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. Ces abonnements vous permettront de transmettre des messages aux clients à l'avenir. Pour en savoir plus sur le processus d'abonnement, consultez la section Abonner le client aux notifications push.

Enregistrer les informations du nouvel abonnement

Pour prévisualiser le site, appuyez sur View App (Afficher l'application), puis sur Fullscreen (Plein écran) .

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/

Dans l'onglet de l'application, cliquez sur S'abonner pour envoyer des messages push. Votre navigateur ou 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 ou 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/…

Remarque : L'URL du point de terminaison varie en fonction du navigateur que vous utilisez. Par exemple, dans Firefox, l'URL commence par https://updates.push.services.mozilla.com/….

Revenez à votre code en cliquant sur View Source (Afficher la source) dans l'interface utilisateur de Glitch.
Ouvrez les journaux Glitch en cliquant sur Tools (Outils), puis sur Logs (Journaux). Vous devriez voir /add-subscription, suivi de certaines 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.
Ouvrez server.js.
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);
});

Remarque : La base de données écrit dans .data/db.json. Pour inspecter ce fichier dans Glitch, cliquez sur Tools (Outils), puis sur Terminal (Terminal), puis exécutez cat .data/db.json dans le terminal. .data/db.json est supprimé à chaque fois que vous modifiez votre application. En effet, Glitch exécute le script start dans package.json chaque fois que vous modifiez votre application, et ce script inclut un appel à rm .data/db.json.

Supprimer les anciennes informations d'abonnement

Revenez à l'onglet de l'application.
Cliquez sur Se désabonner du push.
Examinez à nouveau les journaux de glitch. Vous devriez voir /remove-subscription suivi des informations d'abonnement du client.
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 aux clients. Pour ce faire, elle repose plutôt sur un service push. Votre serveur lance simplement le processus de transmission des messages aux clients en envoyant des requêtes de service Web (requêtes de protocole Web push) à un service Web (le service push) appartenant au fournisseur du navigateur utilisé par votre utilisateur.

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);
});

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} `);
      });
  });
}

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);
  }
});

Revenez à l'onglet de l'application.
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 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.
Cliquez sur M'avertir. Vous devriez recevoir une notification push. Le titre doit être Hello, Notifications! et le corps ID: <ID>, où <ID> est un nombre aléatoire.
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 les appareils auxquels vous êtes abonné (l'ID indiqué dans le corps de la notification push doit donc être le même).

Étapes suivantes

Consultez la page Présentation des notifications push pour mieux comprendre les concepts de fonctionnement des notifications push.
Consultez l'atelier de programmation: Créer un client de notification push pour apprendre à créer un client qui demande une autorisation de notification, abonne l'appareil pour recevoir des notifications push, et utilise un service worker pour recevoir des messages push et les afficher en tant que notifications.