How to receive additional data for Push notification in ionic2


#1

I have below payload which i am sending as push notification where ClientID is additional data:

$msg = array
(
‘message’ => ‘here is a message. message’,
‘title’ => ‘This is a title. title’,
‘subtitle’ => ‘This is a subtitle. subtitle’,
‘tickerText’ => ‘Ticker text here…Ticker text here…Ticker text here’,
‘vibrate’ => 1,
‘sound’ => 1,
‘largeIcon’ => ‘large_icon’,
‘smallIcon’ => ‘small_icon’,
‘ClientID’ => ‘CT 123456’
);

So in ionic2, while receiving in the app.ts file in function

push.on(‘notification’, (data) => { };

how to receive this additional ClientID passed from the server in ionic2 typescript?

I gone through the below reference but not helpful.

It’s giving module error.

Thanks


#2

#3

Thanks,

That explains how to send the data, but my question is how to receive data in app.ts?


#4

As show in the tutorial you posted:

let push = PushNotification.init({
    android: {
        senderID: "12345679"
    },
    ios: {
        alert: "true",
        badge: true,
        sound: 'false'
    },
    windows: {}
});

push.on('registration', (data) => {
    console.log(data.registrationId);
});

push.on('notification', (data) => {
    console.log(data.message);
    console.log(data.title);
    console.log(data.count);
    console.log(data.sound);
    console.log(data.image);
    console.log(data.additionalData);
});

push.on('error', (e) => {
    console.log(e.message);
});

That’s enough. Just take care of change senderID to your notification provider code, GCM or APNS.

And if you want to receive background notifications you must to install and setup background mode plugin.

If it’s not receiving it must be a problem in payload or device. Note that GCM is not 100% reliable.


#5

Thanks,

I referred this and used but its not working for me. Let’s suppose i am sending “clientid” field along with other title and message etc.

$msg = array
(
‘message’ => ‘here is a message. message’,
‘title’ => ‘This is a title. title’,
‘subtitle’ => ‘This is a subtitle. subtitle’,
‘tickerText’ => ‘Ticker text here…Ticker text here…Ticker text here’,
‘vibrate’ => 1,
‘sound’ => 1,
‘largeIcon’ => ‘large_icon’,
‘smallIcon’ => ‘small_icon’,
‘ClientID’ => ‘CT 123456’
);

If i try to receive it as “this.additionalData.ClientID”, its not working. Its showing error in Typesctipt project and e en i build and run, the value is undefined.

Thanks,


#6

If I understand correctly its the payload sent via push service to the device:

$msg = array
(
'message' => 'here is a message. message',
'title'	=> 'This is a title. title',
'subtitle'	=> 'This is a subtitle. subtitle',
'tickerText'	=> 'Ticker text here...Ticker text here...Ticker text here',
'vibrate'	=> 1,
'sound'	=> 1,
'largeIcon'	=> 'large_icon',
'smallIcon'	=> 'small_icon',	
'ClientID' => 'CT 123456'
);

What push service are you using? Its GCM or APNS?

Is this language PHP? I’ve just sent push messages using javascript.

This is an example of push message with Javascript:

let notification = {
    "registration_ids": ["my device id"],
    "data": {
        "title": "Large Icon",
        "message": "Loaded from URL",
        "image": "https://dl.dropboxusercontent.com/u/887989/antshot.png"
    }
}

The structure looks different from your message.


#7

Yes, you understood correctly.

I am sending push notifications with php, currently using GCM but will use APN as well in future.

But my question still there, how to receive ClientID in ionic2?


#8
  push.on('registration', (data) => {
  //          handle data.registrationId
  }); //should work...

I wonder how I could process the notification if it isn’t tapped… I want to use localStorage as a database only, and remove messages from my server when they are sent, but it isn’t possible; the app doesn’t do anything while in background!


#9

Ok, i think it’s not quite clear. Let me give you the scenario.

If somenproduct is updated and i want to send the notification that this product is updated. Now from server i am sending the productID and once notification arrives and tapped by the user want to redirect him to the specific product , for that i want to recivw productID sent from the server and call the ionic2 component passing specific productID.

I hope it clears my requirement.

Thanks


#10

I understand man. I do it like this: (actions is just an array of actions in my case, but you can of course just pass the page name, or even just the data if it’s always the same page)

You can just add whatever parameters you like to the data you send to APNS or GCM with your server…
It will go to the ‘additionalData’ node on the received data on(‘notification’)

//Register it

            push.on('notification', (data: any) => {
                var additionalData = data.additionalData; //Ahhh... there's my vars I sent to APNS/GCM!
                if (additionalData.actions) {
                    for (var action in additionalData.actions) {
                        var action_data = additionalData.actions[action];
                        if(action === 'openPage') {
                            this.openPage(data, action_data); //open it now
                        }
                    }
                }

}

openPage(page: PageObj, navParams: any = null) {
    if (false) { /// detect if a page should be 'rooted' instead of pushed to the stack... (disabled it here in this example)
        this.nav.setRoot(page.component, navParams);
        this.menu.close();
    }
    else if (!this.nav.getActive() || !(this.nav.getActive().instance instanceof page.component)) { // navigate to the new page if it is not the current page
       this.nav.push(page.component, navParams);
       this.menu.close();
    }
    else { 
        console.log('Not opening page; should already be the current page: ' + page.component_);
    }
}

And then, finally in your PageObject:

constructor(private navParams: NavParams) {
    this.something = this.navParams.get('some_parameter_which_contains_cool_stuff');
}

#11

push.on(‘notification’, (data: any) => {
var additionalData = data.additionalData; //Ahhh… there’s my vars I sent to APNS/GCM!
if (additionalData.actions) {
for (var action in additionalData.actions) {
var action_data = additionalData.actions[action];
if(action === ‘openPage’) {
this.openPage(data, action_data); //open it now
}
}
}

if (additionalData.actions) , this statement giving error in typescript saying “Propery ‘actions’ does not exist on type ‘NotificationEventAdditionalData’”


#12

I have the same problem!!!


#13

From the ObjC source it seems like NotificationEventAdditionalData is just a string. I think you’ll have to parse the string yourself (eg. JSON.stringify on the sending side, JSON.parse on the receiving side).


#14

I found the solution:

let json = JSON.parse(JSON.stringify(data.additionalData));


#15

Lifesaver, thank you. Only spent 3 hours trying to figure that out…

Why can’t they just mention that in the docs :rage: