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