Push Notifications Using Node.js & Service Worker

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

[@techdave99]

Edge 17 (in the april windows 10 update) has service workers. In Edge 16, workers are installed by enabling the 'Enable Services Workers' flag.

[@TraversyMedia]

techdave99 awesome, thank you for clarifying that

[@manojsinghrawat6069]

@Reynaldo that's a work of notification , why would it show same notification again and again

[@ThiagoVieira91]

ZOMG! I was in need of this tutorial for a college class. You saved me, Brad! ✊

[@TraversyMedia]

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

[@patrickRotmg]

In my college, they teach Node.js, Angular, Gulp, and stuff like that! Just in the beginning it was Java

[@stephh4392]

I love this kind of video, more full-stack, more back end web, excellent!!!Thank u Brad!

[@saurabhkashyap7577]

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

[@superasn]

This is the best most complete video tutorials on web notifications!

[@shubhammetkar6021]

RIP grammar.

[@alanthinks]

Greetings from Miami! I have a Start-Up Culture Channel and I'm also a Developer.. LEARNING A LOT FROM YOU T! THANK YOU!

[@pygemssoftware4254]

Another gem from traversy. On an abstruse subject made simple

[@billsb5873]

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.

[@nishanthbhat]

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. 😊

[@lonewolfcoding5208]

no matter the coding is server is most crucial computer in the world it handles the most users specially on the cloud

[@sagarmaheshwary3150]

That really helped. You should do tutorial on pwa for beginners.

[@tareqdevdiary]

I'm gonna use it for one of my university project, thank you sir!

[@nicolasmorin9539]

Why is does not work on safari ?

[@Ibanezyt]

Greetings from Cape Town. Awesome tutorial, appreciate it! Thanks

[@eugenemusebe4963]

This came at the correct time. You are amazing Brad

[@PandemicGameplay]

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.

[@annez8598]

Many thanks! Look forward to your service worker crash course and many others!

[@jdalzate7390]

Great Video Brad. I would love a video showing us how to translate our Web page language.

[@robinjames9898]

Third party library named i18n

[@akshitdandyan192]

Thanks Traversy Media, I will be using it in my MERN app

[@tristanphillips7569]

Thanks! This is just what I was looking for. Nicely explained.

[@untakble]

thank you very much I've been looking for this for a very long time

[@mohammadakbar32]

thanks Brad! amazing content as always! essential topic. God bless you.

[@nickythecasper4314]

very nice and simple frame for web push worker. Thanks a lot - I'm going to repeat on my project)

[@ramganesh1814]

This is a great video. Thanks for that. You explained everything great.

[@boscocorrea1895]

Please...! do a pwa tutorials

[@kennymoreno5735]

I have just became a Patreon supporter thank you very much Brad.

[@vlaaristil5738]

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.

[@juan193]

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!

[@dimitargetsov9690]

Great, as usual.....Sir Brad Traversy...

[@hemantdubey313]

You are one of my biggest inspiration.

[@joeg4609]

you’re a life saver, thanks a lot

[@snehpanchal533]

superbly explained man , superb.

[@ColdStoneBoy]

Great tutorial, easy to understand, thx!

[@slyrockyballboa]

Great video! Thanks Push notification recived only if you refresh browser, how to achive without browser refresh?

[@wwhill8033]

You provide fantastic videos, thanks!

[@hazemhamada1436]

one of the best tutorials

[@tonniewhiteley2497]

Love your videos , as always :) thanks for your help ))

[@dwijvirani7919]

Great work and very well exlpained. Keep it up

[@amirnoorani5017]

You are simply the best!

[@raptordev2235]

Thanks Brad this is very helpful

[@anishpr5658]

Your tutorials are amazing :)

[@MegaObka]

hey Brad why i love you and your video ? you are best

[@chanakawijerathne8973]

Awsome Brad! You are my fav 👌 how can i impliment this push notification for a specific user?

[@faradniftaly8893]

This is awesome, keep up the good work, thx

[@БогданЮрчук-т8о]

Brad, you make good videos. Thanks)

[@LouisNelZA]

This was really interesting and well executed. Subscribed!

[@TraversyMedia]

Thanks man

[@nicolasmorin9539]

Why is does not work on safari ?

[@sumanboi]

@@TraversyMedia hey can i use this to send notifications even when the browser is closed...i mean running in the background

[@TimurCatakli]

Thanks, very nicely explained...

[@K8Tech]

Backend 😍.. thanks brad

[@doniyority]

