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}
]
}
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.
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?
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.
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);
}