Les notifications push sont désormais compatibles avec plusieurs navigateurs

Envoyez des notifications opportunes et utiles à vos utilisateurs.

Thomas Steiner

Les notifications push ont été normalisées en 2016 avec la publication 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 les fonctionnalités nécessaires aux développeurs Web pour intégrer des notifications push à leurs applications Web et aux utilisateurs pour recevoir et interagir avec les notifications dans leurs navigateurs Web. Les messages push sont des notifications envoyées au navigateur Web d'un utilisateur à partir d'un site Web ou d'une application pour lesquels l'utilisateur a précédemment autorisé l'envoi de notifications. Ces messages peuvent être utilisés pour alerter l'utilisateur de nouveaux contenus ou de 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 sport, ou pour les sites Web d'e-commerce qui souhaitent envoyer des notifications aux utilisateurs concernant des offres spéciales ou des soldes.

Pour activer les notifications push, commencez par vérifier si votre navigateur les accepte en recherchant les objets serviceWorker et PushManager dans les objets navigator et window.

Si les notifications push sont compatibles, 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 pour ce faire :

// 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
• Web Push pour les applications Web sur iOS et iPadOS