Problem with duplicated FCM push notifications and action_link
I am sending push notifications to Android devices with FCM. I am using API request to send the notification. This is my payload to
events.trigger endpoint
{
"name": "push-notification",
"to": {
"subscriberId": "119"
},
"payload": {
"notification": {
"title": "Test Notification",
"body": "Click to open the app!",
"data": {
"click_action": "/login.php"
}
}
}
}2 Replies
This is my firebase-messaging-sw.js file
const messaging = firebase.messaging();
messaging.onBackgroundMessage((payload) => {
const notificationTitle = payload.notification.title || 'Default Title';
const notificationOptions = {
body: payload.notification.body || 'Default Body',
icon: "/public/images/logos/logo.png",
// Optionally, pass a target URL if you want to navigate to a specific route.
// If omitted, you can simply open your app's homepage.
data: {
click_action: payload.notification.data.click_action || 'https://www.ferienhausmiete.de/ferienwohnung-ferienhaus-urlaub/deutschland/r11',
}
};
self.registration.showNotification(notificationTitle, notificationOptions);
});
// Listen for notification click events.
self.addEventListener('notificationclick', function(event) {
event.notification.close(); // Close the notification.
// Use the click_action from the notification data, or default to your app's homepage.
const urlToOpen = event.notification.data.click_action || 'https://www.ferienhausmiete.de/ferienwohnung-ferienhaus-urlaub/europa/r1';
event.waitUntil(
// Get all the Window clients (open tabs) for this service worker.
clients.matchAll({ type: 'window', includeUncontrolled: true }).then(function(clientList) {
// Check if any client is already open that matches the URL.
for (const client of clientList) {
// If a client is already open, focus it.
// You might adjust the condition if you have multiple routes.
if (client.url.indexOf(urlToOpen) !== -1 && 'focus' in client) {
return client.focus();
}
}
// If no client matches, open a new window/tab to your application.
if (clients.openWindow) {
return clients.openWindow(urlToOpen);
}
})
);
});
In result I am getting 2 push notifications to my Android phone. One of them with "Default Title" title and "Default Body" and when I am clicking on this notification the application opens on a page "https://www.ferienhausmiete.de/ferienwohnung-ferienhaus-urlaub/deutschland/r11" and this is not what I've sent in payload. This is what is happening because of my
messaging.onBackgroundMessage method, but the problem is that the body and title of the inicial request are not avaiable here, that's why the notification has "Default Title" and "Default Body" texts. The second notification has the correct texts (like in push-notification workflow), but here the problem is the redirect on click. Nothing is happening when I am clicking on the notification.
My desired result is to get one push notification with correct texts and working redirect on click. Please help me to achieve this simple functionality.
Here are several transaction IDs of such requests
eb890741-5835-4c6e-b9cd-458b675f7482
c719edfc-af1f-4b71-86c5-8f3323378418
5cbfbebc-db4a-464c-ac85-a2f44562f48a@Narek
Can you add a log to check if payload is empty before this line in service worker
const notificationTitle = payload.notification.title || 'Default Title';