Cordova heads up push notification action buttons are not clickable

QuestionsCategory: CordovaCordova heads up push notification action buttons are not clickable
Neeraj Singh asked 3 months ago

I am facing issue with cordova push notification. I am using phonegap-plugin-push to send/receive notification using firebase.

My JS code :

  onDeviceReady: function() {
  console.log('deviceready event');
   app.push = PushNotification.init({
        "android": {
            "android": {
            "senderID": "__________",
            "sound": true,
            "forceShow": true,
            "vibrate": true,
            "priority": 2,
        },
        },
        "ios": {
          "sound": true,
          "vibration": true,
          "badge": true,
          "categories": {
            "invite": {
                "yes": {
                    "callback": "app.accept", "title": "Accept",
                    "foreground": true, "destructive": false
                },
                "no": {
                    "callback": "app.reject", "title": "Reject",
                    "foreground": true, "destructive": false
                },
                "maybe": {
                    "callback": "app.maybe", "title": "Maybe",
                    "foreground": true, "destructive": false
                }
            },
            "delete": {
                "yes": {
                    "callback": "app.doDelete", "title": "Delete",
                    "foreground": true, "destructive": true
                },
                "no": {
                    "callback": "app.cancel", "title": "Cancel",
                    "foreground": true, "destructive": false
                }
            }
          }
        },
        "windows": {}
    });

  

   app.push.on('error', function(e) {
       console.log("push error = " + e.message);
   });
   app.push.on('notification', function(data) {
     console.log('notification event');
     if (data.additionalData.url) {
       if (data.additionalData.foreground) {
         navigator.notification.confirm(
          'Do you want to see a cat picture?',
           function(buttonIndex) {
             if (buttonIndex === 1) {
               app.toggle();
             }
           },
          'Cat Pic',
          ['Yes','No']
        );
       } else {
         app.toggle();
       }
     } else {
       var cards = document.getElementById("cards");
       var push = '<div class="row">' +
         '<div class="col s12 m6">' +
         '  <div class="card darken-1">' +
         '    <div class="card-content black-text">' +
         '      <span class="card-title black-text">' + data.title + '</span>' +
         '      <p>' + data.message + '</p>' +
         '      <p>' + data.additionalData.foreground + '</p>' +
         '    </div>' +
         '  </div>' +
         ' </div>' +
         '</div>';
       cards.innerHTML += push;
     }

      app.push.finish(function() {
          console.log('success');
      }, function() {
          console.log('error');
      });
    });
},
 accept: function() {
   alert("Accepted");
 },
 reject: function() {
   alert("Rejection!");
 },
 maybe: function() {
   alert("Maybe, I dunno. I can't tell for sure");
 },
toggle: function (id) {
 var cats = document.querySelector("#cats");
 var cards = document.querySelector("#cards");
 if (cats.style.display === 'none') {
   cats.style.display = 'block';
   cards.style.display = 'none';
 } else {
   cats.style.display = 'none';
   cards.style.display = 'block';
 }
}
};

app.initialize();

I have also tried by creating channels for notification but only notiification coming but action buttons in notification are not clickable.
Please check this issue.