Push Notifications Using Node.js & Service Worker
HTML-код
- Опубликовано: 21 окт 2024
- In this video we will create push notification capability using Node.js without any 3rd party services. We will achieve this using web-push, the push/notifications api and service workers.
Code:
github.com/bra...
Webpush Repo:
github.com/web...
Helpful Articles:
developers.goo...
developers.goo...
/ a-beginners-guide-to-s...
💖 Become a Patron: Show support & get perks!
/ traversymedia
Website & Udemy Courses
www.traversymed...
Follow Traversy Media:
/ traversymedia
/ traversymedia
/ traversymedia 
Наука
Edge 17 (in the april windows 10 update) has service workers. In Edge 16, workers are installed by enabling the 'Enable Services Workers' flag.
techdave99 awesome, thank you for clarifying that
@Reynaldo that's a work of notification , why would it show same notification again and again
ZOMG! I was in need of this tutorial for a college class. You saved me, Brad! ✊
That's awesome they are actually doing this stuff in college. I say that because from what I have seen it is a lot of older and theory based technology
In my college, they teach Node.js, Angular, Gulp, and stuff like that! Just in the beginning it was Java
I love this kind of video, more full-stack, more back end web, excellent!!!Thank u Brad!
This is the best most complete video tutorials on web notifications!
RIP grammar.
Greetings from Miami! I have a Start-Up Culture Channel and I'm also a Developer.. LEARNING A LOT FROM YOU T! THANK YOU!
I'm struggling with notifications for a week or so.. specifically with firebase cloud messaging/react. I would love to see your next videos on pwa's or specifically firebase cloud messaging. I found documentation to be a bit confusing. Thank you for this video on node/vapid. It was really useful.
Thank you I am waiting for push notification basic video from you , this video clear my all basic doubts. And please release soon your PWA crash course. Hope we really enjoy that series’s of video , and thank you man
Another gem from traversy. On an abstruse subject made simple
That really helped. You should do tutorial on pwa for beginners.
Please...! do a pwa tutorials
Thanks Traversy Media, I will be using it in my MERN app
It;s good to do videos on things that do not rely on external libraries. Security vulnerabilities are becoming very high for many third party libraries and often times they aren't even really needed.
thank you very much I've been looking for this for a very long time
This came at the correct time. You are amazing Brad
Great Video Brad. I would love a video showing us how to translate our Web page language.
Third party library named i18n
I'm gonna use it for one of my university project, thank you sir!
Why is does not work on safari ?
Hey man! Been following your videos for a while and i've gotta say you're one of the best teachers out there! You've helped me a bunch! I got a question: Would you consider doing a nativescript/typescript/any DB and API tech? Again, many thanks!
I have just became a Patreon supporter thank you very much Brad.
Many thanks! Look forward to your service worker crash course and many others!
Greetings from Cape Town. Awesome tutorial, appreciate it! Thanks
Thanks! This is just what I was looking for. Nicely explained.
very nice and simple frame for web push worker. Thanks a lot - I'm going to repeat on my project)
superbly explained man , superb.
Thank you Brad! Your always bring something new out of the box. I really enjoy your videos. Learning lot from them. Keep bringing such quality stuff 👍. Once again thank you. 😊
Nice tutorial. But does it require the user to have the web page active to see this?? Can we do it when the user is not even in the browser?? Thanks
Great, as usual.....Sir Brad Traversy...
no matter the coding is
server is most crucial computer in the world it handles the most users specially on the cloud
This is a great video. Thanks for that. You explained everything great.
Great video! Thanks
Push notification recived only if you refresh browser, how to achive without browser refresh?
You are one of my biggest inspiration.
Great work and very well exlpained. Keep it up
Great tutorial, easy to understand, thx!
thanks Brad! amazing content as always! essential topic.
God bless you.
This push thing is so interesting. I had no idea I could squeeze out extra revenue from the same amount of traffic by simply adding push monetization to my sites. Currently I use MonadPlug, works great with AdSense.
You provide fantastic videos, thanks!
you’re a life saver, thanks a lot
Awsome Brad! You are my fav 👌 how can i impliment this push notification for a specific user?
This was really interesting and well executed. Subscribed!
Thanks man
Why is does not work on safari ?
@@TraversyMedia hey can i use this to send notifications even when the browser is closed...i mean running in the background
Thanks Brad this is very helpful
Hey Brad, big fan, great video.
One question, if I want to push to the subscription from another endpoint/API, should I save the subscription into something like Redis or any kind of store?
Dear Brad, can you tell me how i can make notification to react native app using node js?
Your tutorials are amazing :)
Awesome content! Do you know other cool channels like this?
DOMException: Registration failed - no Service Worker, Getting this Error, while creating subscription object, anyone help me please
Change to navigator.serviceWorker.register('./worker.js', {
scope: '/'
});
This is awesome, keep up the good work, thx
Love your videos , as always :) thanks for your help ))
This is really simple and cool, thanks a lot! One question thjough: I tried to modify the code to get notifications every 5 seconds by putting the webpush inside a setInterval... But the browser gets only one notification only. Would that even be possible?
Brad, you make good videos. Thanks)
Great video tutorial. I'm wondering why you decided to use the `web-push` library instead of the native `push api`? Also, what was your reason for building it on the server, instead of using the Notification API and building the functionality in the client?
the server can decide what time to send any notification to any or many users
This is dope Brad...thanks a bunch. How would you schedule for that push notification to be sent to your users... let's say every 90 days...(or every 2 minutes for testing purposes) even if they don't have your webpage opened? Thanks
Thanks, very nicely explained...
great impression of Woody Harrelson bro
Thanks for the tutorial Brad. I'm just wondering if I can use this approach to show a notification in a mobile app. Say for example, a react native app or an android app.
I need to learn more about Service Workers since they are new to me.
Thanks again, greetings from Oman.
Did you ever get this figured out? I'm also trying to figure out if this would work with a React Native app
yes plz. can anyone point to a tutorial to do push notifications with FCM for react native ,android in a node app
hey Brad
why i love you and your video ? you are best
Great video man👍keep it up
do a pwa tutorial. thank you traversy
I plan on it, one of the things I am in the process of learning enough to teach :)
Very good explanation :)
one of the best tutorials
thank u so much ! have a good day
excellent video, it's works for me!
That’s a good video, clear explanation and easy to understand…
May I ask you, if I want to create a form input and send push notification to specific user, so what is the way or logic for the implementation with MERN stack, include redux as well? And one more thing, if we have multiple notification, do we create multiple custom-sw.js, right?
Please give me some explanation and advice, appreciate your help :)
Very Nice Thanks !!!! owe you a tip ... as soon as I can
Great tutorials as always
You are simply the best!
So how or where can you implement something that queries a database for specific tasks based on the user of that computer thats assigned to him in a database that is due at that time? Basically wanna have each person in a company that can run it and it runs every so many seconds or minutes and queries a database of whatever kind for tasks assigned to that user only and sends notification saying "you have X number of takss due at this time"?
Bit late to the party, but could you please consider doing a video on how to actually send push notifications. For example, how to subscribe the user to a particular endpoint and post notifications to that endpoint/suggest a model for the system. I'm really struggling. Thanks.
nice vid, would love to see an advanced wordpress udemy course
Perfect video, I have one issue, push notifications doesnt appear on Android devices
I couldn't get it to display the notification, but in the Service Workers section of Google Developer Tools I can see where it was received. Any ideas?
All ad networks have its pros and cons - concerning the outlook of ad formats, CPC, eCPM etc., and you have to test them in order to see if they work for you or not. At the moment, I use MonadPlug and its results are better than 99% of other ad networks..., and I would not know that if I did not test their network. Simple.
How can you notify about a change to a specific website's content?
Hi Traversy I'd like to know if you have some tips for beggining front-end developers basically I'm familiar with HTML5, CSS3 with all those transitions transformations etc and media queries, JS. What are some good excersises to progress in skill and make it let's say "easier" to build simple responsive websites eg one page layouts. I'm about to learn bootstrap and .Net but I still feel like a newbie lost in all that stuff. What would you suggest doing if you were me? Thanks for all the tutorials on this channel they helped me progress a lot. Keep up the good work!
Brad can answer this question.
I want to use this a website and then I will convert mobile app , can still work when is mobile or desktop.?
Thanks
I wonder whether you can do the same thing for mobile app, android in specific?
Hey Brad .
Will you come up with a react project based course ? I am learning from your mern stack course but I am looking for some project based react course to get a better understanding of framework.
satyajeet kumar jha about 85% sure that will be my next course
Traversy Media I will buy it the day u put it on udemy
Backend 😍.. thanks brad
You really did it..🥰,
Kindly update how can i send dynamic data in push notifications, in other server react js build🥺 please me
Thanks my lecturer 👨🏫 I like you the most
I request to go for deep service worker and caching the pages
Something i am definitely planning. I am in the process of digging into PWA
Many many thanks sir 🙏🏽🙏🏽🙏🏽🙏🏽🙏🏽🙏🏽👋👌🏽👏🏼
awesome Brad!
Please... please do a playlist on creating a responsive wordpress theme *NOT A BUSINESS THEME* because that's all that's out there on youtube. Was hoping for a how to create a Newspaper magazine or a editorial/news theme from *SCRATCH* all tutorials out there are not actually coding it
Very nice... how can we use this on wordpress site... if you please suggest
What... I am lost. I don't see any notification... ?
Edge and also Safari both just added service workers. So all major browsers now support them 👍😎
You are talking about the version which will be on the next year?
Please, help me it is not working for me
This video was a couple years ago, you should have access to service workers in all major browsers.
Sorry it's not working for you.
Thank you so much for the tutorial! I have a question, in this tutorial you subscribe to the server push notification system and you immediatly get a notification back: how can i subscribe the client, but send to him the notification throught another api call?
I am also newbie, but I guess we need to save that subscription in database to send it notifications in the future.
Gettin' progressive up in here! Excellent choice!
Hai sir
Thanks for the detailed info.
How do we add /subscribe, how does it know it has to be taken
This is a dream come true!
Notification is not popped up in my browser Chrome, in MacBook pro M1 chip. Even though I have active the notifications to allow and also have not set Do Not Disturb, Can you help me with this?
i am a big fan of brad`s Udemy courses, one Suggestion, can we have one complete MERN course with Multer images / videos upload, service worker, push notification, nodemailer emails verification on users registration, new post alerts etc, i mean everything Brads have on youtube regarding Node.js and react in one complete course.. Please consider it for your next udemy course..
I have to think of timing and what you are talking about is a production level app. It is hard for me to come up with something that in depth in a sufficient amount of time and still be able to feed my family. I could maybe do something like that but it would be on the side of everything else I was doing so it would take a very long time and within that time technologies update and things would go out of date, which is very frustrating :(
Traversy Media oh yeah, i got ur point, maybe a second part of front to back mern can have those in seperate udemy course, where you start from where on top of existing project, really nobody want to see you doing it from scratch but an updater course of MERN, where all of us can subscribe to it as new course. just a thought...
I have one question, was it supposed to work in mobile Chrome? I did the steps and I can see the notification in desktop but when I tried in chrome mobile it doesn't show :(
How would we do this without needing the user to fetch. For example with a cron job?
I followed your nice video tutorial and thanks to it have now something working locally.
I would like to go for the next step and make something working on the server (for example on Heroku). Do you have any tip for that?
I have setted up Web push to my vue js and express app and getting notifications. But only on computers and not mobile devices what should i do. Any help is appreciated.
Thank you for putting all the shit togather. I read docs but someone would miss one thing on another or someone would just godamn GCM in it and confuse the shit out of it.
Thanks traversy
Thanks brad.
Brad, can you do a agenda, mongodb task job shefuler tutorial?
I'm trying to wrap my head around things.. How do we specify which user to push to?
Thank you very much for these Tutorials, I would to know what are your thoughts regarding Web Assembly & AMP (accelerated Mobile Pages) it seems Google is pushing those techs for the future the same goes with the Flutter SDK - Thanks mate!.
why do we need to set webpush.setVapidDetails ? And what mail do I need to put. My website mail, personnal mail?
This tutorial is very interesting, but is there a way to get the code without having to retype it?