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

Salvino D'sa · Answer 1 · 2021-08-22T05:03:33.563

2

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

action
title
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:

edited Aug 22 '21 at 05:03

answered Aug 22 '21 at 04:58

Salvino D'sa

4,018
1
7
19

1

thanks for the answer. But I need to handle it via Angular. It's a little different here. I've tried this code:::: importScripts('./ngsw-config.json'); self.addEventListener('explore', event => { console.log("event = ", event); }); but it doesn't work. Having problem in this specific case – Pratik Agarwal Aug 22 '21 at 05:53
This might help https://medium.com/google-developer-experts/a-new-angular-service-worker-creating-automatic-progressive-web-apps-part-2-practice-3221471269a1 – Salvino D'sa Aug 22 '21 at 06:24
1

https://stackoverflow.com/questions/48972973/clicking-the-action-part-of-angular-service-worker-push-notifications – Salvino D'sa Aug 22 '21 at 06:27

score 1 · Answer 2 · answered Aug 22 '21 at 21:44

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.

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

2 Answers2