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',
                ),
            ),
        ),

    ),
);

Solution

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.

Comments

[vasco.randolph]

the question is for web push, not android

[Sukhi]

oh ! Thought it's for Android since the first image link points to Android and the question wasn't tagged to "web-push".