I can't set click_action and icon using notification message (Notification Composer)[GUI]

[Mateostin]

Operating System

Ubuntu 24.04

Environment (if applicable)

Chrome 129.0.6668.58

Firebase SDK Version

10.14.1

Firebase SDK Product(s)

Messaging

Project Tooling

im using JavaScript SDK libraries from the CDN

Detailed Problem Description

The FCM Console Notification Composer (Notification message) allows the addition of extra parameters using the "Custom data" function. I wanted to try adding click_action, body, icon, etc. However, I checked payload and i noticed that these parameters are located in "data"

{
   "from":"xxx",
   "collapseKey":"xxx",
   "messageId":"xxx",
   "notification":{
      "title":"Test title",
      "body":"Test body",
      "image":"path-to-img"
   },
   "data":{
      "click_action":"my-custom-url",
      "icon":"path-to-icon",
      "badge":"path-to-badge",
   }

Meanwhile, the service worker handles parameters such as click_action, body, and icon only when they are added to "notification". So, what’s the easiest way to define click_action with a link that should open when the notification is clicked? And how can I set the icon parameter directly from the Notification Composer (GUI) – is that even possible?

I should add that when I define a push notification (data message) manually, set the parameters correctly, and then receive the message in onBackgroundMessage, everything works as expected.

Steps and code to reproduce issue

Just try send Push notification from firebase GUI (Notification Composer) and check payload

[google-oss-bot]

I couldn't figure out how to label this issue, so I've labeled it for a human to triage. Hang tight.

[looptheloop88]

Hi @Mateostin, the click_action is not supported using Notifications composer in the Firebase console. The key/value pairs entered in the Custom data field are handled as a data payload. You can only customize the notification payload if you're using the FCM HTTP API to send messages.

If you use the Notifications composer console, your app will always receive message with notification payload or notification + data payload. It is not possible to send a message with data payload only using the Notifications composer console.

The behavior of messages differ depending on whether the page is in the foreground (has focus), or in the background, hidden behind other tabs, or completely closed.

• If the page is in the foreground, the message is received on onMessage() callback
• if the page is in the background, the message is received on onBackgroundMessage() callback

If the message is received on onMessage() callback, you can create your own notification and define the click action:

onMessage(messaging, (payload) => {
   console.log('Message received. ', payload);

   const notificationTitle = payload.message.notification.title;
   const notificationOptions = {
      body: payload.message.notification.body
   };

   const notification = new Notification(notificationTitle,notificationOptions);
      notification.onclick = function(event) {
         event.preventDefault();
         window.open(payload.message.data.click_action , '_blank');
         notification.close();
    };
});

If the message is received on onBackgroundMessage() callback, you can customize behavior in the service worker when the notification is clicked, see this documentation for more information.

I also suggest you check this Firebase documentation to get more information on receiving messages in a JavaScript client.