Skip to content

Unable to receive fcmOptions field on default firebase handlers #6207

Closed
@guiiamorim

Description

@guiiamorim

[REQUIRED] Describe your environment

  • Operating System version: Windows 11 Pro 21H2
  • Browser version: Chrome 101.0.4951.54 and Firefox 101.0.4951.54
  • Firebase SDK version: 9.7.0
  • Firebase Product: messaging (auth, database, storage, etc)

[REQUIRED] Describe the problem

I'm using the firebase messaging to show notifications on my web app. This notifications often come with a link to a page on my app to the user to follow, but, using the onMessage and the onBackgroundMessage methods, the fcm_options doesn't show on the payload. The only way I managed to retrieve the link is by either using my own event listener to get the link, and even then, the link is not where it was supposed to be. I send the property correctly under the webpush.fcm_options.link, but on the browser it appears on notification.click_action, which I assumed was deprecated.

Steps to reproduce:

Just follow the quick guide instructions and the results will be the same

Relevant Code:

importScripts(
    'https://www.gstatic.com/firebasejs/9.7.0/firebase-app-compat.js',
    'https://www.gstatic.com/firebasejs/9.7.0/firebase-messaging-compat.js'
);

const firebaseConfig = {
    apiKey: "********",
    authDomain: "********",
    projectId: "********",
    storageBucket: "********",
    messagingSenderId: "**********",
    appId: "**********",
    measurementId: "*********"
};


firebase.initializeApp(firebaseConfig);

const messaging = firebase.messaging();

messaging.onBackgroundMessage(payload => {
    console.log(payload)
    self.registration.showNotification(payload.notification.title, payload.notification);
})

For me to get the the link on the background message, I had to make my own eventhandler on the notificationclick event

self.addEventListener('notificationclick', evt => {
    const url = evt.notification?.data?.FCM_MSG?.notification?.click_action \\ Note that the link is actualy being sent on the click_action property of the notification
    console.log(url)

    if (url)
        self.clients
            .openWindow(url)
            .then((windowClient) =>
                windowClient ? windowClient.focus() : null
            )
})

So, there is a way I can retrieve the fcm_options on the default methods? I really don't want to rewrite all the logic that this awesome library does for me out of the box.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions