Angular 7 PWA configure Push Notifications

After lots of struggle I found something and will share it for others:

Digging into the ngsw-worker.js that is created by running build --prod there is this function:

onPush(msg) {
    // Push notifications without data have no effect.
    if (!msg.data) {
        return;
    }
    // Handle the push and keep the SW alive until it's handled.
    msg.waitUntil(this.handlePush(msg.data.json()));
}
...
handlePush(data) {
    return __awaiter$5(this, void 0, void 0, function* () {
            yield this.broadcast({
                type: 'PUSH',
                data,
            });

            if (!data.notification || !data.notification.title) {
                return;
            }

            const desc = data.notification;

            let options = {};
            NOTIFICATION_OPTION_NAMES.filter(name => desc.hasOwnProperty(name))
                .forEach(name => options[name] = desc[name]);
            yield this.scope.registration.showNotification(desc['title'], options);
    });
}

As it looks like angular subscribes and shows the notification for you, it is not necessary to subscribe and show it in your own code. I had an issue with my sending library (https://github.com/laravel-notification-channels/webpush) that was sending the payload like this:

payload = {"title":"test","actions":[{"title":"View App","action":"view_app"}],"body":"test","icon":"\/icon.png","data":{"id":"21a3804e-6d71-4a56-b513-535709c37c0f"}}

but angular expects obviously something like:

payload = {
    "notification":{"title":"test","actions":[{"title":"View App","action":"view_app"}],"body":"test","icon":"\/icon.png","data":{"id":"21a3804e-6d71-4a56-b513-535709c37c0f"}}
}

which caused this line in ngsw-worker.js to fail:

if (!data.notification || !data.notification.title) {
    return;
}

Therefor, no notification was shown, but the browser reported an update in the background. Hope this helps someone.

Is there a way to handle click events on the notifications?

Try this:

this.swPush.notificationClicks.subscribe(data => {
    // handle click
})