How to send browser push notifications from a Node.js app

[@andreluizmontanari7886]

Thank you, thanks for the help, practical example, article on the blog, congratulations!

[@knocklabs]

Thanks for watching - JE

[@robertbaindourov134]

Was searching for this! Thank you!

[@knocklabs]

Awesome, glad it was helpful!

[@braitt26]

Great video well done dont know how you dont have so many followers for that great work

[@knocklabs]

Thanks for watching - JE

[@JamieLeBlanc-m8n]

I think I came close to getting it working, I have all the code the same, but when I run it I didn't get the notification, but in the console I see it stopped at "Push Received", the subscribe call is still pending, but then nothing happened. I have notifications allowed, but never receive them in the browser.

[@ArekMS]

Exactly the same result here. Confirmations in the console but no popup notification on the web page. Anyone know why?

[@knocklabs]

@@ArekMS
Maybe try these steps from the blog post. I had to update OS level settings as I made the video - JE Troublshooting tip: If you don't see the browser push notificaton as shown above, but the browser console is logging a Push Recieved... message, then you may need to check your browser and operating system settings to make sure notifications are allowed from the browser you are using.

[@nelco63]

Thanks for the video just a quick question Have you tried doing this on a PWA ?

[@knocklabs]

I personally haven't, but I'm not sure it would be too different based on what I recall about PWAs - JE

[@yourskiss]

Plz make video on web push notification in pwa using nextjs

[@knocklabs]

Thanks for the suggestion, I think we have a similar piece of content using Next.js on the schedule

[@josephplaugher7324]

I’m getting an error registering the service worker. It says it’s not a secure operation and fails. Any idea why? I’ve been researching it, but haven’t found anything yet.

[@knocklabs]

Different browsers have different security thresholds I think, so some may require HTTPS. You could try using window.isSecureContext to see if your browser thinks it's insecure: developer.mozilla.org/en-US/docs/Web/API/Window/isSecureContext

[@josephplaugher7324]

@@knocklabs I found the issue, sort of. I was trying to import the service worker as a module using esm. If I don't use esm, and just run everything in the global browser scope it works. I don't like writng JS code that way. But at least I figured it out!

[@knocklabs]

Ahhh, amazing, glad your figured out the issue

[@ransomecode]

Please use ESM😢

[@knocklabs]

Thanks for the comment, that's good feedback - JE

[@JohnWeland]

Thanks for the overview of how this works. I have a few questions though on the practical implications.
It seems like the server is your web server that handles the web app. Could this be broken out to a standalone notification server? I am thinking something like lambda? if not for the entirety of the notification service at least for the push. Secondly how would to subscribe to multiple things? Like say an /all and a /myuser so that under /all anytime a notification is needed to go to everyone everyone gets its where as if there is a push specific to a given user a push could be done in a targeted manner. I don't know maybe in an e-commerce setting, a user adds things to their cart and leaves. or had added something to their cart but removed it and now that item is on sale.

[@knocklabs]

Thanks for the comments. Yes, you could break this out into a separate server if you wanted to. In fact, in an earlier version of the written tutorial it was set up more that way. I consolidated them for understanding mostly. As for modeling this stuff, I'd store the actual push subscription data somewhere on the user data in your app, and then you could create a 'Subscriptions' table that could store the topics or lists a user could subscribe to. Let me know if that helps, if not happy to take another stab at providing some info. Thanks for watching - JE