Firebase FCM notifications add action button

Question

How to add action button to push notification like this: I tried this and its not working:

=> https://firebase.googleblog.com/2018/05/web-notifications-api-support-now.html

here's my notification payload:

array
(
    "title" =>  "FCM Message",
    "body" => "This is an FCM Message",
    "click_action" => "http://example.com/",
    "icon" => "/logo.jpg",
    "actions" => array(
        0 => array(
            'title' => 'Like',
            'click_action' => 'http://example.com/?aaa=1',
            'icon' => 'icons/heart.png',
        ),
        1 => array(
            'title' => 'Unsubscribe',
            'click_action' => 'http://example.com/?aaa=2',
            'icon' => 'icons/cross.png',
        ),
    ),
);

I tried with message payload also doesnt work:

$msg = array
(
    "webpush" =>  array
    (
        "notification" =>  array
        (
            "title" =>  "Fish Photos ",
            "body" =>  "Thanks for signing up for Fish Photos! You now will receive fun daily photos of fish!",
            "icon" =>  "firebase-logo.png",
            "image" =>  "guppies.jpg",
            "data" =>  array
            (
                "notificationType" =>  "fishPhoto",
                "photoId" =>  "123456",
            ),
            "click_action" =>  "https://example.com/fish_photos",
            "actions" =>  array(
                0 => array(
                    'title' => 'Like',
                    'action' => 'like',
                    'icon' => 'icons/heart.png',
                ),
                1 => array(
                    'title' => 'Unsubscribe',
                    'action' => 'unsubscribe',
                    'icon' => 'icons/cross.png',
                ),
            ),
        ),

    ),
);

Answer 1

On Android, you'll have to use RemoteInput and 'apply' action to the notification. Below is the summary and here are the details.

public static final String NOTIFICATION_REPLY = "NotificationReply";

RemoveInput removeInput = new RemoteInput.Builder((Notification_REPLY))
    .setLabel("Approve Comments")
    .build();

Then create a PendingIntent for the reply action as below :

PendingIntent acceptPendingIntent = PendingIntent.getBroadcast(
    context:this,
    REQUEST_CODE_APPROVE,
    new Intent(packageContext:this,NotificationReciver.class)
        .putExtra(KEY_INTENT_APPROVE,REQUEST_CODE_APPROVE),
    PendingIntent.FLAG_UPDATE_CURRENT
);

Then attach the RemoteInput object to an action using addRemoteInput()

NotificationCompat.Action action =
    new NotificationCompat.Action.Builder(ic_delete,
        title:"Approve", acceptPendingIntent)
        .addRemoteInput(remoteInput)
        .build();

Lastly, you'll have to apply the action to notification and display.

NotificationCompat.builder = notificaitonBuilder = new NotificationCompat.Builder(context:this,channelId:"channel_id")
    .addAction(action)
    // set rest of notification attributes e.g. title, auto cancel, icon etc.

You can pass the required information from the 'data' attribute of Firebase notification. You'll have to use onReceive() even to attach reply/buttons at the bottom of the message.

This is another helpful link.

Answer 2

Action buttons works with data payload while website is running in foreground. tested on lcoalhost Tried with below code working as expected.

 navigator.serviceWorker.ready.then(function (registration) { 
                                var notificationTitle = payload.notification.title;
                                var notificationOptions = {
                                    body: payload.notification.body,
                                    data: payload.data,
                                    icon: payload.notification.icon,
                                    image: payload.data.Image,
                                    requireInteraction: payload.notification.requireInteraction,
                                    tag: payload.notification.tag,
                                    click_action: payload.data.click_action,
                                    requireInteraction: true,
                                    actions: [{
                                        action: "Test",
                                        title: "Test",
                                        icon: payload.data.action_button,
                                        height: "100px"
                                    }]
                                };
                                registration.showNotification(notificationTitle, notificationOptions);
                            },50)
                        });     

add the above code in your javascript ie. app.js

I have sent payload from my server side - c# code.

            {              
                Image = "/image/img1.jpg",
                click_action = "https://secure.mdg.com/",
                action_button = "/image/button.jpg"                
            };

            var notificationModel = new NotificationEntityModel()
            {
                title = "Testing",
                body = "This is fcm push notification demo",
                Vibrate = new[] { 500, 110, 500, 110, 450, 110, 200, 110, 170, 40, 450, 110, 200, 110, 170, 40, 500 },
                icon = "/image/mdglogo.png",                       
                tag = "Test Notify"                
            };