Atelier de programmation: créer un client de notification push

Kate Jeffreys
Kate Jeffreys
Kayce Basques

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

  • Abonne l'utilisateur aux notifications push.
  • Reçoit des messages push et les affiche sous forme de notifications.
  • Désabonne l'utilisateur des notifications push.

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 serveur de cet atelier de programmation est déjà terminé. Vous ne pourrez pour implémenter le client dans cet atelier de programmation. Pour apprendre à mettre en œuvre un serveur de notifications push, consultez Atelier de programmation: Créer une notification push Google Cloud.

Consultez push-notifications-client-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

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. Dans l'interface utilisateur de Glitch, cliquez sur Tools (Outils), puis sur Terminal pour ouvrir le terminal Glitch.
  2. Dans le terminal Glitch, exécutez npx web-push generate-vapid-keys. Copier la clé privée et les valeurs des clés publiques.
  3. Dans l'interface utilisateur de Glitch, 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.

Enregistrer un service worker

Votre client aura besoin d'un service worker pour la réception et l'affichage les notifications. Il est préférable d'enregistrer le service worker le plus tôt possible. Reportez-vous à la section Recevoir et afficher les messages envoyés en tant que Notifications pour plus de contexte.

  1. Remplacez le commentaire // TODO add startup logic here par le code suivant:
// TODO add startup logic here
if ('serviceWorker' in navigator && 'PushManager' in window) {
  navigator.serviceWorker.register('./service-worker.js').then(serviceWorkerRegistration => {
    console.info('Service worker was registered.');
    console.info({serviceWorkerRegistration});
  }).catch(error => {
    console.error('An error occurred while registering the service worker.');
    console.error(error);
  });
  subscribeButton.disabled = false;
} else {
  console.error('Browser does not support service workers or push messages.');
}

subscribeButton.addEventListener('click', subscribeButtonHandler);
unsubscribeButton.addEventListener('click', unsubscribeButtonHandler);
  1. Pour prévisualiser le site, appuyez sur Afficher l'application. Appuyez ensuite sur Plein écran plein écran
  1. Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir les outils de développement.
  2. Cliquez sur l'onglet Console. Vous devriez voir le message Service worker was registered. s'est connecté à la console.

Demander l'autorisation de notification push

Vous ne devez jamais demander l'autorisation d'envoyer des notifications push lors du chargement de la page. Votre interface utilisateur doit plutôt demander à l'utilisateur s'il souhaite recevoir des notifications push. Une fois qu'ils ont explicitement confirmé (par un clic sur un bouton, par exemple), vous pouvez lancer le processus formel d’obtention de l’autorisation de notification push du navigateur.

  1. Dans l'interface utilisateur de Glitch, cliquez sur View Source (Afficher la source) pour revenir à votre code.
  2. Dans public/index.js, remplacez le commentaire // TODO dans subscribeButtonHandler() par le code suivant:
// TODO
// Prevent the user from clicking the subscribe button multiple times.
subscribeButton.disabled = true;
const result = await Notification.requestPermission();
if (result === 'denied') {
  console.error('The user explicitly denied the permission request.');
  return;
}
if (result === 'granted') {
  console.info('The user accepted the permission request.');
}
  1. Revenez à l'onglet de l'application et cliquez sur S'abonner pour envoyer des notifications push. Votre navigateur ou système d'exploitation vous demandera probablement si vous souhaitez que le site Web vous envoyer des notifications push. Cliquez sur Autoriser (ou toute expression équivalente). votre navigateur ou votre système d'exploitation). Dans la console, vous devriez voir un message indiquant si la demande a été acceptée ou refusée.

S'abonner aux notifications push

Le processus d'abonnement implique l'interaction avec un service Web contrôlé par le fournisseur du navigateur. C'est ce que l'on appelle un service push. Une fois que vous aurez Les informations d'abonnement aux notifications push dont vous avez besoin pour les envoyer à un serveur et faire en sorte que le serveur les stocke dans une base de données à long terme. Consultez la section Abonner le client aux notifications push. pour en savoir plus sur le processus d'abonnement.

  1. Ajoutez le code en surbrillance suivant à subscribeButtonHandler():
