CODEWITHSUNDEEP
angularpush-notificationservice-worker
Behnam Aminazad
Behnam Aminazad

Reputation: 607

show custom notifications in my website if user is visiting it and show push notifications only if user is not focusing my website tab

I want to show push notifications if the user is not focusing my website and if user is focusing my website tab i want to show my inner site custom notifications and stop push notifications from popping up and distracting users. is this doable on angular 8 ? i mean just like mobile app push notifications i want something like foreground and background which i show background notifications but i show foreground notifications in my app. im using angular 8 push notification service and node js. i want to know if its possible i use push notification if not just use custom inner site notifications.

Upvotes: 0

Views: 522

Answers (1)

pate
pate

Reputation: 5253

Yes, it is possible.

In the push event listener in your Service Worker script you can get all the clients of that Service Worker by calling self.clients.matchAll() which returns a promise that will resolve with an array of client objects. Those client objects can be checked for the focused property. If the focused property is true, it means that the browser has the tab focused.

Then, depending on what sort of clients you get, you can either change the notification somehow or cancel it completely. What you're describing would probably mean that in the case of a focused client you would instead of showing a notification send a msg through postMessage API and have the front-end code show a custom "notification" in the app.

Example here: https://serviceworke.rs/push-clients_service-worker_doc.html

Upvotes: 1

Related Questions