Utiliser les notifications push pour engager et réengager les utilisateurs

Kate Jeffreys
Kate Jeffreys

Les notifications présentent de petits morceaux d'informations à un utilisateur. Les applications Web peuvent utiliser des notifications pour informer les utilisateurs d'événements importants et urgents, ou d'actions qu'ils doivent effectuer.

L'apparence des notifications varie selon les plates-formes. Exemple :

Notification sur un appareil Android.
Notification sur un MacBook

Traditionnellement, les navigateurs Web devaient lancer l'échange d'informations entre le serveur et le client en envoyant une requête. La technologie Web push, quant à elle, vous permet de configurer votre serveur pour qu'il envoie des notifications lorsque cela est nécessaire pour votre application. Un service push crée des URL uniques pour chaque service worker abonné. L'envoi de messages à l'URL d'un service worker déclenche des événements sur ce service, qui sont alors invités à afficher une notification.

Les notifications push peuvent aider les utilisateurs à tirer le meilleur parti de votre application en les invitant à la rouvrir et à l'utiliser sur la base des dernières informations.

Créer et envoyer des notifications

Créez des notifications à l'aide de l'API Notifications. Un objet Notification comporte une chaîne title et un objet options. Exemple :

let title = 'Hi!';
let options
= {
  body
: 'Very Important Message',
 
/* other options can go here */
};
let notification
= new Notification(title, options);

title s'affiche en gras lorsque la notification est active, tandis que body contient du texte supplémentaire.

Obtenir l'autorisation d'envoyer des notifications

Pour afficher une notification, votre application doit obtenir l'autorisation de l'utilisateur:

Notification.requestPermission();

Comment fonctionnent les notifications push ?

La vraie force des notifications réside dans la combinaison des service workers et de la technologie push:

  • Les service workers peuvent s'exécuter en arrière-plan et afficher des notifications même lorsque votre application n'est pas visible à l'écran.

  • La technologie push vous permet de configurer votre serveur pour qu'il envoie des notifications lorsque cela est nécessaire pour votre application. Un service push crée des URL uniques pour chaque service worker abonné. L'envoi de messages à l'URL d'un service worker déclenche des événements sur ce service, qui sont alors invités à afficher une notification.

Dans l'exemple de flux suivant, un client enregistre un service worker et s'abonne aux notifications push. Ensuite, le serveur envoie une notification au point de terminaison de l'abonnement.

Le client et le service worker utilisent vanilla JavaScript sans bibliothèques supplémentaires. Le serveur est créé avec le package npm express sur Node.js et utilise le package npm web-push pour envoyer des notifications. Pour envoyer des informations au serveur, le client appelle une URL POST que le serveur a exposée.

Partie 1: Enregistrer un service worker et s'abonner au mode Push

  1. Une application cliente enregistre un service worker avec ServiceWorkerContainer.register(). Le service worker enregistré continue de s'exécuter en arrière-plan lorsque le client est inactif.

    Code client:

    navigator.serviceWorker.register('sw.js');
  2. Le client demande à l'utilisateur l'autorisation d'envoyer des notifications.

    Code client:

    Notification.requestPermission();
  3. Pour activer les notifications push, le service worker crée un abonnement push à l'aide de PushManager.subscribe(). Dans l'appel de PushManager.subscribe(), le service worker fournit la clé API de l'application en tant qu'identifiant.

    Code client:

    navigator.serviceWorker.register('sw.js').then(sw => {
      sw
    .pushManager.subscribe({ /* API key */ });
    });

    Les services push comme Firebase Cloud Messaging fonctionnent avec un modèle d'abonnement. Lorsqu'un service worker s'abonne à un service push en appelant PushManager.subscribe(), le service push crée une URL unique à ce service worker. Cette URL est appelée point de terminaison de l'abonnement.

  4. Le client envoie le point de terminaison de l'abonnement au serveur d'applications.

    Code client:

    navigator.serviceWorker.register('sw.js').then(sw => {
      sw
    .pushManager.subscribe({ /* API key */ }).then(subscription => {
        sendToServer
    (subscription, '/new-subscription', 'POST');
     
    });
    });

    Code du serveur:

    app.post('/new-subscription', (request, response) => {
     
    // extract subscription from request
     
    // send 'OK' response
    });

Partie 2: Envoyer une notification

  1. Le serveur Web envoie une notification au point de terminaison de l'abonnement.

    Code du serveur:

    const webpush = require('web-push');

    let options
    = { /* config info for cloud messaging and API key */ };
    let subscription
    = { /* subscription created in Part 1*/ };
    let payload
    = { /* notification */ };

    webpush
    .sendNotification(subscription, payload, options);
  2. Les notifications envoyées au point de terminaison de l'abonnement déclenchent des événements push avec le service worker comme cible. Le service worker reçoit le message et l'affiche à l'utilisateur sous la forme d'une notification.

    Code du service worker:

    self.addEventListener('push', (event) => {
      let title
    = { /* get notification title from event data */ }
      let options
    = { /* get notification options from event data */ }
      showNotification
    (title, options);
    })
  3. L'utilisateur interagit avec la notification et active l'application Web si elle ne l'était pas déjà.

Étapes suivantes

L'étape suivante consiste à implémenter les notifications push.

Nous avons créé une série d'ateliers de programmation pour vous guider à chaque étape du processus.