How To Send Push Notifications With JavaScript

[@danielegvi]

This is a great introduction to regular notifications, but these are NOT push notifications, the video title is misleading. In order to make push notifications, you must pair the Notification API with the Push API (see MDN docs) in server workers. You should update the title of the video to reflect that.

[@porroapp]

Push API isn't supported by Safari.

[@fullstack_journey]

+1

[@mohammedg485]

+1

[@Wawa-nh9sq]

+1

[@Scuffy]

@@porroapp yea only on apps not safari which is a L

[@ChronSyn]

Correction: this is known as a local notification, not a push notification. They are both part of the umbrella term of notifications but have entirely different implementations. A push notification is triggered with data sent from a remote origin, typically an APN (iOS), GCP (Android) or via the web push API connected to a remote server. The remote data provider pushes the data to the client, hence the term 'push notification'. A local notification is triggered from within a web page or app, and does not rely on a remote origin to provide data. The local notification can be displayed with data retrieved from a remote source, but this is not the same as a push notification.

[@alexdominguess]

So the notification done in this way would work if the user is not with the page opened?

[@petergg9096]

@@alexdominguess no it wont

[@Pekerjarimot]

​@@alexdominguess no

[@kiyokodyele]

this is what I've been looking for the entire video. I made a push notification with node NodeJS and I could still remember that there is VAPID thing you need to be able to send push notification. I was confused when he said you can send push notification with just client-side JavaScript.

[@ricky8466]

thank you for the correction, if not because you, i'll misguided too

[@chrisodillman3355]

My take away from this tutorial i just watched because it sounded interesting is: i know it exists, i know it is easy to do, i know where to find a tutorial. Thanks a lot Kyle

[@rolitorape3020]

This guy is God sent. The explanation is sooo clean

[@sayatraykulov6225]

Your tutorials are the best for me through the whole youtube. Useful information in every seconds, and nothing else.

[@amrmashaal834]

Bro, You really one of the best people that teaching programming on youtube. i have learnt a lot of things from you and your explanation was amazing

[@albertoiong6895]

Thanks for the tutorial... As in my case of Win10, go to [Settings] -> [System] -> [Notifications and Actions] then turn on [Get notifications from apps and other senders] and everything works fine...

[@otabekkadirov2578]

Thank you Kyle. I'm from Uzbekistan and Im learning web programming. You really simplify the web!

[@KomentatorBre]

This is great. Would be even better if we got a video on the Push API :)

[@advem.]

Exactly. But pls avoid firebase. Custom nodejs app is way better in terms of customization and controle

[@shahmir3565]

Your way Of Teaching Is Awesome ❤️

[@AlexCernat]

great video about notifications! but beware! notifications only, not push notifications! for push notifications you must first subscribe to push notifications on a web page / site, and then the server will send those push notifications, no matter if the browser is on that page or that page is closed; of course, after receiving a push notification you will show it to the user like the examples in this video

[@ksrele]

Do you need background workers for this to work? @Web Dev Simplified can you make a tutorial on workers, what they are and how to use them?

[@DaviddeKloet]

@@ksrele yes you need a service worker on the client to listen for the notifications and you need some cryptography to communicate between the server and the client.

[@ahmad98282]

I love the way you research something for a video. Now this can't be more explained than you have already done

[@arjix8738]

It is super easy to learn stuff about the notifications API, so it does not require much research, but the point still stands that he makes nice explanations. And that is all that matters. :thumbsup:

[@ahmad98282]

@@arjix8738 Thats what i said in fewer lines

[@arjix8738]

@@ahmad98282 no, you did not say that the notifications API is super easy and needs no research at all, you can literally just read the docs, there is no need for a tutorial, but I am not saying that this is a worthless video

[@randomuser23493]

Very useful video. Glad I'm part of your subscribed viewers Kyle. Keep it up!

[@yasirtahirkheli74]

Too good and an excellent addition to my code arsenal. Long live mate.

[@i0x37]

@John REST IN PISS QUEEN, SMOKING ON THE ROYAL PACK 🚬🚬🚬

[@brendon205]

@John 💀

[@HypnosisBear]

@John Queen what??!! What are you on?

[@rednexie]

@John dude...

[@farhanaditya2647]

@John ayo

[@TheGeekosDen]

I'm the guy who told you to blink your eyes a bit more when you only had like 7k subscribers. Congratulations on 1 million, also you are doing good with blinking 👁️💪

[@jimmymedia2049]

As mentioned by @chronSyn below this is not a push notification, that requires a backend service to 'push' the notification based on some event to the browser even when you are not viewing the page. Google has a push api but most are paid and a little complex to implement.

[@vugarbakhshalizade2826]

Yet another high value tutorial. Thank you!

[@blazerhm]

We need more videos like this!

[@giorgosMih]

Nice tutorial, thanks! Please do a tutorial on PWA & Web push notifications (for when the browser is closed to keep receiving notifications). They are kinda complex, but I think you will be able to explain them very clearly.

[@kirarevcrow]

That would be super cool to have such a tutorial

[@luis96xd]

Yes, please! 😄

[@adamchubbuck9480]

Yes please!