subscribeButton.disabled = true;
const result = await Notification.requestPermission();
if (result === 'denied') {
  console.error('The user explicitly denied the permission request.');
  return;
}
if (result === 'granted') {
  console.info('The user accepted the permission request.');
}
const registration = await navigator.serviceWorker.getRegistration();
const subscribed = await registration.pushManager.getSubscription();
if (subscribed) {
  console.info('User is already subscribed.');
  notifyMeButton.disabled = false;
  unsubscribeButton.disabled = false;
  return;
}
const subscription = await registration.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey: urlB64ToUint8Array(VAPID_PUBLIC_KEY)
});
notifyMeButton.disabled = false;
fetch('/add-subscription', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(subscription)
});

L'option userVisibleOnly doit être true. Il est possible qu'un jour pour envoyer des messages sans afficher de notifications visibles par l'utilisateur (transferts silencieux), mais les navigateurs ne permettent pas cette fonctionnalité pour le moment. pour des raisons de confidentialité.

La valeur applicationServerKey repose sur une fonction utilitaire qui : Convertit une chaîne base64 en Uint8Array. Cette valeur est utilisée pour entre votre serveur et le service push.

Se désabonner des notifications push

Une fois qu'un utilisateur s'est abonné aux notifications push, votre interface utilisateur doit proposer un moyen de se désabonner au cas où l'utilisateur change d'avis et ne souhaite plus recevoir de notifications push.

  1. Remplacer le commentaire // TODO dans unsubscribeButtonHandler() par le code suivant:
// TODO
const registration = await navigator.serviceWorker.getRegistration();
const subscription = await registration.pushManager.getSubscription();
fetch('/remove-subscription', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({endpoint: subscription.endpoint})
});
const unsubscribed = await subscription.unsubscribe();
if (unsubscribed) {
  console.info('Successfully unsubscribed from push notifications.');
  unsubscribeButton.disabled = true;
  subscribeButton.disabled = false;
  notifyMeButton.disabled = true;
}

Recevoir un message push et l'afficher sous forme de notification

Comme indiqué précédemment, vous avez besoin d'un service worker pour gérer réception et affichage des messages transmis au client depuis votre serveur. Reportez-vous à la section Recevoir et afficher les messages envoyés en tant que Notifications pour en savoir plus.

  1. Ouvrez public/service-worker.js et remplacez le commentaire // TODO. dans le gestionnaire d'événements push du service worker avec le code suivant:
// TODO
let data = event.data.json();
const image = 'https://cdn.glitch.com/614286c9-b4fc-4303-a6a9-a4cef0601b74%2Flogo.png?v=1605150951230';
const options = {
  body: data.options.body,
  icon: image
}
self.registration.showNotification(
  data.title, 
  options
);
  1. Revenez à l'onglet de l'application.
  2. Cliquez sur M'avertir. Vous devriez recevoir une notification push.
  3. Essayez d'ouvrir l'URL de l'onglet de votre appli dans d'autres navigateurs (ou même autres appareils), en suivant le workflow d'abonnement, puis cliquez sur Notifier tout. Vous devriez recevoir la même notification push sur tous les navigateurs auxquels vous êtes abonné. Reportez-vous à Compatibilité des navigateurs pour afficher la liste des navigateurs et systèmes d'exploitation des combinaisons de travail dont l'efficacité est connue ou non.

Vous pouvez personnaliser la notification de nombreuses façons. Consultez les paramètres de ServiceWorkerRegistration.showNotification() pour en savoir plus

Ouvrir une URL lorsqu'un utilisateur clique sur une notification

Dans la vraie vie, vous utiliserez probablement la notification comme un moyen pour susciter de nouveau l'intérêt des utilisateurs et les inciter à se rendre sur votre site. Pour ce faire, vous devez configurer un peu plus votre service worker.

  1. Remplacez le commentaire // TODO dans le fichier notificationclick du service worker. avec le code suivant:
// TODO
event.notification.close();
event.waitUntil(self.clients.openWindow('https://web.dev'));
  1. Retournez dans l'onglet de l'appli, envoyez-vous une autre notification, puis cliquez sur la notification. Votre navigateur doit ouvrir un nouvel onglet et se charger https://web.dev

Étapes suivantes