PWA Notifications
Building my first Progressive Web App, it's new territory for me but I've made it installable already.
I'm trying to cover a fairly simple use case, which is displaying a badge count based on the number of unread notifications. Intuition tells me that I'd just ping an endpoint on the server at a 5 minute interval, but I'm in new territory so I thought I'd open up the conversation to see if there's any gotchas to be aware of.
I'd like to see if there's anyone out there on Tildes who has experience in this domain - is the service-worker always on, or is it only active once the app has been open and then backgrounded? How do I know if the app is currently open? I would like the app to query for notifications more frequently when it's opened, and only intermittently when it's closed. Any tips?
Maybe this is overkill for your use case, but a while ago I found this article about web notifications and how to implement them (using a service worker client-side). I haven't followed it myself yet (though I plan to), so I can't speak for how correct it is, but after reading it through it doesn't seem to be too complicated.
I don't have much experience with service workers either so can't really answer your questions about that or give any tips, but I thought the linked article might be helpful for you, or maybe give some inspiration at least!
It does seem relatively complicated factoring in the web-push library, but I suppose it's only as complicated as it needs to be. I tend towards rolling my own code for this sort of thing, but I find that it helps a lot in the long term towards understanding how the system actually works.
Implementing this for my current use case would be overkill if I wasn't planning on extending towards Push notifications in the future. At this point, I figure I may as well eat the biggest frog first. Thanks for the article.
Edit: Yea there's a bunch of complexity hidden 'under the hood'. I'm not a fan of JWTs but it seems I'll have to work with them if I want to update people with notifications.
I do not have direct experience, out of curiosity I did do a quick search. As is often the case MDN seems to have some decently good information available.
For regular apps and battery life a push notifications are preferred, I do not know if that is also the case for PWAs.
I am fairly certain that it is possible for a service worker to see if a page is active. Afaik a service worker is not always on, it is when the app is open and can wake up based on certain events.
Yep, been working through the MDN docs but I've found them a bit obtuse.
The docs can sometimes be a bit obtuse indeed, what I linked to is a guide on top of the docs which actually provides more actual examples. Could still be too obtuse for your taste, just figured I'd clarify in case you skipped over the link because of it being MDN :)
I think you'd either need push notifications, as mentioned by u/creesch, or periodic background synchronization, as service workers are not constantly awake. It's not available in all browsers yet, though and is experimental at this stage, I think.
I was looking at periodic background sync (the link came up purple) but yea, experimental tech. I'll give it another look before I start implementing, though.
You do know you can access https://devdocs.io/dom/notification without a service worker, right? What you're describing sounds like that's what you'd really like/need. You can call that from the main thread or any vanilla Worker.
Like the other commenters already said: you might want to look into push notifications.
The issue with polling is that it's not scalable (e.g. when you have a 1000 clients all polling every 5 minutes). I'd say, check out firebase push messaging, they have a tutorial (badly written though) in their docs for integrating with a service worker.
You'll have to handle 'foreground' and 'background' notifications. Foreground means the app is running and is currently showing for that user.
In firebase you then have the choice to target a group of 'subscribers' at once, or just a single 'subscriber' based on the key the client provided you with. You can even take it further and target a 'device group' from a single user (so they get a message on there phone and browser).
Lastly there's the difficulty of native notifications: on mobile safari this wasn't possible, but I think they changed that some time ago (at least this person seemed to make it work https://www.reddit.com/r/PWA/comments/19f9tjy/push_notifications_on_safari_ios/) ... On desktop you should be able to do native notifications, even when the browser is closed, no problem (on windows, mac and linux).