[@rageblast1468]

Yes please

[@ericwilfer8410]

Yes please

[@mallipooalwa9085]

Your the best in covering useful Javascript API's

[@adsaviation]

Wow, I love this short and the way he was explaining it, EXCELLENT. Not one time I felt lost or disorientated. K.I.S.S. is the way to go!!😀

[@mustafaibrahim2558]

I was looking for this video in your channel. But now i got it. Big ❤ bro.

[@dimitargetsov9690]

Even without Push API , still, CONCISE,INFORMATIVE,MEANINGFUL...GREAT!

[@ubeydeozdmr]

It's been great to have this video posted recently as I've been thinking about how to do this for my app. Thank you so much

[@cbennder3877]

i looked long time for a video like this. Thank you.

[@NoFaceDev]

Thank you man i was looking for this video

[@dickypb7703]

Well explained, thanks man 💙

[@jobsunday833]

Thanks! I've been searching how to get it and this is brilliant :D

[@matheusmartino5738]

I will have to implament that next week at my job. Perfect timing. Thank you so much!

[@amershboul9107]

you deserve a huge like 👍🏻👍🏻

[@krateskim4169]

you are such a good teacher man

[@thiagopintobraga6174]

Great lesson, thank for sharing this. Tomorrow I will introduce this in some systems that Im building

[@guidingtechbd]

Awesome explanation. I owe you!! 😊

[@rojonali3374]

I was thinking for a few days about sending you an email to make a video about PWA and push notifications. Here is the part of those. Thanks

[@moishinetzer]

Stuff like this is awesome, I think your CSS stuff is good but this is what people really want!

[@joshuajoshua334]

Welldone bro. Love your tutorials. I however belive I am stuck in the tutorial hell. Been doing Front dev for a month. No job or internship yet

[@lacamoura]

Yooo i needed this for my project, thanks a lot

[@sandeeptottadi]

Super exciting content!

[@MdNaimurRahmanHera]

Really learned some new things bro. Love you

[@MoggersGG]

Great tutorial! Though the JS notification api isn’t fully supported on phones. It isn’t even possible on IOS as of now and chrome on android needs service workers. Just additional information :)

[@zorogenius]

You earnt a subscribe, my friend.

[@bobdinitto]

Very, very awesome Kyle! I've always wondered how these notifications work. Thanks!

[@LacMatMuaXuan]

Thank you so much! Your clips are really useful for me and other people.

[@zulhilmiomar1491]

such a high value tutorial and info! thanks kyle!

[@rulesofsuccessfullife6098]

The video was helpful thank you for making me better than before

[@mengsreangchannel6180]

Thanks *Kyle* for sharing a good tutorial like this.

[@GetushaHD]

The COME BACK please is having me dead.😂

[@Ahmedhkad]

It's cool to try on the phone! For my own site notification

[@nziokaaustin]

tutorial added to my "to try list" asap

[@ohmwai]

Damn. I needed this like a week ago lol. But it's still a great learning experience.

[@musha3368]

Nice! Good job bro, best tutorials!

[@BroScro]

thank you kyle. how awesome is this!

[@loordbeerus6284]

You are awesome i love your content keep going ♥

[@maxwellosuji4096]

I’ve been thinking of additional features to my website and this helps alot thanks kyle❤️

[@kingstalker]

nice didin't expect that really good well done

[@larrydev]

I always wondered how this worked. Thanks!

[@WebDevEducation]

Notification.requestPermission().then(perm => { if(perm === "granted"){ new Notification("Awesome tutorial!") } })

[@beinyourguard]

amazing! again, nice to see that JS is so powerful

[@armageddonvivas9243]

ITS REALLY WORKED LOL THANK YOU DUDE

[@master-b8437]

Nice one Kyle. Noticed the ".... get rid of this sh!t" tho 😅

[@shaikhyamin3464]

I justtttt wanted to learn about push notification and you got me

[@thefamousdjx]

Nice tutorial. I doubt many people actually grant that access. I always say NO when that popup shows

[@Light_Of_Quran-Only_1]

you have a great box of contents

[@kuroexmachina]

always cool to see native stuff

[@dclxviclan]

New level knowledge, thanks bro 👍

[@siya.abc123]

Cheers for this tutorial man !

[@akoladebode-ajayi327]

Hi sir. Please why is that the modification method used in this video works for only PC and not in Android browsers

[@tempaccount8256]

This is a very good tutorial for notification. I just wanted to have this kind of feature for my project. Thanks😁

[@ArielZab]

Can you show us how to monitor ajax loading progress? So we can make something like a progress bar?

[@pauserratgutierrez]

Wow, your knowledge is amazing. Thanks for all buddy!!

[@rebarius]

Actually you‘re developing „Local Notifications“. These aren‘t real „push“ notifications while the web app or app is closed. For real push notifications you need a middleware (like FCM) the Connection to the Providers (Apple, Google,…) and your own backend (like nodejs) where you‘re sending out real push notifications.

[@crkvend]

I don’t think I’m being pedantic when I say that local notifications, the obvious subject of this video, are not push notifications. This is a pretty clickbaity title.

[@LuBre]

Came here to verify this...

