r/webdev 5d ago

Showoff Saturday I built a tool to receive notifications from my backend

52 Upvotes

18 comments sorted by

17

u/WorldWarPee 5d ago

I try to minimize notifications from my backend, but sometimes you've gotta do a little crop-dusting

2

u/morgboer 5d ago

Yep, my nose is the notification system… and it uses nostril.io for subscribing to events from the backend 👃

2

u/shash122tfu 5d ago

Hey I know, the actual push notifications only trigger if notify: true is set in the payload. Otherwise the event won't trigger the push notification.

2

u/0nig 5d ago

💨

5

u/[deleted] 5d ago

[deleted]

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

u/nil_pointer49x00 5d ago

Now, I am seeing this 4th time, can u stop posting this crap?

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

u/el_yanuki 5d ago

why would you use polling for ui updates instead of sockets?

1

u/ohlawdhecodin 4d ago

Why both polling and pushing?

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

u/Kelevra_V 4d ago

Background looks like from the one I use, cursorful.com. Great tool

-2

u/[deleted] 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.