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

Подписаться 143

Просмотров 2,1 тыс.

50% 1

Learn how to send web push notifications using Node.js and the node-pushnotifications library. Set up a notification server, subscribe from the browser, and handle push events with a service worker.
Resources
knock.app/blog/how-to-send-br...
github.com/JEverhart383/knock...
vapidkeys.com/
00:00 Introduction
00:51 Project setup
01:40 Project overview
03:20 VAPID keys explained
04:15 Server push library
06:22 Client-side code
11:01 Service worker explained
13:33 Push flow recap
14:48 Wrap up

Опубликовано:

23 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 18

@andreluizmontanari7886 9 дней назад

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

@knocklabs 8 дней назад

Thanks for watching - JE

@robertbaindourov134 День назад

Was searching for this! Thank you!

@knocklabs 22 часа назад

Awesome, glad it was helpful!

@braitt26 2 месяца назад

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

@knocklabs 2 месяца назад

Thanks for watching - JE

@neillmennell9779 2 месяца назад

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

@knocklabs 2 месяца назад

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 2 месяца назад

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 2 месяца назад

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 2 месяца назад

@@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 2 месяца назад

Ahhh, amazing, glad your figured out the issue

@JohnWeland 2 месяца назад

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 2 месяца назад

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