HTTP.post to FCM Server not working

Question

I am using Ionic 2 with HTTP native module to make a post request to FCM server for push notifications. The code I am using is:

        HTTP.post(
          "https://fcm.googleapis.com/fcm/send",
          {
            "notification": {
              "title": "Notification title",
              "body": "Notification body",
              "sound": "default",
              "click_action": "FCM_PLUGIN_ACTIVITY",
              "icon": "fcm_push_icon"
            },
            "data": {
              "hello": "This is a Firebase Cloud Messagin  hbhj g Device Gr new v Message!",
            },
            "to": "device token",
          },
          {
            Authorization: {
              key: "AUTHORIZATION KEY HERE"
           }
          })

Its giving me an error:

Unimplemented console API: Unhandled Promise rejection:
Unimplemented console API: Error: Uncaught (in promise): [object Object]

I tried the post request with Postman, it works perfectly fine delivering push notifications.

The code with Postman is:

POST /fcm/send HTTP/1.1
Host: fcm.googleapis.com
Content-Type: application/json
Authorization: key=Authorisation Key
Cache-Control: no-cache
Postman-Token: 446e253b-179a-d19b-21ea-82d9bb5d4e1c

{
  "to": "Device Token",
  "data": {
    "hello": "This is a Firebase Cloud Messagin  hbhj g Device Gr new v Message!",
   }
     "notification":{
    "title":"Notification title",
    "body":"Notification body",
    "sound":"default",
    "click_action":"FCM_PLUGIN_ACTIVITY",
    "icon":"fcm_push_icon"
  },
}

Questions:

1. I am unable to add content-type to the header in the HTTP post request, but it works with postman.

2. If I try to add a function(response) { to get the response from the server, it gives me an error. The documentation for the same is at https://github.com/wymsee/cordova-HTTP

Answer 1

why are you using HTTP native module? Angular has a built in Http.

Using this one (importing HttpModule from @angular/http in your NgModule) you can just call

import { Http, Headers } from '@angular/http';

......

constructor(public http: Http) { }

sendPushNotification(deviceId: string) {
  let url = 'https://fcm.googleapis.com/fcm/send';
  let body = 
   {
     "notification": {
         "title": "Notification title",
         "body": "Notification body",
         "sound": "default",
         "click_action": "FCM_PLUGIN_ACTIVITY",
         "icon": "fcm_push_icon"
     },
     "data": {
         "hello": "This is a Firebase Cloud Messagin  hbhj g Device Gr new v Message!",
     },
     "to": "device token"
   };
let headers: Headers = new Headers({
  'Content-Type': 'application/json',
  'Authorization': 'key='+this.someKey
});
let options = new RequestOptions({ headers: headers });

console.log(JSON.stringify(headers));

  this.http.post(url, body, headers).map(response => {
    return response;
  }).subscribe(data => {
     //post doesn't fire if it doesn't get subscribed to
     console.log(data);
  });
}

---

push.on('notification', (data) => {
 if (data.additionalData.foreground) {
          // if application open, show popup
          let confirmAlert = this.alertCtrl.create({
            title: data.title,
            message: data.message,
            buttons: [{
              text: 'Ignore',
              role: 'cancel'
            }, {
              text: 'Go to',
              handler: () => {
                //TODO: Your logic here
                this.navCtrl.setRoot(EventsPage, {message: data.message});
              }
            }]
          });
          confirmAlert.present();
        } else {
          //if user NOT using app and push notification comes
          //TODO: Your logic on click of push notification directly
          this.navCtrl.setRoot(EventsPage, {message: data.message});
        }
      });
      push.on('error', (e) => {
        alert(e);
      });

    });