La notification push Web ne s'affiche pas

Question

J'ai enregistré un technicien de service et j'essaie de tester une notification Web dans le navigateur. Chrome (et Firefox) affirment que le technicien de service est enregistré avec succès.

Au chargement de l'application React, j'ai accordé l'autorisation de recevoir des notifications.

Dans mon sw.js, j'écoute un pushévénement et j'essaie d'envoyer un exemple de message push à partir de l'onglet Application Chrome, comme indiqué dans la capture d'écran ci-dessus.

self.addEventListener("push", receivePushNotification);

Lorsque vous cliquez Pushdans l'onglet Application Chrome, l' pushévénement se déclenche, appelant receivePushNotification. Cependant, lorsque j'essaie d'afficher une notification dans le navigateur, rien ne se passe et aucune erreur n'est signalée.

function receivePushNotification(event) {
  // This prints "Test push message from DevTools."
  console.log("[Service Worker] Push Received.", event.data.text());

  var options = {
    body: "This notification was generated from a push!"
  };

/*****
  I would expect the following line to display a notification, since I've already 
  granted permission to allow for notifications. Yet, nothing happens and there is 
  no error in the console.
*****/

  event.waitUntil(self.registration.showNotification("Hello world!", options));
}

Answer 1

Vous semblez être allé trop loin en définissant votre fonction séparément / en ne la définissant pas comme une fonction asynchrone. Vous ne transmettez pas non plus l'événement à l'appel de fonction.

Que se passe-t-il si vous le réécrivez comme ça?

self.addEventListener("push", function(event) {
  console.log("[Service Worker] Push Received.", event.data.text());
  var options = {
    body: "This notification was generated from a push!"
  };
  event.waitUntil(self.registration.showNotification("Hello world!", options));
});