Push Notifications Using Node.js & Service Worker

No video

Push Notifications Using Node.js & Service Worker

Рет қаралды 281,862

Күн бұрын

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

Пікірлер: 277

@techdave99 6 жыл бұрын

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 6 жыл бұрын

techdave99 awesome, thank you for clarifying that

@manojsinghrawat6069 3 жыл бұрын

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

@ThiagoVieira91 6 жыл бұрын

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

@TraversyMedia 6 жыл бұрын

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 6 жыл бұрын

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

@stephh4392 6 жыл бұрын

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

@superasn 5 жыл бұрын

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

@shubhammetkar6021 3 жыл бұрын

RIP grammar.

@lonewolfcoding5208 Жыл бұрын

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

@alanthinks 6 жыл бұрын

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

@saurabhkashyap7577 6 жыл бұрын

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

@billsb5873 6 жыл бұрын

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.

@boscocorrea1895 6 жыл бұрын

Please...! do a pwa tutorials

@pygemssoftware4254 2 жыл бұрын

Another gem from traversy. On an abstruse subject made simple

@sagarmaheshwary3150 6 жыл бұрын

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

@nishanthbhat 6 жыл бұрын

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

@jdalzate7390 6 жыл бұрын

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

@robinjames9898 4 жыл бұрын

Third party library named i18n

@PandemicGameplay 6 жыл бұрын

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.

@doniyority 5 жыл бұрын

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

@eugenemusebe4963 6 жыл бұрын

This came at the correct time. You are amazing Brad

@Ibanezyt 6 жыл бұрын

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

@untakble 2 жыл бұрын

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

@tareqdevdiary 4 жыл бұрын

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

@nicolasmorin9539 4 жыл бұрын

Why is does not work on safari ?

@vlaaristil5738 4 жыл бұрын

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.

@slyrockyballboa 3 жыл бұрын

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

@tristanphillips7569 2 жыл бұрын

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

@annez8598 6 жыл бұрын

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

@akshitdandyan192 3 жыл бұрын

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

@kennymoreno5735 6 жыл бұрын

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

@mohammadakbar32 6 жыл бұрын

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

@ramganesh1814 5 жыл бұрын

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

@dimitargetsov9690 2 жыл бұрын

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

@nickythecasper4314 2 жыл бұрын

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

@chome4 4 жыл бұрын

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

@jeremyc92 6 жыл бұрын

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?

@arissbandoss4478 3 жыл бұрын

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

@juan193 6 жыл бұрын

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!

@snehpanchal533 5 жыл бұрын

superbly explained man , superb.

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

@ColdStoneBoy 4 жыл бұрын

Great tutorial, easy to understand, thx!

@joeg4609 Жыл бұрын

you’re a life saver, thanks a lot

@hemantdubey313 6 жыл бұрын

You are one of my biggest inspiration.

@Junyoung_Kang 5 жыл бұрын

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

@chanakawijerathne8973 4 жыл бұрын

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

@hazemhamada1436 3 жыл бұрын

one of the best tutorials

@reubenjosephcabrera8179 6 жыл бұрын

do a pwa tutorial. thank you traversy

@TraversyMedia 6 жыл бұрын

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

@tuancharlie1 4 жыл бұрын

great impression of Woody Harrelson bro

@tonniewhiteley2497 6 жыл бұрын

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

@dwijvirani7919 3 жыл бұрын

Great work and very well exlpained. Keep it up

@wwhill8033 6 жыл бұрын

You provide fantastic videos, thanks!

@anishpr5658 6 жыл бұрын

Your tutorials are amazing :)

@lickybuay 2 жыл бұрын

Nice tutorial, will be great if you can explain me how can i make this with user segmentation. For example i want to send a message to all the user that have to send required documents

@vloggingkid4690 6 жыл бұрын

Great video man👍keep it up

@jawadhammoud9255 4 жыл бұрын

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.

@raptordev2235 6 жыл бұрын

Thanks Brad this is very helpful

@MegaObka 6 жыл бұрын

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

@faradniftaly8893 4 жыл бұрын

This is awesome, keep up the good work, thx

@LouisNelZA 5 жыл бұрын

This was really interesting and well executed. Subscribed!

@TraversyMedia 5 жыл бұрын

Thanks man

@nicolasmorin9539 4 жыл бұрын

Why is does not work on safari ?

