I am using the following service worker:
//firebase-messaging-sw.js
importScripts("https://www.gstatic.com/firebasejs/9.19.1/firebase-app-compat.js")
importScripts("https://www.gstatic.com/firebasejs/9.19.1/firebase-messaging-compat.js")
const firebaseConfig = {
//REDACTED
};
// Initialize Firebase
const app =firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging(app);
// DEBUG ONLY: Explore the notification payload
messaging.onBackgroundMessage(function(payload) {
console.log('[firebase-messaging-sw.js] Received background message ', payload);
});
Background Notifications work well, however, according to the documentation populating the "fcm_options.link" parameter should open the link in a browser on Notification click. This is not working.
I can confirm that the service worker is receiving all the data in the Notification Payload:
//Notification Payload
{
"from": "294754226734",
"messageId": "539b6fe5-6b0c-47dc-baca-1ce243a20e4f",
"notification": {
"title": "Bridge Notification",
"body": "Closure from 3:15 PM to 4:15 PM today (03/26/2023)",
"icon": "https://app.com/white_sm.png"
},
"fcmOptions": {
"link": "https://app.com"
}
}
Oddly enough, creating my own listener in the service worker works in creating the Notification onclick functionality:
//firebase-messaging-sw.js
self.addEventListener('notificationclick', (event) => {
event.notification.close();
console.log('[firebase-messaging-sw.js] notification Event Listener Triggered ', event);
const pathname = event.notification?.data?.FCM_MSG?.notification?.click_action
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
)
})
)
})
importScripts("https://www.gstatic.com/firebasejs/9.19.1/firebase-app-compat.js")
importScripts("https://www.gstatic.com/firebasejs/9.19.1/firebase-messaging-compat.js")
const firebaseConfig = {
//REDACTED
};
// Initialize Firebase
const app =firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging(app);
// DEBUG ONLY: Explore the notification payload
messaging.onBackgroundMessage(function(payload) {
console.log('[firebase-messaging-sw.js] Received background message ', payload);
});
Wondering if anyone has any idea of what I am doing wrong or is this a bug.
2
Answers
Figured it out by looking at the service worker SDK source code. The 'fcmOptions.link' MUST have the same host as the service worker registration host.
Example:
Service Worker host: https://www.app.com/
fcmOptions.link that will work: https://www.app.com/pageOne
fcmOptions.link that will NOT work: https://www.google.com
According to documentation cloud-messaging the ‘click_action’ field should be set to the URL that should be opened when the notification is clicked. You have used ‘link’ instead of ‘click_action’ try to change it.