Les notifications push sont désormais compatibles avec plusieurs navigateurs

Envoyez des notifications utiles et opportunes à vos utilisateurs.

Thomas Steiner

Les notifications push ont été normalisées en 2016 avec la sortie de l'API Push et de l'API Notification, qui font partie du groupe de travail sur les applications Web du W3C. Ces API fournissent aux développeurs Web les fonctionnalités nécessaires pour intégrer des notifications push dans leurs applications Web, et aux utilisateurs pour recevoir des notifications et interagir avec elles dans leurs navigateurs Web. Les messages push sont des notifications envoyées au navigateur Web d'un utilisateur par un site Web ou une application auxquels l'utilisateur a précédemment accordé l'autorisation d'envoyer des notifications. Ces messages peuvent être utilisés pour alerter l'utilisateur sur de nouveaux contenus ou des mises à jour, lui rappeler des événements ou des échéances à venir, ou lui fournir d'autres informations importantes. Les messages push peuvent être particulièrement utiles pour les applications qui doivent fournir des informations pertinentes et opportunes à leurs utilisateurs, comme les applications d'actualités ou de sports, ou pour les sites Web d'e-commerce qui souhaitent envoyer des notifications aux utilisateurs concernant des offres spéciales ou des promotions.

Pour vous inscrire aux notifications push, vérifiez d'abord si votre navigateur les prend en charge en recherchant les objets serviceWorker et PushManager dans les objets navigator et window.

Si les notifications push sont prises en charge, utilisez les mots clés async et await pour enregistrer le service worker et vous abonner aux notifications push. Voici un exemple d'utilisation de JavaScript :

// Check if the browser supports push notifications.
if ("serviceWorker" in navigator && "PushManager" in window) {
  try {
    // Register the service worker.
    const swReg = await navigator.serviceWorker.register("/sw.js");

    // Subscribe for push notifications.
    const pushSubscription = await swReg.pushManager.subscribe({
      userVisibleOnly: true
    });

    // Save the push subscription to the database.
    savePushSubscription(pushSubscription);
  } catch (error) {
    // Handle errors.
    console.error("Error subscribing for push notifications.", error);
  }
} else {
  // Push notifications are not supported by the browser.
  console.error("Push notifications are not supported by the browser.");
}

Documentation complémentaire

• Présentation des notifications push
• API Push
• Notifications Web Push pour les applications Web sur iOS et iPadOS