13

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!

Franch
  • 621
  • 4
  • 9
  • 22
  • 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 Feb 22 '18 at 04:28
  • 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 Feb 22 '18 at 04:48
  • 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](https://stackoverflow.com/a/45310143/4625829) – AL. Feb 22 '18 at 05:47
  • 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 Mar 14 '19 at 19:51

1 Answers1

21

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.

Mertcan Mermerkaya
  • 508
  • 4
  • 9
  • Excelent worked like a charm! A quick followup question would be... what am I supposed to be sending in the headers object? – Franch Feb 22 '18 at 12:54
  • You don't need to send anything, unless you need things like [replacing messages](https://tools.ietf.org/html/rfc8030#section-5.4) or [setting an expiration date](https://tools.ietf.org/html/rfc8030#section-5.2). I'm not sure if all the headers are supported by FCM yet. – Mertcan Mermerkaya Feb 22 '18 at 14:01
  • In my case, the icon only worked when the size is less like 72px by 72px – Parth Mansata May 24 '21 at 07:35