Push notification action button callback not getting called in Ionic push

I am the beginner in ionic app development. I am exploring the ionic 2 plugin. Now I took push plugin, My app can receive the notification from FCM and I can get the data from notification. After that I added action button in push notification. I need to call a method from notification action button.

Here I placed the my push notification payload and callback name. I dont know where I have to create those callback methods.

"data": {
    	"title": "AUX Scrum",
    	"message": "Scrum: Daily touchbase @ 10am Please be on time so we can cover everything on the agenda.",
        "actions": [
    		{ "icon": "approve_icon", "title": "APPROVE", "callback": "MyApp.approve", "foreground": true},
    		{ "icon": "reject_icon", "title": "REJECT", "callback": "MyApp.reject", "foreground": true}
    	]
}
export class MyApp{
    constructor(){

    }
    approve(){
        alert('approve called');
    }
    reject(){
        alert('reject called');
    }
}

Its not getting called when I click push action button. How to resolve this or Is I followed the right way to link callbacks ? please guide me.

Where did you get that structure and code snippet from?

I seen the payload structure from here…

Then code snippet is my assumption to link the callback.

Where exactly? I cannot find approve on that page.

Are you using the push plugin directly or via Ionic Native?

On that page, they used app.emailGuest callback. I just replaced approve for my requirement. Ok now we take app.emailGuest callback. How it will be linked with our native class callback. I am using Push plugin in ionic native.

So your are successfully showing these buttons, can click them but don’t know how to handle them in your code, right?

From the docs:

However if they click on either of the action buttons the app will open (or start) and the specified JavaScript callback will be executed if there is a function defined, and if there isn’t an event will be emitted with the callback name.

So you should be able to listen for that event. Does this actually happen? Does anything happen when you tap one of these buttons?

Yes you understood exactly about my issue. But I am working with typescript. Not javascript. Here I placed the code which I tried. But its not getting called. Nothing happened.

export class MyApp{
constructor(){

}
approve(){
    alert('approve called');
}
reject(){
    alert('reject called');
}

}

I understood that.

But what happens when you hit one of these buttons? Do you get an error that some function is not defined? Does it emit and event with the callback name? Can you just listen for that event and then do whatever you want to do?

Problem is I don’t know where those functions have to live - a global namespace? You might try to put them in a <script> block in your index.html to test this (and write normal Javascript there).

For the Ionic Native plugin there is no documentation on using this I assume, right?

Yes there is no proper document. Thats why I posted here.

Ok, then please go ahead and respond to the rest I wrote please.

Ok I will try with that something which you told and let you know…

@Sujan12 I tried the way which you preferred. I placed the callback method within tag in index.html file. But the callbacks not triggered.

Can you create a new project with ionic start blank blank, include only the necessary things and put it on Github so I can maybe play around with it without investing too much time?

 var success = function(result) {
    if (result && typeof result.registrationId !== 'undefined') {
        that.emit('registration', result);
    } else if (result && result.additionalData && typeof result.additionalData.actionCallback !== 'undefined') {
        var executeFuctionOrEmitEventByName = function(callbackName, context, arg) {
          var namespaces = callbackName.split('.');
          var func = namespaces.pop();
          for (var i = 0; i < namespaces.length; i++) {
            context = context[namespaces[i]];
          }

          if (typeof context[func] === 'function') {
            context[func].call(context, arg);
          } else {
            that.emit(callbackName, arg);
          }
        };

        executeFuctionOrEmitEventByName(result.additionalData.actionCallback, window, result);
    } else if (result) {
        that.emit('notification', result);
    }
};

This code snippet will be executed when we click notification action button. Especially as of my understanding first else if block will be called for the custom callback. From this block, our callback will be triggered I think so. I got this code from push.js file within the push plugin folder. Any one of Ionic based typescript expert explain this javascript code and how I can convert it to typescript. Please help me.

@Sujan12 Can you tell me your mail id… I will share the new blank project with necessary thing for push notification.

Just upload it to Github, much easier than handle emails or anything. (If you have to, send me a PM here in the forum)

I reached the solution. Notification action button callback should be like this within your launcher class. (i.e) You have to place the callback within app.component.ts.

(<any>Window).approve = function (data: any) {
  alert('Approve called); 
};

(<any>Window).reject = function (data: any) {
  alert('Reject called);   
}
1 Like

Interesting!

You can make your code a bit prettier by using this after the imports:

declare var window: any;

Then you can just use windows.approve ....

Hi @ionicframeworks!

I declared this callback within app.component.ts but outside MyApp class

(<any>Window).voteUpAction = function (data: any) {
    alert('Vote Up called');
};

And it works perfectly! But when I wanna do something like this

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

I got the Error “Cannot read property push of undefined” :confused:

I’m kind of new to ionic. Can you give me some help, please?

1 Like

i am working with ionic1 how it done in ionic1?