Dear Brad, can you tell me how i can make notification to react native app using node js?

[@daniellaerachannel]

awesome Brad!

[@mrmupfukudzwa4374]

Great tutorials as always

[@alejandronahuelalaniz2793]

excellent video, it's works for me!

[@self_motivation_official]

thank u so much ! have a good day

[@arissbandoss4478]

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

[@vloggingkid4690]

Great video man👍keep it up

[@SethuSenthil]

This is a dream come true!

[@siddharathadhumale3683]

Very good explanation :)

[@carrillocarlosce]

Thanks traversy

[@tuancharlie1]

great impression of Woody Harrelson bro

[@jamalabdullahi8155]

Thanks my lecturer 👨‍🏫 I like you the most I request to go for deep service worker and caching the pages

[@TraversyMedia]

Something i am definitely planning. I am in the process of digging into PWA

[@jamalabdullahi8155]

Many many thanks sir 🙏🏽🙏🏽🙏🏽🙏🏽🙏🏽🙏🏽👋👌🏽👏🏼

[@bradbyrne3412]

Very Nice Thanks !!!! owe you a tip ... as soon as I can

[@reubenjosephcabrera8179]

do a pwa tutorial. thank you traversy

[@TraversyMedia]

I plan on it, one of the things I am in the process of learning enough to teach :)

[@maksimmamrikov3818]

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?

[@jww0007]

the server can decide what time to send any notification to any or many users

[@paicolman]

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?

[@jawadhammoud9255]

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.

[@hionut2718]

Awesome content! Do you know other cool channels like this?

[@anasbenyaiche7653]

Clear !! Thank you

[@BarakaMahili]

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

[@nulI_dev]

nice vid, would love to see an advanced wordpress udemy course

[@Teedeewhyy]

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.

[@ghanimalmarzouqi3277]

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.

[@compeng2013]

Did you ever get this figured out? I'm also trying to figure out if this would work with a React Native app

[@RNMERIA]

yes plz. can anyone point to a tutorial to do push notifications with FCM for react native ,android in a node app

[@lindembergbarbosa6352]

awesome thanks for this tutorial.

[@jegans3250]

You really did it..🥰, Kindly update how can i send dynamic data in push notifications, in other server react js build🥺 please me

[@petecapecod]

Edge and also Safari both just added service workers. So all major browsers now support them 👍😎

[@meerbekakimzhanov6217]

You are talking about the version which will be on the next year?

[@meerbekakimzhanov6217]

Please, help me it is not working for me

[@petecapecod]

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.

[@chome4]

How can you notify about a change to a specific website's content?

[@prateekcool3]

Thank you so much man!

[@ibraheemalsaady3216]

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?

[@AbhishekKumar-mq1tt]

Thank u for this awesome video

[@DaveTradeFx_01]

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 :)

[@Junyoung_Kang]

What... I am lost. I don't see any notification... ?

[@bizzle98]

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

[@bhargavnakkina2568]

Thanks. It's working

[@konstantinkozokar7587]

Perfect video, I have one issue, push notifications doesnt appear on Android devices

[@freedom341]

wowowowowo keep it up sir

[@B0re_d]

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!

[@jeremyc92]

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?

[@24mjohnson]

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"?

[@babayaga4329]

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.

[@rajeev1668]

Great tutorial .I really appreciate your efforts. Can also create video for advanced level of mongodb tutorial for complex schema design on Udemy.

[@juanfperez]

Thank you sir!

[@imaginarynoise]

Gettin' progressive up in here! Excellent choice!

[@novailoveyou]

THANK YOU!!!!

[@kennymoreno5735]

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!.

[@satyajeetkumarjha1482]

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.

[@TraversyMedia]

satyajeet kumar jha about 85% sure that will be my next course

[@satyajeetkumarjha1482]

Traversy Media I will buy it the day u put it on udemy

[@swatilekha_roy]

Thanks a lot!!!

[@geek4001]

Thanks brad. Brad, can you do a agenda, mongodb task job shefuler tutorial?

[@michelbouchet3605]

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?

[@corsaronero5619]

Hi Brad very interesting video. when a crash course on PWA with push notification, camera and install on mobile, thanks Corsaro

[@max-rm1sk]

I wonder whether you can do the same thing for mobile app, android in specific?

[@malikgenius4u]

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..

[@TraversyMedia]

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 :(

[@malikgenius4u]

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...

[@ruhitaj4914]

Hai sir Thanks for the detailed info. How do we add /subscribe, how does it know it has to be taken