[@SLRModShop]

Trying to wrap my head around how this could be useful... Doesn't seem to add anything that you couldn't do yourself as he's basically using them as info modals... I'd like to create some, but my site is multi-user (like most sites) and this solution would send a notification to EVERYONE (which is not ideal in 99% of cases)... So, I guess real push notifications HAVE to come from the back end, else they are just modals... no?

[@crkvend]

@@SLRModShop they are not modals and can be shown outside of the browser window. The usability of this is pretty limited, but let’s say you have a page that periodically polls some data or similar, and notifies the user when something in particular comes up. With local notifications (and a browser that doesn’t suspend JavaScript execution) the user could be doing something else in a different tab, or even a different app, and get notified even tho the browser might be minimized.

[@SLRModShop]

@@crkvend oooh, that's a good call... I'm trying to minimize the amount of calls to the database but yeah, that's definitely an option to use the front to poll the back and act on that... Ok... Now I have some thinking to do ^-^ Might be more powerful than I realise...

[@crkvend]

With all this said, I no way wanted to bash Kyle, I’ve been a professional developer for more that 10 years and still keep learning new things from his videos!

[@isabelphillips451]

Wow! Thank you so much for this video ... I learnt a lot in one video 😍😍😍

[@mentalites]

I ca back to soft after about 10 years when I was using soft soft 10 and for its best program Ive seen in fact its also simpliest one

[@darkmift]

I'd like to see a video of your daily routine. Where you work etc.

[@ridermonkyt]

Tag is the thing I learnt new.

[@hackytech7494]

Thanks a lot for this fantastic video. Best explanation ever.

[@hawarhekmat1174]

Great video, for some reason i use firebase FCM

[@lorenzomijorus]

hi kyle, could you do a video tutorial on how to send background notifications (like facebook does on android when the browser is closed)?

[@amittraspal]

Amazing Stuff, as always...... Please make one with React PWA and Web... I believe your tutorial would be so much better to wrap my head around.

[@ilyesbejia6566]

Thanks for sharing those are great materials

[@luis96xd]

Amazing tutorial, the best I've seen, it was well explained and in 11 minutes, thanks 👏💯👍😄👍

[@youcefg9760]

As a developer it's very interesting to know how to work with this Notifications API, and great tutorial by the way. But if you're a user web notifications are a nightmare, they're distracting, annoying and used for advertising, they can get very overwhelming if a user accepts every notification request from multiple sites, they should be disabled in most cases. How to disable them: In Chrome: Settings > Privacy and Security > Site Settings > Permissions > Notifications > Don't allow sites to send notifications. On Firefox: Type about:config on the address bar and press Enter > click "Accept the Risk and Continue" > type dom.webnotifications.enabled and set it to false.

[@slametnugroho6535]

wow, thank you so much, it was a big help

[@nikhil6842]

Great video Kyle

[@sven_93]

Would have really liked to see how the Notifications look and work for mobile usage. Also interesting would be the mobile Notifications on a PWA, which looks and feels like a mobile App.

[@universo_desconocido]

hey man did you find anything like that? I am searching for the same thing

[@sojumoscow]

What did u do in "if" part of clearing interval, the auto closing of parenthesis?

[@hikari1690]

Perfect! Now I can annoy people more jist for fun 🤣

[@DarkOceanShark]

What is the purpose of "Welcome Message" value to the tag attribute? I understand what tag is doing but what purpose is "Welcome Message" serving?

[@tuomaskoivistoinen6476]

Identifier

[@CMB696]

I granted the permission but if I wanted to push a message to notification the console shows (Failed to construct 'Notification': Illegal constructor. Use ServiceWorkerRegistration.showNotification() instead) in my mobile;😐😩😔

[@nielslytzdk]

You make killer content 👍. Good teacher too!

[@colin-campbell]

2:04 didn’t you do a video on why you should stop indenting code? ie that function should simply return if permission isn’t granted

[@xBZZZZyt]

10:28 can interval id (returned by setInterval) be 0? if check won't work then

[@alexeyshaykov]

Cool video Kyle. Can u pls create video about web push notifications? About Servise Workers and other thinks, that needs for webpush notifications? Interesting also how webpush notifications works in deeffrent browsers, especially in Safari

[@24mjohnson]

Im ciurious, Can something like this be done where it queries a database for tasks for specific users on each computer be it mac or pc and notifies them saying they have X number of tasks due at that time? It will run every so many minutes and query a database to find tasks in it that are active, for that specific user computer(however it can do that) and just pop up a notification of it?

[@peberdah]

Nice presentation, I wouldl like to use that mechanism to share clipboard content from Windows Pc to Android mobile and vice et versa.

[@nottydread]

Ooh, very interesting! Great tutorial.

[@josephlivengood4508]

That was so cool, but how do I send a notification of a new blog post or something to bring them back to the website?

[@thedacian123]

Is it mandatoary that each time i want to raise a notification to request the rigth before.For instance i have a complex spa(react or angular).?Thank you!

[@vmod3985]

Keep in mind that safari doesn't support this, add a check to see if "Notifications" exists before interacting with the API to avoid a crash on mobile