Les notifications push sont désormais compatibles avec plusieurs navigateurs

Envoyez des notifications utiles et opportunes à vos utilisateurs.

Les notifications push ont été standardisées en 2016 avec le lancement des API Push et Notifications, qui font partie du groupe de travail sur les applications Web du W3C. Ces API offrent aux développeurs Web les fonctionnalités nécessaires pour intégrer les notifications push dans leurs applications Web, et permettre aux utilisateurs de recevoir des notifications et d'interagir avec elles dans leur navigateur Web. Les messages push sont des notifications envoyées au navigateur Web d'un utilisateur à partir d'un site Web ou d'une application que l'utilisateur a précédemment autorisé à envoyer des notifications. Ces messages peuvent être utilisés pour alerter l'utilisateur de nouveaux contenus ou des mises à jour, pour lui rappeler des événements ou des échéances à venir, ou pour 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 de commerce électronique qui souhaitent envoyer des notifications aux utilisateurs sur des offres spéciales ou des promotions.

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

Si les notifications push sont acceptées, 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.");
}

Navigateurs pris en charge

  • 42
  • 17
  • 44
  • 16

Source

Documentation complémentaire

Fait partie de la série sur les nouvelles technologies interopérables