How to actually display the push notification with NgServiceWorker

[BorntraegerMarc]

So, I followed the official guideline https://docs.google.com/document/d/1F0e0ROaZUnTFftmC0XovpREHWHjcXa4CggiFlmifjhw and I reached at some point this code:

this
     .sw
     .push
     .map(value => JSON.stringify(value))
     .subscribe(value => {
       console.log(value)
     });

When I generate a push message from the backend, then I actually see the value being logged (with the correct data). But how do I now display a Push Notification in the frontend?

The last step to add self.addEventListener('notificationclick) also works. If I add in the file custom-listeners.js the event self.addEventListener('push', function(event) { then the push message gets displayed. But without the push data....

[BorntraegerMarc]

If I trigger a push manually through google chrome dev console (by clicking on the "push" link) then the push gets displayed...

[webmaxru]

Hi Marc! You don't have to add a listener for push event in NGSW, it's done automatically for you when you enable Push plugin by setting: "push": { "showNotifications": true } in your custom ngsw-manifest.json (in the project root)

If you did it, but for some reasons no notifications appear, please check, that this setting is actually in the production ngsw-manifest.json (the one in dist folder).

If it's not there, there could be some reasons:

• wrong location or name of custom custom ngsw-manifest.json
• bug of CLI 1.1.1 submitted here: https://github.com/angular/angular-cli/issues/6654

[BorntraegerMarc]

Thanks for the fast answer @webmaxru I'm using CLI 1.04, so probably not a problem...

Bot the ngsw-manifest.json in the root + dist folder have:

  "push": {
    "showNotifications": true,
    "backgroundOnly": false
  },

Maybe the problem is because I have two modules? The Service worker is used in my chat-module, which is imported from app-module. I have imported the import { ServiceWorkerModule } from '@angular/service-worker';

[webmaxru]

Showing the notification bubble should not depend on your client-side code at all: the code you posted as an example is optional (for the case when you have to keep an eye on push events in your app, in addition to popping up messages). I can have a closer look if you deploy your code somewhere (client-side is enough, there is Push emulator in DevTools)

[BorntraegerMarc]

Hmm, that wouldn't help you too much. Because if I emulate the client side push then it works. It just does not work if the push gets triggered from the backend. I guess I will dig a bit deeper into the topic and post my results here...

[webmaxru]

If so, check the following: push message sent from backend should have a "notification" key in order to be processed and displayed by Angular service worker. This is not a part of Web Push API spec, but a convention for NGSW

[BorntraegerMarc]

@webmaxru you are right. The problem was in the backend: I did not add the notification property when sending the payload.

the object should look like this:

            notification: {
                title: 'asdf',
                "actions": [{
                    "action": "opentweet",
                    "title": "Open tweet"
                }],
                "body": "asdfasdf",
                data: roomId
            }

I did not have the notification object. Maybe you could add this to the docs? For the people who work with their own backend and did not clone your example code :)

[webmaxru]

It's mentioned in the doc, but maybe not so explicitly :) Good point.

[BorntraegerMarc]

Ah yeah it is. Then I'm just blind... Sorry :)

[mchughbri]

Thanks guys. I had this exact problem and this has solved it. I needed to wrap my payload in a notification:{}