Web Push Notifications - End to End implementation

In this video we create a working implementation of web push notifications using the 'web-push' npm package and a web page with a push handler in the service worker.

Links to the samples used:

P.S Just joined buy me a coffee :-)

Github link:

0:00 Intro
1:00 Install web-push for s server side
1:21 Create hosting webpage with Subscribe button
1:45 Add Service Worker Registration
3:00 Implement Subscribe Button (Call Subscribe on PushManager)
3:50 Add ApplicationServerKey on Web Page
5:50 Generate VAPI Keys
6:30 Add VAPI Public Key to Web Page
6:50 Set VAPI Details
8:00 Create Service Worker
8:20 Handle Push Event in Service Worker
9:15 Push Site into Github (link in description)
10:25 Push Site into Netlify to host
11:40 Subscription Details to store in DB
13:30 Perform Push!
14:12 Push Working in Chrome Browser
14:30 Push Working in Firefox (but me not noticing alert!)
15:28 Push working in Edge Browser

[jimbo-dev]

I saw so many tutorials suggesting that web push should be implemented trough firebase or some other third party service, so thank you so much the introduction to this topic! This was way clearer than the Chrome developers guide👌👌👌

[BillCarlson]

Thanks for this! While your setup wasn't exactly what I was using - it was all of the right pieces that I needed to set up to get push notifications working for my business. THANKS!

[BlueyMcPhluey]

first half was just what I needed, nice and bare bones, straight to the point

[seethalakshmip]

Haven't signed in for youtube for a long time. Just done it to upvote this video and subscribe... You are rocking..

[bArraxas]

Great tutorial, thx for the video !
On firefox as you had ignored the first prompt he didn't ask you again. At place of pop again firefox shake a message icon on right of lock icon in url bar ;-)

[chandragie]

Watching in 2021 and still great. Thanks for this very simple and informative example!

[ivanfranciscoj]

Best (and well explained) web push tutorial ever, thank you

[yungbeong]

Really clean, straight to the point. 🔥

[ash-faque]

Firefox shows a little notification icon next to the lockpad on the address bar, naughty Firefox

[khanthmuu]

It really helps me understand about web push API. Thanks!

[ali-cvep]

You saved me a lot of time, thank you

[alexandrefossatifilho]

right to the point, excellent video! thank you

[ytanna]

I think at 16:45 - the little ion next to the url had a little vibrate. might indicate the firefox was blocking it

[ua-today]

In Firefox Nightly you may see push icon shaking (left from url field), when you click subscribe.

[MrGigi-dzcv]

I can hear your computer fan from here ... 😀😀😀😀

[faustaleonardo]

Amazing. Thank you and keep up the good work. I am sure you channel will be keep growing up :)

[webdeveloper]

6:30 you directly passed the public key into the applicationServerKey but I saw others pass it through a urlBase64ToUint8Array function what is the difference?

[angelbythewings]

awesome video, btw was your cpu overclocking this entire time ?

[MrRhysstevens]

Nice one, would be great if you can follow this on to make it complete. PS did Firefox have a little speech bubble near the beginning of the url

[devinboyd]

Would it be possible to automate the node push to run at a scheduled time, like for a reminder?