New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Provide means to configure notificationclick in service-worker push #20956

Closed
areijngoudt opened this Issue Dec 12, 2017 · 10 comments

Comments

10 participants
@areijngoudt

areijngoudt commented Dec 12, 2017

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[x ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

When a PushNotification is received by the ServiceWorker, I want to be able to handle the notificationclick event. For instance open the webapp and navigate based on the data that was passed in in the PushNotification

Expected behavior

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment


Angular version: X.Y.Z


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

@alxhub alxhub added this to Backlog in Service Worker via automation Dec 12, 2017

@keatkeat87

This comment has been minimized.

keatkeat87 commented Dec 24, 2017

oh yup, we really need it !
any alternative for now ?
any way to make extending ?

@hazmah0

This comment has been minimized.

hazmah0 commented Jan 9, 2018

I need this as well. Is there any recommended way or workaround at the moment?

@juanlu91

This comment has been minimized.

juanlu91 commented Jan 17, 2018

any update on this?

@ngbot ngbot bot added this to the Backlog milestone Jan 23, 2018

@u-ryo

This comment has been minimized.

u-ryo commented Mar 19, 2018

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".
I created a test application.

@abhaygitty

This comment has been minimized.

abhaygitty commented Apr 29, 2018

Thank you and it works like a magic :) But fails to work when deployment of application is done on the cloud. But locahost works smooth.!!

@GeorgeTailor

This comment has been minimized.

GeorgeTailor commented May 23, 2018

I've played around a little with the service-worker code and came up with a solution of extending existing service worker with a notificationclick listener. Can anyone provide some other use-cases of this eventlistener except for redirecting the user to specific url ?

@GeorgeTailor

This comment has been minimized.

GeorgeTailor commented May 25, 2018

As the browser support is kind of poor as of right now, see https://developer.mozilla.org/en-US/docs/Web/API/Notification (actions array is supported only in Opera and Chrome).
I do not think it is worth spending time on implementing such functionality.

@sinasava

This comment has been minimized.

sinasava commented Jun 8, 2018

@GeorgeTailor would you please share the workaround with us?
Not being able to handle click events seems to render push notifications pointless or of not much use as it's not possible to open the pwa from notifications. Or am I missing something?

@GeorgeTailor

This comment has been minimized.

GeorgeTailor commented Jun 8, 2018

@sinasava you can probably extend the generated ngsw.js with your code, which would receive a message from application with definition of the function that should handle the notification click, it is fairly easy to implement. The next step would be to tell angular to look for your extended ngsw instead of using the generated one.
As I mentioned before, not all browsers support that, for example firefox - https://bugzilla.mozilla.org/show_bug.cgi?id=1225110. I am not sure if Edge currently supports it, I wasn't able to find docs regarding that and + I had problems to run service worker within Edge, which was run within VirtualBox on my Mac.

@sinasava

This comment has been minimized.

sinasava commented Jun 9, 2018

Thank you @GeorgeTailor . I'd have a look

joostme added a commit to joostme/angular that referenced this issue Sep 7, 2018

feat(service-worker): handle 'notificationclick' events
The previous version did not support the 'notificationclick' event.
Add event handler for the event and provide an observable of
clicked notifications in the SwPush service.

Closes angular#20956, angular#22311

joostme added a commit to joostme/angular that referenced this issue Sep 7, 2018

feat(service-worker): handle 'notificationclick' events
The previous version did not support the 'notificationclick' event.
Add event handler for the event and provide an observable of
clicked notifications in the SwPush service.

Closes angular#20956, angular#22311

joostme added a commit to joostme/angular that referenced this issue Sep 21, 2018

feat(service-worker): handle 'notificationclick' events
The previous version did not support the 'notificationclick' event.
Add event handler for the event and provide an observable of
clicked notifications in the SwPush service.

Closes angular#20956, angular#22311

joostme added a commit to joostme/angular that referenced this issue Sep 28, 2018

feat(service-worker): handle 'notificationclick' events
The previous version did not support the 'notificationclick' event.
Add event handler for the event and provide an observable of
clicked notifications in the SwPush service.

Closes angular#20956, angular#22311

joostme added a commit to joostme/angular that referenced this issue Oct 1, 2018

feat(service-worker): handle 'notificationclick' events
The previous version did not support the 'notificationclick' event.
Add event handler for the event and provide an observable of
clicked notifications in the SwPush service.

Closes angular#20956, angular#22311

joostme added a commit to joostme/angular that referenced this issue Oct 3, 2018

feat(service-worker): handle 'notificationclick' events
The previous version did not support the 'notificationclick' event.
Add event handler for the event and provide an observable of
clicked notifications in the SwPush service.

Closes angular#20956, angular#22311

joostme added a commit to joostme/angular that referenced this issue Oct 12, 2018

feat(service-worker): handle 'notificationclick' events
The previous version did not support the 'notificationclick' event.
Add event handler for the event and provide an observable of
clicked notifications in the SwPush service.

Closes angular#20956, angular#22311

joostme added a commit to joostme/angular that referenced this issue Oct 12, 2018

feat(service-worker): handle 'notificationclick' events
The previous version did not support the 'notificationclick' event.
Add event handler for the event and provide an observable of
clicked notifications in the SwPush service.

Closes angular#20956, angular#22311

joostme added a commit to joostme/angular that referenced this issue Oct 15, 2018

feat(service-worker): handle 'notificationclick' events
The previous version did not support the 'notificationclick' event.
Add event handler for the event and provide an observable of
clicked notifications in the SwPush service.

Closes angular#20956, angular#22311

IgorMinar added a commit to joostme/angular that referenced this issue Nov 1, 2018

feat(service-worker): handle 'notificationclick' events
The previous version did not support the 'notificationclick' event.
Add event handler for the event and provide an observable of
clicked notifications in the SwPush service.

Closes angular#20956, angular#22311

@kara kara closed this in cf6ea28 Nov 1, 2018

Service Worker automation moved this from Backlog to Done Nov 1, 2018

sculove added a commit to sculove/angular that referenced this issue Nov 2, 2018

feat(service-worker): handle 'notificationclick' events (angular#25860)
The previous version did not support the 'notificationclick' event.
Add event handler for the event and provide an observable of
clicked notifications in the SwPush service.

Closes angular#20956, angular#22311

PR Close angular#25860
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment