Angular PWA push notifications

Question

I have read documents about PWA and push notifications. However, the following strategies are not clear to me as I am relating these concepts with pubsub strategy. What I need: I would to show notifications to user on my web app in chrome when a user got assigned some task (which happens thru another backend service)

What I have done so far is created angular application with PWA and notification as mentioned here. I needed to click on some button on my application in order to get the notification. But this is not what I want. I want to notify the user about a task if assigned any(user may or may not be actively using my application).

Do I need to periodically calling subscribeToNotifications from angular to check if there are tasks. This is pretty confusing me. Could anyone please explain me how does these even work?

Answer 1

The subscribeToNotifications is basically called only once. The purpose of the function is to request permission from user to send push notifications and also to receive the subscription information and save it. So after calling the subscribeToNotifications function once, you do not need to call the function again, because the user's subscription information has already been saved, and you can send notifications whenever you want, according to the subscription information.

In more details:

Sending notifications to user requires first premission from the user. This is actually the first part of the subscribeToNotifications function in the example from this article that you brought:

this.swPush.requestSubscription({
    serverPublicKey: this.VAPID_PUBLIC_KEY
})

If user allows notifications, you need to save the subscription object. The information in the subscription object is necessary to be able to send push notifications to this user.

Here is a continuation of the example, where in the .then part you get the subscription. The addPushSubscriber function in the newsletterService is responsible of saving it.

this.swPush.requestSubscription({
     serverPublicKey: this.VAPID_PUBLIC_KEY
})
.then(sub => this.newsletterService.addPushSubscriber(sub).subscribe())

Now that the object is saved, you can use the object to send push notifications using webpush library.