Action button push-notification not working | Node | sw-push

Question

I've created a web app using MEAN stack and integrated push message notification for certain events. But how do I add link/s in the notification so the user can click and gets redirected to site on browser

here's a specimen I send

const notificationPayload = JSON.stringify({
            notification: {
                title: "Hello",
                body: "World,
                icon: <icon link>,
                vibrate: [100, 50],
                data: {
                    dateOfArrival: Date.now(),
                    primaryKey: 1
                },
                actions: [{
                    action: "explore",
                    title: "Checkout",
                    icon: <icon link>,
                    click_action: "https://www.google.com",  // not working
                    url: "https://www.google.com"   // not working
                }]
            }
        });

Resultant is good, and checkout button is clickable... but no reaction

Answer 1

I'll setup the precise answer, that resolved my case with ngsw-worker:

this was the notification that I was sending, with it, you can send data in the data attribute:

notification: {
                title: "hello world,
                body: "you have a notification",
                icon: <user dp url>,
                vibrate: [100, 50],
                data: {
                    dateOfArrival: Date.now(),
                    primaryKey: 1,
                    url: <user's profile URL>   // data to be used
                },
                actions: [{
                    action: "explore",
                    title: "Checkout",
                    icon: '... some address ... jolly-roger.png',
                },
                {
                    action: 'close',
                    title: 'Close'
                }
                ]
            }

Now, open ngsw-worker.js. It's usually in root folder of dist (for production ready rip), or in node_modules\@angular\service-worker\ngsw-worker.js

here, goto line that handles clicks on notification (:1932: in my case)

this.scope.addEventListener('notificationclick', (event) => 

and you can add your code here regarding the ULR to open. example:

this.scope.addEventListener('notificationclick', (event) => {
                try {
                    clients.openWindow("http://localhost:3000/#/"+event.data.url);
                } catch (e) {
                    clients.openWindow("http://localhost:3000/#/");
                } 
                this.onClick(event)
            });

alternatively, if you are handling it within angular itself, you can use redefine the function after injecting swPush in constructor:

this._swPush.notificationClicks.subscribe( event => {
      console.log("event = ", event);
});

Rest related articles are present in Salvio's answer below.

Answer 2

Okay, firstly, NotificationAction object is only allowed to have 3 keys:

1. action
2. title
3. icon

So Naturally, click_action & url will just be ignored.

Coming to your question on how to handle actions, you need to write handlers for each action in the array based on the NotificationAction.action key in your service worker. A detailed guide can de found here.

example:

self.registration.showNotification("New mail from Alice", {
  actions: [
    {
      action: 'archive',
      title: 'Archive'
    }
  ]
});

self.addEventListener('notificationclick', function(event) {
  event.notification.close();
  if (event.action === 'archive') {
    // Archive action was clicked
    archiveEmail();
  } else {
    // Main body of notification was clicked
    clients.openWindow('/inbox');
  }
}, false);

References:

1. NotificationAction
2. NotificationEvent.action
3. Notification API
4. Displaying a notification - Web Fundamentals
5. Notification behaviour