javascriptfirebasefirebase-cloud-messaging

Firebase Cloud Messaging Web Service Worker not handling click events on Notifications


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.


Solution

  • 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