Invalid JSON payload received. Unknown name click_action

Question

So I'm currently developing a PWA.

I'm working right now with Push notifications and I've already been able to recieve both background and foreground notifications with the following very simple JSON structure.

{
  "message":{
    "token":"aValidToken",
    "notification": {
      "title": "New Content!",
      "body": "A new video has been uploaded."
    }
  }
}

I've also been able to add a data member with other information in it and still get the notification without inconveniences.

Now the problem is that if I want to add another member to the JSON, like for instance click_action, I post the following:

{
  "message":{
    "token":"aValidToken",
    "notification": {
      "title": "New Content!",
      "body": "A new video has been uploaded.",
      "click_action":"https://www.google.com.ar/"
    }
  }
}

And I get the following error:

{
    "error": {
        "code": 400,
        "message": "Invalid JSON payload received. Unknown name \"click_action\" at 'message.notification': Cannot find field.",
        "status": "INVALID_ARGUMENT",
        "details": [
            {
                "@type": "type.googleapis.com/google.rpc.BadRequest",
                "fieldViolations": [
                    {
                        "field": "message.notification",
                        "description": "Invalid JSON payload received. Unknown name \"click_action\" at 'message.notification': Cannot find field."
                    }
                ]
            }
        ]
    }
}

This is happening to me with almost every other member like: priority, icon, sound, badge, etc.

Lastly, I've tried hardcoding an icon and click_action in the setBackgroundMessageHandler (which does get called) to no avail. No icon appears, nothing happens when you click the notification.

messaging.setBackgroundMessageHandler( (notif) => {

  const notificationTitle = notif.notification.title;
  const notificationOptions = {
    body : notif.notification.body,
    icon : '/assets/icon/icon72x72.png',
    click_action : 'https://www.google.com.ar/'
  };

  return self.registration.showNotification(notificationTitle, notificationOptions);
});

This is purely an Ionic PWA project, meant to run on mobile browser and Desktop. I'll appreciate every tip you could give me! Thanks!

What does the service do to the JSON string once it gets it. My guess is that it expects specific parameters and click_action isn't a valid one. — Spencer Wieczorek
From Firebase docs: > For notification messages sent from the app server, the FCM JavaScript API supports the click_action key. Typically this is set to a page in your web app, so that when a user clicks on the notification, your app is brought to the foreground. — Franch
Odd. Code and payload does look okay. Can you try test sending a message via Postman and see if it shows the same error? Here's a sample — AL.
I'm leaving that as a comment here, make sure you're not passing an object that contains other objects as data, because that will trigger that error too. You can only pass strings as values. If you want to pass complex structures, make sure you stringify them as json put them in data. — SudoPlz

Mertcan Mermerkaya Mertcan Mermerkaya · Accepted Answer · 2018-02-22T11:53:55

Looks like you're using the new API: https://firebase.google.com/docs/reference/fcm/rest/v1/projects.messages

But trying to use fields from the legacy API: https://firebase.google.com/docs/cloud-messaging/http-server-ref

You can define an icon with the API you're using, but your payload needs to be:

{
  "message": {
    "token": "aValidToken",
    "webpush": {
      "notification": {
        "title": "New Content!",
        "body": "A new video has been uploaded.",
        "icon": "your_icon"
      }
    }
  }
}

You can find more information about webpush notification fields here.

~~FYI, most of the other fields you mentioned (priority, sound, badge) are not yet supported on web with either API.~~

Edit (10th May 2018): All notification properties (priority, icon, sound, badge, etc.) are now supported with the new API. See this guide for details.

Invalid JSON payload received. Unknown name click_action

1 Answers