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!

Answer 1

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.