EventListener 'push' notification not working in PWA reactjs

Viewed 370

I try to follow this tutorial (https://codelabs.developers.google.com/codelabs/push-notifications/#2) to implements notifications in my PWA coded in reactjs.

In step 7 we can test our notifications by clicking the 'send test push' button from chrome devtools. But nothing happens.

I have that part for the eventlistener :

/* eslint-disable no-restricted-globals */
self.addEventListener('push', function(event) {
    console.log('[Service Worker] Push Received.');
    console.log(`[Service Worker] Push had this data: "${event.data.text()}"`);

    const title = 'Push Codelab';
    const options = {
        body: 'Yay it works.'
    };
    event.waitUntil(self.registration.showNotification(title, options));
});

and when I click on the test button, nothing is logged.

To ensure the user is well registered :

function subscribeUser() {
  const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey);
  swRegistration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: applicationServerKey
  })
      .then(function(subscription) {
          updateSubscriptionOnServer(subscription);
          console.log(JSON.stringify(subscription));

        isSubscribed = true;

      })
      .catch(function(error) {
        console.error('Failed to subscribe the user: ', error);
      });
}

and the subscription is well logged.

It looks like that :

{"endpoint":"https://fcm.googleapis.com/fcm/send/fssJxc6xoFY:APA91bE-3ekrsC3YhKqff6D0Ahy2CEjcZsZMs4MXKx6sBI_BrKqDz5Y5VlWQWSIyOKjWanEu5qvjCKPmxUnDHn5KXnUuMnOu9r04GXbEgRSvdAwHRkJvQpB1TmRvHC6Vdso0zTV30IOu","expirationTime":null,"keys":{"p256dh":"BJpmEsvpcrUmC2TCbzwBKZ-g3OKupg_zGiH6UbI_XaDWS6Szu2g_uiwDzuDw5j0YiQ-Ku71KSMPL6R65xfyScwI","auth":"FvETyIJg0tKD49DPkizalQ"}}

If you have any idea about why this is not working, and what part of my code is wrong..

Thank you a lot

0 Answers
Related