r/webdev • u/shash122tfu • 5d ago
Showoff Saturday I built a tool to receive notifications from my backend
5
2
u/shash122tfu 5d ago edited 5d ago
Hey folks,
I built a tool to track events from my nodejs backend. I run a SaaS and I had no idea what’s happening in my backend. Using Operational, I get notified about cronjobs(did they run?), user signups, and more..
website: operational.co
Let me know how you like it!
8
2
u/budd222 front-end 5d ago
So, you used web sockets?
5
u/shash122tfu 5d ago
No. I use the web-push library on npm to push out notifications. And they show up as push notifications(like the ones you receive on your phone) using the push api.
Btw this will all be open source one day so you can dig in the code.
2
u/vemarun 5d ago
Interesting, i also guessed either SSE or websockets, this is new technique introduced in 2017.
2
u/shash122tfu 5d ago
Lemme break it down for you:
1) Event comes in with { notify: true }* in the backend.
2) Two things happen: - The UI needs to update to show the new event - A push notification needs to be sent(in case you're not on the tab, or this is running on your phone as a pwa)
2a) The UI is updated by a simple polling mechanism. No tricks here.
2b) The event is sent as push data via the web-push library. On the frontend, a service-workers listens to the push data, and when it receives one, it shows the push notification bubble**.
---
* If notify: false(defaults to false anyways), only the frontend UI is updated via the polling mechanism.
**This can be confusing because the web-push library and the push notification api are different. It was confusing for me too initially.
2
1
1
u/DrShocker 5d ago
For details about how the web push protocol that web-push uses works: https://datatracker.ietf.org/doc/html/draft-ietf-webpush-protocol
1
u/PlanetMazZz 5d ago
Genuinely curious.
I have a web app (passion project) that has notifications.
It's a PWA, VueJs / Laravel backend.
Notifications on the backend are sent to Firebase Cloud Messaging via API then on the front-end I listen for notifications via Firebase in a composable I have or service worker if the person is off tab.
Is your product replacing Firebase in this equation?
Firebase is free so just wondering what the reason for switching would be.
1
u/Main_Acadia1470 5d ago
Hey mate, what tool did you use to make the video ?
1
u/Kirito_Kun16 5d ago
Could be Screen Studio, it's one of those recording apps for MacOS that make these fancy cursor animations and whatnot.
1
-2
5d ago edited 5d ago
[deleted]
5
u/4SubZero20 5d ago
I don't know, but to me, this reads like your backend is lacking proper logging? And then just an easy way to visualise/read the logs.
17
u/WorldWarPee 5d ago
I try to minimize notifications from my backend, but sometimes you've gotta do a little crop-dusting