skip to Main Content

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


  1. Chosen as BEST ANSWER

    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


  2. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search