Interacting With Push Notifications Under Angular 7 Applications

Until recently Angular supported SwPush class which allowed PWA capable applications to subscribe and listen to push notifications from the Service Worker. One feature that was missing though was the ability to interact with the notification card that got displayed using the native system UI. Fortunately, starting with Angular version 7.1.0 the SwPush class now includes the notificationClicks: Observable<{…} property which allows you to easily interact with the returned notification. Its also extremely easy to setup. Here is an example where I am subscribing to clicking on the notification card which will redirect the user to my blog. Also notice that you also have access to the action that triggered the click. So you can wire your code to react differently to different actions.

ngOnInit() {
   this.swPush.notificationClicks.subscribe( notpayload =>
   {
     console.log(
       'Action: ' + notpayload.action +
       'Notification data: ' + notpayload.notification.data +
       'Notification data.url: ' + notpayload.notification.data.url+
       'Notification data.body: ' + notpayload.notification.body
     );
     window.open(notpayload.notification.data.url, "_blank");
  });
}

And here is the payload I pushed using my webpush server:

const notificationPayload = {
   "notification": {
      "title": "Web FTW",