Clicking the action part of @angular/service-worker push notifications

Question

I've been trying to redirect users to the "action" part of Web push coming from the backend (PHP).

    return (new WebPushMessage)
        ->title('Title')
        ->icon('icon.png')
        ->body('Body Msg')
        ->action('Open Notification', 'open_notification')
        ->data(['id' => $notification->id,'url'=>'http://somewhere']);

Default service workers use:

self.addEventListener('notificationclick', function(event) {
    console.log('On notification click: ', event.notification.tag);
    event.notification.close();

    // This looks to see if the current is already open and
    // focuses if it is
    event.waitUntil(clients.matchAll({
       type: "window"
    }).then(function(clientList) {
       for (var i = 0; i < clientList.length; i++) {
          var client = clientList[i];
              if (client.url == '/' && 'focus' in client)
                 return client.focus();
       }
       if (clients.openWindow)
          return clients.openWindow('/');
    }));
});

From https://developer.mozilla.org/en-US/docs/Web/Events/notificationclick

Angular 5 uses

import {SwPush, SwUpdate} from '@angular/service-worker';

My question then is how to interpret this in the front end (Angular 5) using @angular/service-worker

I'm looking for the same thing, I think it is not documented yet. — brahimfes, Feb 25 '18 at 15:43
there is an issue tu explain how it works https://github.com/angular/angular/issues/22311 — brahimfes, Feb 25 '18 at 16:03
@brahimfes Thanks, I've subscribed to it. Hopefully, they provide something usable soon. — Opemipo Bolaji, Feb 26 '18 at 01:07

score 6 · Accepted Answer · answered Apr 01 '18 at 12:58

6

Got a response from u-ryo on Github

There is a workaround. Add the codes below to ngsw-worker.js around the line this.scope.addEventListener('push', (event) => this.onPush(event));(Line 1775).

  this.scope.addEventListener('notificationclick', (event) => {
    console.log('[Service Worker] Notification click Received. event', event);
    event.notification.close();
    if (clients.openWindow && event.notification.data.url) {
      event.waitUntil(clients.openWindow(event.notification.data.url));
    }
  });

Then you can specify the URL in the "notification.data.url".

https://github.com/angular/angular/issues/20956#issuecomment-374133852

answered Apr 01 '18 at 12:58

Opemipo Bolaji

161
1
3
16

it works for me on desktop on chrome. isnt it suppose to work on android device as well? – Vik Jun 01 '18 at 23:18
@Vik The url that comes from the backend is a web url i.e. www.website.com/notifications/id. That won't work for mobile. Except you have a PWA of the site on your android device. – Opemipo Bolaji Jun 05 '18 at 13:51
So no way to act on notifications for the app ? – Vik Jun 05 '18 at 17:30
But that works on entire notification click. How to have it associate different URL on each notification action – Vik Jun 08 '18 at 20:19
@Vik you'll have to specify the dynamic urls from the server. – Opemipo Bolaji Jun 10 '18 at 11:49
well there is option to specify just one. i need different for different actions – Vik Jun 10 '18 at 16:42
@Vik have a base url from the server and dynamically append your individual intended locations from the server. – Opemipo Bolaji Jun 13 '18 at 19:13
@Vik PWA is Google termed, hence Android. But iOS has made it available now. https://medium.com/@firt/progressive-web-apps-on-ios-are-here-d00430dee3a7 – Opemipo Bolaji Jun 14 '18 at 10:09
does this not get overridden every time you run build --prod? – Chris Dec 14 '18 at 17:06
1

@Chris No, it doesn't. – Opemipo Bolaji Dec 14 '18 at 19:47
@BolajiPemipo hm unfortunately it seems that it does get overridden Everytime I build the project, all changes in ngsw-worker.js are gone... How did you overcome this limitation? – Chris Dec 17 '18 at 15:41
Well, I use it in Angular 5. What version of Angular are you working on? @Chris – Opemipo Bolaji Dec 21 '18 at 11:51
4

@BolajiPemipo I am using angular 7. i found this nice tutorial: http://jakubcodes.pl/2018/06/13/enhancing-angular-ngsw/ and registered a second custom sw for the click part - it is working pretty well so far. Thanks anyways – Chris Dec 21 '18 at 14:46

score 0 · Answer 2 · answered Jun 16 '18 at 21:51

If you want to have actions, and each action with a different url, here is my fix.

    this.scope.addEventListener('notificationclick', (event) => {
        event.notification.close();
        var payload = event.notification.data;
        var url = payload.url;
        if (event.action && payload.actions && payload.actions.length) {
            var actions = payload.actions.filter(x => x.action == event.action);
            if (actions.length && actions[0].url) {
                url = actions[0].url;
            }
        }
        if (clients.openWindow && url) {
            event.waitUtil(clients.openWindow(url));
        }
    });

waitUntil has a typo – Valentino Pereira Jan 18 '19 at 14:07 — Valentino Pereira, Jan 18 '19 at 14:07

Clicking the action part of @angular/service-worker push notifications

2 Answers2

Linked