Push Notifications Using Node.js & Service Worker

[@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!

[@lucien-rc9do]

Thank you so much you literally saved my life 😭😭 was having errors and didn't know how to resolve them but your video has helped me and my application works fine, thank you so much 😭❤️

[@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

[@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

[@boscocorrea1895]

Please...! do a pwa tutorials

[@eugenemusebe4963]

This came at the correct time. You are amazing Brad

[@akshitdandyan192]

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

[@untakble]

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

[@Ibanezyt]

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

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

[@kennymoreno5735]

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

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

[@tristanphillips7569]

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

[@dimitargetsov9690]

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

[@tareqdevdiary]

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

[@nicolasmorin9539]

Why is does not work on safari ?

[@mohammadakbar32]

thanks Brad! amazing content as always! essential topic. God bless 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.

[@snehpanchal533]

superbly explained man , superb.

[@annez8598]

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

[@joeg4609]

you’re a life saver, thanks a lot

[@ramganesh1814]

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

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

[@hemantdubey313]

You are one of my biggest inspiration.

[@nickythecasper4314]

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

[@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!

[@jdalzate7390]

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

[@robinjames9898]

Third party library named i18n

[@hazemhamada1436]

one of the best tutorials

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

[@wwhill8033]

You provide fantastic videos, thanks!

[@anishpr5658]

Your tutorials are amazing :)

[@amirnoorani5017]

You are simply the best!

[@vloggingkid4690]

Great video man👍keep it up

[@dwijvirani7919]

Great work and very well exlpained. Keep it up

[@ColdStoneBoy]

Great tutorial, easy to understand, thx!

[@raptordev2235]

Thanks Brad this is very helpful

[@tonniewhiteley2497]

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

[@siddharathadhumale3683]

Very good explanation :)

[@faradniftaly8893]

This is awesome, keep up the good work, thx

[@MegaObka]

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

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

Brad, you make good videos. Thanks)

[@doniyority]

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

[@K8Tech]

Backend 😍.. thanks brad

[@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

[@self_motivation_official]

thank u so much ! have a good day

[@alejandronahuelalaniz2793]

excellent video, it's works for me!

[@mrmupfukudzwa4374]

Great tutorials as always

[@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

[@TimurCatakli]

Thanks, very nicely explained...

[@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?

[@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

[@chanakawijerathne8973]

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

[@SethuSenthil]

This is a dream come true!

[@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?

[@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

[@slyrockyballboa]

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

[@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?

[@swattertroops-yaaa]

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

[@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

[@daniellaerachannel]

awesome Brad!

[@bradbyrne3412]

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

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

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

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

[@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 🙏🏽🙏🏽🙏🏽🙏🏽🙏🏽🙏🏽👋👌🏽👏🏼

[@hionut2718]

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

[@anasbenyaiche7653]

Clear !! Thank you

[@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?

[@tuancharlie1]

great impression of Woody Harrelson bro

[@alessandroamedei810]

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?

[@mayank_upadhyay_19]

I am also newbie, but I guess we need to save that subscription in database to send it notifications in the future.

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

[@AbhishekKumar-mq1tt]

Thank u for this awesome video

[@justnow7263]

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

[@imaginarynoise]

Gettin' progressive up in here! Excellent choice!

[@lindembergbarbosa6352]

awesome thanks for this tutorial.

[@bhargavnakkina2568]

Thanks. It's working

[@prateekcool3]

Thank you so much man!

[@max-rm1sk]

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

[@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!

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

[@srikanthracharla420]

DOMException: Registration failed - no Service Worker, Getting this Error, while creating subscription object, anyone help me please

[@TheDanDeeMan]

Change to navigator.serviceWorker.register('./worker.js', { scope: '/' });

[@chome4]

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

[@carrillocarlosce]

Thanks traversy

[@michelbouchet3605]

I am hitting a problem at this point (15:00) in the video. After building the index.html file (under the client folder), I follow the video instructions and (in the browser) go to: localhost:5000 But instead of seing the page (as in the video), I see this (in the browser): Cannot GET /

[@freedom341]

wowowowowo keep it up sir

[@jegans3250]

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

[@fcole90]

So, if my backend consumes some APIs, then I need to poll them from time to time and send a notification to the client, based on the response, right? This makes me think I cannot have anything like that on a service like heroku which starts your backend when somebody visits it. Is it so? 😊

[@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?

[@nulI_dev]

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

[@nabeelyousafpasha]

Respect from Pakistan

[@Junyoung_Kang]

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

[@manushivammaheshwari946]

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?

[@baba_enter]

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.

[@mujahidsanni1934]

I keep getting DOMException Error while registering push. I'd appreciate any help to solve this. Thanks a lot for the tutorial.

[@JoeyLutes]

i know it's a year old comment, but i had the same issue as well and corrected it by changing console.error to console.log

[@MrPhiineasKK]

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

[@quangdungle4115]

Thank teacher . I have a silly question for you. Is there a way to push notification on safari browser and safari IOS with PWA with service worker? thanks in advance for your reply.

[@joshwolff4592]

From what I have read online - YES for Safari on Mac, NO for Safari on iOS

[@wayneswildworld]

How would we do this without needing the user to fetch. For example with a cron job?