Ionic 2 Native Push lacks Support for Actions

[jgw96]

From @naveedahmed1 on December 10, 2016 1:44

Hi,

It seems that the current version of push plugin in Ionic Native lacks the support of Actions in push notifications.

I am referring to:
https://github.com/phonegap/phonegap-plugin-push/blob/master/docs/PAYLOAD.md#action-buttons

The action buttons set from server appear perfectly with notification. But when clicked they throw error in console:

Uncaught TypeError: Cannot read property 'Reply' of undefined

(Reply is the function that I want to be called when Reply button is clicked)

The documentation of the plugin suggests that while sending push notification with action buttons we should provide the callback (like they have used in app.emailGuests in the example code).

If there is a way to handle in current version, can anyone please guide how?

If not can it be added?

Copied from original issue: ionic-team/ionic-framework#9579

[naveedahmed1]

Since phonegap/phonegap-plugin-push#1378 has been merged I think it can be done easily. Please have a look at last few comments on this discussion on Ionic forum.

https://forum.ionicframework.com/t/handling-push-notification-action-buttons-with-phonegap-plugin-push/44161/12

[ihadeed]

@naveedahmed1 not sure what is there to add. Looks like you just have to send additional data in the payload to display those action buttons.

[mebibou]

@ihadeed I think it's referring to this comment: https://github.com/driftyco/ionic-native/blob/master/src/plugins/push.ts#L47

If you use the NotificationEventAdditionalData interface as it is, there is no way to pass custom data, and in this case to pass in the actions. That's the use case we can see on the push plugin documentation https://github.com/phonegap/phonegap-plugin-push/blob/master/docs/PAYLOAD.md#in-line-replies

[naveedahmed1]

@ihadeed yes I know for actions we need to send additional data in the payload when sending notification from server, but I am referring to the click handlers for those action buttons.

[ihadeed]

Sure I can modify the interface to add the additional data. For now you can override the type by adding <any> before the variable name with the incorrect typings.

As for the callbacks, there's nothing I can do to help you here. The plugin can't access your Ionic 2 code externally. You need to port your callback function to a global variable. For example:

window['myCallback'] = () => console.log('User pressed the action button');

then you set the callback to myCallback.

[naveedahmed1]

@ihadeed can you please reopen and review it again, its seem its still not properly supported. It would be really great if we could register the callback function through push object. For example

    this.push.on('onReply', (data) => {
        this.nav.push(ReplyMessageComponent, { id: data['additionalData']['id'] });
    });

[ihadeed]

@naveedahmed1

The plugin expects something like this:

{ "icon": "snooze", "title": "SNOOZE", "callback": "app.snooze", "foreground": false}

The callback is just the name of the function and not the actual callback function. Meaning it should be something like window.app.snooze = () => console.log('snooze was clicked'). Providing the functionality you're asking for might be a little hacky and confusing for people who prefer to use the usage I mentioned in my last comment. Therefore I would rather leave it the way it is.

[naveedahmed1]

What about this:

{ "icon": "emailGuests", "title": "EMAIL GUESTS", "callback": "emailGuests", "foreground": true},

On clicking EMAIL GUEST button I want to take user to the EmailGuestPage

this.nav.push("EmailGuestPage", { id: data['additionalData']['id']});

But if I add it to the callback like this

 window.emailGuests= function (data) {
            this.nav.push("emailGuests", { id: data['additionalData']['id'] });
        };

Clicking EMAIL GUESTS button on notification throws error "Cannot read property 'push' of undefined" Probably this.nav.push is undefined.

[naveedahmed1]

Seems this was inaccessible, I added

let that=this;
And then used

 window.emailGuests= function (data) {
            that.nav.push("emailGuests", { id: data['additionalData']['id'] });
        };

And it start working

[ihadeed]

You need to use an arrow function instead of a regular function.

[naveedahmed1]

Thanks, I have updated it to:

 window.emailGuests= ((data) => {
            that.nav.push("emailGuests", { id: data['additionalData']['id'] });
        });

[sundaramoorthyjeeva]

How to do the above code by using typescript in ionic..?

[rebearteta]

@naveedahmed1 I'm trying to do exactly what you did. I followed your suggestion, using the let that=this and the arrow function as well. But I still have the error "Cannot read property push of undefined". I'm kind of new to ionic. Can you give me some help, please?

let that = this;
(<any>Window).voteUpAction = ( (data) => {
  let idea = data.additionalData.payload;
  that.nav.push(ItemDetailsPage, { item: idea });
});

[mebibou]

@rebearteta remove the that thingy, using arrow function does that when compiled to js:

(<any>Window).voteUpAction = (data) => {
  let idea = data.additionalData.payload;
  this.nav.push(ItemDetailsPage, { item: idea });
};