@sumanboi 3 жыл бұрын

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

@amirnoorani5017 4 жыл бұрын

You are simply the best!

@mrmupfukudzwa4374 6 жыл бұрын

Great tutorials as always

@srikanthracharla420 2 жыл бұрын

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

@TheDanDeeMan 2 жыл бұрын

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

@paicolman 2 жыл бұрын

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?

@konstantinkozokar7587 3 жыл бұрын

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

@user-zg3vt6zh6y 6 жыл бұрын

Brad, you make good videos. Thanks)

@siddharathadhumale3683 3 жыл бұрын

Very good explanation :)

@K8Tech 6 жыл бұрын

Backend 😍.. thanks brad

@TimurCatakli 6 жыл бұрын

Thanks, very nicely explained...

@carrillocarlosce 6 жыл бұрын

Thanks traversy

@alejandronahuelalaniz2793 5 жыл бұрын

excellent video, it's works for me!

@Teedeewhyy 5 жыл бұрын

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.

@manushivammaheshwari946 3 жыл бұрын

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?

@self_motivation_official 3 жыл бұрын

thank u so much ! have a good day

@aishwaryabn2278 3 жыл бұрын

Hey worked fine in asking permission but in notifying part this is giving me an error that "I must pass in a subscription with at least an endpoint" how to fix it

@jamalabdullahi8155 6 жыл бұрын

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

@TraversyMedia 6 жыл бұрын

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

@jamalabdullahi8155 6 жыл бұрын

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

@daniellaerachannel 6 жыл бұрын

awesome Brad!

@samplesample9714 3 жыл бұрын

You miss out/ not shown when user not browse website still show push notifications🔔. I am waiting for that miss part could you please show that and generate multiple push notifications

@sumdev4983 2 жыл бұрын

I get no errors in the console, but I get no notification popup. I checked my chrome settings to make sure I allow popups. All console.logs are working. I am very confused. anyone have any suggestions?

@bizzle98 6 жыл бұрын

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

@ghanimalmarzouqi3277 6 жыл бұрын

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 5 жыл бұрын

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

@RNMERIA 5 жыл бұрын

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

@petecapecod 6 жыл бұрын

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

@meerbekakimzhanov6217 2 жыл бұрын

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

@meerbekakimzhanov6217 2 жыл бұрын

Please, help me it is not working for me

@petecapecod 2 жыл бұрын

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.

@SethuSenthil 6 жыл бұрын

This is a dream come true!

@mujahidsanni1934 5 жыл бұрын

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

@JoeyLutes 4 жыл бұрын

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

@jegans3250 2 жыл бұрын

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

@wayneswildworld Жыл бұрын

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

@max-rm1sk 6 жыл бұрын

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

@bradbyrne3412 3 жыл бұрын

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

@bettytocode1220 3 жыл бұрын

when i try i dont get the push notification, instead its written in the console : fetch finnish loading and by clicking on the url localhost:5000/subscribe the page is saying cannot get /subscribe... any ideas?

@michelbouchet3605 6 жыл бұрын

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 /

@franciscogomes4009 3 жыл бұрын

If anyone receives the message saying "script execution is disabled" run 'node . ode_modules\web-push\src\cli.js generate-vapid-keys'

@aakashsonawane5868 3 жыл бұрын

how come am not getting this notification on device..its just show on desktop on which my node.js app is running

@nulI_dev 6 жыл бұрын

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

@yoyobu1666 4 жыл бұрын

why do we need to set webpush.setVapidDetails ? And what mail do I need to put. My website mail, personnal mail?

@mohamedfanah899 3 жыл бұрын

This kind of notification is not working for mobile browser, can you help me brad

@bhargavshah5206 4 жыл бұрын

I used same process and I am getting this error message'the key in the authorization header does not correspond to the sender ID used to subscribe this user. Please ensure you are using the correct sender ID and server Key from the Firebase console. '. Please suggest me the solution.

@raygan3 6 жыл бұрын

How can i trigger push notification not when i visit a page but i want to prepare a message body on my admin panel and send push notifications to all users that allowed when they are not on my website

@hionut2718 6 жыл бұрын

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

@lindembergbarbosa6352 6 жыл бұрын

awesome thanks for this tutorial.

@maksimmamrikov3818 4 жыл бұрын

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 2 жыл бұрын

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

@MrPhiineasKK 3 жыл бұрын

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