Réengager les utilisateurs avec des messages Push

  • Article

Les messages Push sont un canal de communication utile qui permet aux applications de mettre à jour leurs utilisateurs avec du contenu pertinent et opportun. Les messages Push peuvent être utilisés pour réengager les utilisateurs avec votre application.

L’un des principaux avantages des messages push est qu’ils peuvent être remis par le serveur de votre application même lorsque l’utilisateur n’utilise pas activement votre application.

Les notifications par message Push prennent part au centre de notifications du système et peuvent afficher des images et des informations textuelles. Les notifications sont utiles pour avertir l’utilisateur d’une mise à jour importante dans votre application. Toutefois, les notifications doivent être utilisées rarement, car elles ont tendance à perturber le flux de travail de l’utilisateur.

Pour créer une PWA qui prend en charge les notifications Push :

  1. Demandez à l’utilisateur l’autorisation de recevoir des notifications Push dans le code côté client de votre PWA.
  2. Abonnez-vous aux messages Push de votre serveur.
  3. Envoyez des messages Push à partir du code côté serveur de votre PWA.
  4. Afficher des notifications lors de la réception de messages Push.

Étape 1 : Demander l’autorisation de l’utilisateur de recevoir des notifications Push

Avant de pouvoir envoyer des notifications Push à votre PWA, vous devez demander à l’utilisateur l’autorisation de recevoir des messages. Pour demander l’autorisation, utilisez l’API Notification.requestPermission dans votre code côté client, par exemple lorsque l’utilisateur clique sur un bouton :

button.addEventListener("click", () => {
  Notification.requestPermission().then(permission => {
    if (permission === "granted") {
      console.log("The user accepted to receive notifications");
    }
  });
});

Vous pouvez case activée l’autorisation status plus tard :

if (Notification.permission === "granted") {
  console.log("The user already accepted");
}

Étape 2 : S’abonner aux notifications Push

Pour recevoir des événements Push de votre serveur, abonnez-vous aux notifications Push à l’aide de l’API Push.

Avant la création d’un nouvel abonnement par émission de données, Microsoft Edge vérifie si l’utilisateur a accordé l’autorisation PWA de recevoir des notifications.

Si l’utilisateur n’a pas accordé l’autorisation PWA pour recevoir des notifications, l’utilisateur est invité par le navigateur à le faire. Si l’utilisateur n’accorde pas d’autorisation au navigateur, la demande de registration.pushManager.subscribe lève un DOMException.

L’extrait de code suivant montre comment s’abonner aux notifications Push dans votre PWA :

async function subscribeToPushMessages() {
  const serviceWorkerRegistration = await navigator.serviceWorker.ready;

  // Check if the user has an existing subscription
  let pushSubscription = serviceWorkerRegistration.pushManager.getSubscription();
  if (pushSubscription) {
    // The user is already subscribed to push notifications
    return;
  }

  try {
    // Subscribe the user to push notifications
    pushSubscription = await serviceWorkerRegistration.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey: urlBase64ToUint8Array("YOUR PUBLIC VAPID KEY HERE")
    });
  } catch (err) {
    // The subscription wasn't successful.
    console.log("Error", err);
  }
}

// Utility function for browser interoperability
function urlBase64ToUint8Array(base64String) {
  var padding = '='.repeat((4 - base64String.length % 4) % 4);
  var base64 = (base64String + padding)
      .replace(/\-/g, '+')
      .replace(/_/g, '/');
  
  var rawData = window.atob(base64);
  var outputArray = new Uint8Array(rawData.length);
  
  for (var i = 0; i < rawData.length; ++i) {
    outputArray[i] = rawData.charCodeAt(i);
  }
  return outputArray;
}

La clé VAPID mentionnée dans l’extrait de code précédent est une clé publique utilisée pour identifier le serveur qui envoie les messages Push et chiffrer la charge utile du message Push. Pour plus d’informations sur les clés VAPID, consultez Étape 3 - Envoyer des messages Push à partir de votre serveur .

L’option userVisibleOnly de configuration de la registration.pushManager.subscribe fonction doit être présente et définie sur true. Cette option indique que le message push doit être affiché à l’utilisateur. Microsoft Edge ne prend pas en charge les messages Push qui ne sont pas affichés à l’utilisateur.

Étape 3 : Envoyer des messages Push à partir de votre serveur

Votre application a besoin de clés VAPID (Voluntary Application Server Identification) pour envoyer des messages Push de votre serveur à vos clients PWA. Plusieurs générateurs de clés VAPID sont disponibles en ligne (par exemple, Vapidkeys.com).

Une fois que vous disposez d’une clé VAPID, vous pouvez envoyer des messages Push à vos clients PWA à l’aide du protocole Web Push.

Vous pouvez utiliser une bibliothèque pour envoyer des messages Push à partir de votre serveur, en fonction du langage de programmation que vous utilisez. Par exemple, vous pouvez utiliser la bibliothèque push web si votre serveur utilise Node.js. D’autres bibliothèques sont disponibles dans le référentiel des bibliothèques WebPush.

Étape 4 : Afficher les notifications lors de la réception de messages Push

Une fois qu’un abonnement est créé dans votre PWA (comme indiqué à l’Étape 2 - S’abonner aux notifications Push), ajoutez un gestionnaire d’événements push dans votre service Worker pour gérer les messages Push envoyés par votre serveur.

L’extrait de code suivant montre comment afficher une notification lors de la réception d’un message Push :

// Listen to push events.
self.addEventListener('push', event => {
  // Check if the user has granted permission to display notifications.
  if (Notification.permission === "granted") {
    // Get the notification data from the server.
    const notificationText = event.data.text();

    // Display a notification.
    const showNotificationPromise = self.registration.showNotification('Sample PWA', {
      body: notificationText,
      icon: 'images/icon512.png'
    });

    // Keep the service worker running until the notification is displayed.
    event.waitUntil(showNotificationPromise);
  }
});

Si votre PWA n’affiche pas de notification lors de la réception d’un message Push, Microsoft Edge affiche une notification générique qui indique qu’un message Push a été reçu.

Voir aussi