I have implemented the web push notifications using the FCM, the thing is I am getting the notifications on safari(but count is only 3 and it varies some time to 4-6).
I know that safari will revoke the notification permission, if we do not send the notification to notification center.
But in my case I am already sending the notification to notification center, and and it displays the notification on screen(up right corner), after that also it revokes the permission.
Is their specific we need to handle in case of service worker ? that user have to mandatory open the notifications upon receiving otherwise it will revoke the permission.
Do we have any sample code specific for web push notifications (not local notifications), on how to handle the background messages(through service workers), and the foreground messages(when tab is active).
In case of tab active(generally onMessage), I am showing the notification using the following code :
let notification = new Notification('title', {
'body': 'some test body'
});
And in case of background message(service worker is handling it, specifically I am not doing any thing to show the notification).
My service worker code :
importScripts("https://www.gstatic.com/firebasejs/9.20.0/firebase-app-compat.js");
importScripts("https://www.gstatic.com/firebasejs/9.20.0/firebase-messaging-compat.js");
self.addEventListener('notificationclick', (event) => {
console.log("background worker trigger");
event.notification.close()
const pathname = event.notification?.data?.FCM_MSG?.data?.link
if (!pathname) return
const url = new URL(pathname, self.location.origin).href
event.waitUntil(
self.clients
.matchAll({ type: 'window', includeUncontrolled: true })
.then((clientsArr) => {
const hadWindowToFocus = clientsArr.some((windowClient) =>
windowClient.url === url ? (windowClient.focus(), true) : false
)
if (!hadWindowToFocus)
self.clients
.openWindow(url)
.then((windowClient) =>
//windowClient ? windowClient.focus() : null
console.log("opened window")
)
})
)
})
if (!firebase.apps.length) {
firebase.initializeApp({
apiKey: "somekey",
authDomain: "somekey",
projectId: "somekey",
storageBucket: "somekey",
messagingSenderId: "somekey",
appId: "somekey",
vapidKey:
'somekey'
});
}
else {
firebase.app(); // if already initialized, use that one
}
const messaging = firebase.messaging();
messaging.onBackgroundMessage(function(payload) {
console.log('[firebase-messaging-sw.js] Received background message ', payload);
})