Can't get notification payload from firebase-sw on Ionic PWA - angularjs

Question

I've searched a lot for this problem that I'm stuck on for a week.
I have an Ionic PWA project that receive some notifications from firebase, I can receive the notifications with no problem and can get the payload on foreground (app is open), but I cant get the payload when the app is closed and I don't figure out what is goning on, so I came here to ask the masters to help me.
messaging.setBackgroundMessageHandler(function(payload) {
var notificationTitle = 'Teste';
var notificationOptions = {
body: 'Background Message body.',
tag: 'campanhas',
data: payload.data,
icon: 'https://firebasestorage.googleapis.com/v0/b/hemotomobile-edeb9.appspot.com/o/logo.png?alt=media&token=4a9fc487-b8cf-4d3c-875c-774454ff6f50'
};
return self.registration.showNotification(notificationTitle,
notificationOptions);
});
self.addEventListener('notificationclick', function(event) {
event.notification.close();
event.waitUntil(clients.matchAll({
type: "window"
}).then(function(clientList) {
for (var i = 0; i < clientList.length; i++) {
var client = clientList[i];
if (client.url == '/' && 'focus' in client)
return client.focus();
}
if (clients.openWindow)
return clients.openWindow('/');
}));
});
and on my provider for the notifications, I use this code:
public receiveMessage() {
console.log('notification')
this.messaging.onMessage((payload) => {
console.log('payload',payload)
});
}
I call this provider on my tabs-page:
ionViewDidLoad(){
this.notification.receiveMessage()
}
So, can anyone help me to get the payload when the PWA is closed?

Answer 1

have you tried by initializing firebase in the service worker and using it ,
self.addEventListener("notificationclick", (event) => {
//your code
});
importScripts("https://www.gstatic.com/firebasejs/4.7.0/firebase.js")
importScripts("https://www.gstatic.com/firebasejs/4.7.0/firebase-messaging.js")
// Initialize Firebase
firebase.initializeApp({
'messagingSenderId': 'your sender id'
});
const messaging = firebase.messaging();
messaging.setBackgroundMessageHandler(function(payload) {
//your code
});
this.messaging.onMessage((payload) => {
//your code
});
self.addEventListener('notificationclose', function (event) {
self.registration.getNotifications().then(function (notifications) {
notifications.forEach(function (notification) {
notification.close()
})
});
})
I have tried by using above code in the service worker and it is showing notification when the application is closed , if you want to show the notification when the browser is closed make sure you have enabled the Continue running background apps when Google Chrome is closed option in chrome settings.