"Actionable" Notification Buttons

[jterps08]

Greetings - Thank you @macdonst for all of your work with PhoneGap. We currently use your videoplayer plugin for Powerline. Good stuff!

Anyway, we are looking for the ability to add buttons to a notification similar to how GMail allows you to View or Reply to an e-mail when you're looking at the preview in the OS notification drawer (see image below). Your Push plugin has all the other features we're looking for (remote loaded large icon, small icon overlay, title, message, sound, badge, etc.), but it doesn't have multi-line text support (again, think previewing a gmail message) or this button concept.

Is that on your roadmap at all? Do you know if anyone is currently working on that? Hope this is the right place for this question!

Thanks,
Jesse

[macdonst]

@jterps08 Yes, the action buttons are on the roadmap. I was just talking with someone last night about this. If possibly I'll get it into the 1.2 release.

Please raise a separate issue for multi line notifications as well.

+1 this folks if you want it.

[austinpapp]

👍

scheduled 1.2 release date?

[jterps08]

Sweet thanks!

[macdonst]

@austinpapp When something is ready it goes right into master but I try to maintain official releases at the end of each month where I will tag and submit to npm.

[austinpapp]

@macdonst sounds good. was just curious as this helps me with my personal roadmap. thanks for the hard work.

[macdonst]

So how do you folks expect this to work, when you click on an action button will it fire off a native Android intent or will it call a JS function in the app?

Possibly looking at something like this:

{
  actions: [ 
    { icon: "archive", title: "Archive", action: "com.myapp.ARCHIVE" },
    { icon: "reply", title: "Reply", callback: "myapp.reply" }
  ]
}

If each action will need to have either an "action" which will call an Android intent or a "callback" which is some JS that can get executed.

Just thinking out loud but what does everyone think?

[jterps08]

From our end, I think having the buttons be able to call JS functions within the phonegap app would be most useful. I think LinkedIn does this with their app nicely where you can accept a connection request or view profile directly from the notification drawer... Curious what @austinpapp thinks...

[austinpapp]

having that key action or callback handle different functionality makes sense to me. this could potentially open up further use cases outside of our needs.

for my purposes, a callback is our use case. ultimately we would call the cbFun() to handle some logic that calls our API to say "acknowledge a follow request".

[macdonst]

@jterps08 & @austinpapp okay, thanks for the feedback, I will make the JS callback route the first priority.

[austinpapp]

@macdonst thanks . 👊

[macdonst]

@jterps08 & @austinpapp alright, I was noodling around with some code this afternoon and if you get a chance please try out the issue62 branch of the plugin.

Try sending the push in the following format:

{title: "My Title", message: "My Message", 
actions: [{icon: "icon", title: "Archive", callback: "app.archive"}, {icon: "icon", title: "Reply", callback: "app.reply"}]}

It should create two buttons in the notification and when you click on it the corresponding callback will be invoked with the notification data as the parameter being passing into the method.

[macdonst]

[macdonst]

@jterps08 & @austinpapp I merged it into master. Please give me some feedback when you get a chance. I'm targeting the 1.2 release for Wednesday the 26th.

[austinpapp]

@macdonst hey thanks for the quick turnaround on this. let me get through a few things this week and try and get back to you asap on some feedback.

[mrAddy]

This is great, what fantastic work you guys have done. Really excited about this new update 👍

[mrAddy]

@macdonst I wanted to know if this was ready to receive push notifications, and add the buttons for Android and iOS. I looked at the documentation but saw no examples of how to use it, am i looking in the wrong place ? Thanks Addy

[chaffeqa]

👍

[macdonst]

@mrAddy If you look at the README under Android Behaviour/Action Buttons you will see how to send a push with buttons and how to act on their tap. This is in master right now and will be part of this weeks 1.2.0 release.

Support for buttons on iOS will come along with the iOS9 update that I'm going to be working on for September.

[mrAddy]

@macdonst Thank you for getting back, I have looked at it, but I am using Appery.io, and trying to use this Push plugin, but i do not understand what i am doing if i am honest. I need buttons on push notification, and Appery are not looking to implement this. When i included the Push.js i had errors regarding the var cordova on line 7. I am guessing having two Push solutions in the same app will not be compatible?

[macdonst]

@mrAddy Is Appery.io a Cordova/PhoneGap based solution? Because if their service doesn't include cordova.js then you will not be able to use this plugin.

[mrAddy]

Hi @macdonst yeah it is, it is a little complex because of how they work there file system, but i am now trying to install your plugin, based on their own documentation on adding 3rd party plugins. So i should know in about 20 mins if it works :) But I do understand a lot more than I did an hour ago :)

[mrAddy]

I am getting a build error :

src/com/adobe/phonegap/push/GCMIntentService.java:[28,29] error: package android.support.v4.app does not exist

/src/com/adobe/phonegap/push/GCMIntentService.java:[201,64] error: package NotificationCompat does not exist

I cannot see a sport.v4 file, but i do have a v.13 in my libs, or is that something else ?

[macdonst]

@mrAddy make sure that the most up to date android-support-v13.jar file is in your libs folder and picked up by the build.

[alexislg2]

Would be nice to also add some field to the additionalData object when the user clicked on one of the buttons? I mean then I could have only one method to process notification when they arrive. + I don't like to have global functions, especially since I'm using angular.js

[jterps08]

@macdonst Just wanted to follow up on this. Due to some issues on our end, we weren't able to test the new plugin until now. We have transitioned from our old plugin to this one and we're now in process of adding buttons. WIll update soon, but didn't want you to think we forgot about this and your quick action on it! Thanks again - J

[mgbako]

Please how can i implement actionable to this code:

// API access key from Google API's Console
define( 'API_ACCESS_KEY', 'GOOGLE_API_ACCESS_KEY' );

// prep the bundle
$state = ['$state'=>'app.who'];
$actions = [
[ "icon"=> "drawable-hdpi-icon", "title"=> "Divine Mercy", "callback"=> "app.blog"]
];

$msg = array
(
'message'=> 'The Chaplet of Mercy is recited using ordinary rosary beads of five decades. The Chaplet is preceded by two opening prayers from the Diary of Saint Faustina and followed by a closing prayer.',
'title' => 'The Chaplet of The Divine Mercy',
'largeIcon' => 'https://i.ytimg.com/vi/sp_GcdBFbyg/default.jpg',
'image' => 'https://i.ytimg.com/vi/sp_GcdBFbyg/default.jpg',
'actions'=> $actions

);

$alert = $msg;
$fields = array
(
'registration_ids' => $devices,
'data' => $msg
);

$headers = array
(
'Authorization: Key=' . API_ACCESS_KEY,
'Content-Type: application/json'
);

$ch = curl_init();
curl_setopt( $ch,CURLOPT_URL, 'https://android.googleapis.com/gcm/send');
curl_setopt( $ch,CURLOPT_POST, true );
curl_setopt( $ch,CURLOPT_HTTPHEADER, $headers );
curl_setopt( $ch,CURLOPT_RETURNTRANSFER, true );
curl_setopt( $ch,CURLOPT_SSL_VERIFYPEER, false );
curl_setopt( $ch,CURLOPT_POSTFIELDS, json_encode( $fields ) );
$result = curl_exec($ch );

[GaneshSawant]

Hello @macdonst ,

I am new to Mobile development.
We are currently building hybrid remote app(Android based - Cordova/forcedroid) for our Salesforce community Portal.
I am trying to utilize the action button feature on the Push notifications.

May I know where exactly I need to place my callback function ?
In this example
{
actions: [
{ icon: "archive", title: "Archive", action: "com.myapp.ARCHIVE" },
{ icon: "reply", title: "Reply", callback: "myapp.reply" }
]
}

here, where exactly I can place the Archive and reply javascript function,

basically my requirement is to open a sepcific page on push notification click instead of opening an app with default landing page.

Appreciate your response on this.

Thank you :)

[macdonst]

@GaneshSawant your callback function must be addressable from window. So if the function is reply you should be able to access it at window.reply. If the function is reply but inside and object referred to by myapp then you should be able to access it at window.myapp.reply.

[lock]

This thread has been automatically locked.