How To Send Push Notifications With JavaScript

Подписаться 1,6 млн

Просмотров 333 тыс.

50% 1

Sending push notifications in JavaScript seems like it would be difficult if not impossible, but it is actually built into the browser and quite easy. In this video I show you everything you need to know about sending push notifications with JavaScript and just how easy it is.
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:45 - Requesting Permission
01:44 - Sending Basic Notifications
02:25 - Advanced Notification Properties
07:15 - Example Usage
#NotificationAPI #WDS #JavaScript

Опубликовано:

23 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 430

@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

@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 Год назад

@mohammedg485 Год назад

@Wawa-nh9sq Год назад

@Scuffy Год назад

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

@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

@sayatraykulov6225 Год назад

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

@otabekkadirov2578 Год назад

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

@rolitorape3020 Год назад

This guy is God sent. The explanation is sooo clean

@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

@randomuser23493 9 месяцев назад

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

@vugarbakhshalizade2826 Год назад

Yet another high value tutorial. Thank you!

@matheusmartino5738 Год назад

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

@zulhilmiomar1491 Год назад

such a high value tutorial and info! thanks kyle!

@shahmir3565 Год назад

Your way Of Teaching Is Awesome ❤️

@bobdinitto Год назад

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

@maxwellosuji4096 Год назад

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

@xdmemeguy Год назад

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:

@xdmemeguy Год назад

@@arjix8738 Thats what i said in fewer lines

@arjix8738 Год назад

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

@LacMatMuaXuan Год назад

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

@luis96xd Год назад

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

@cbennder3877 Год назад

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

@goldenPixele Год назад

Thank you man i was looking for this video

@mengsreangchannel6180 Год назад

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

@blazerhm Год назад

We need more videos like this!

@tempaccount8256 Год назад

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

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

@jobsunday833 Год назад

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

@buddy.abc123 Год назад

Cheers for this tutorial man !

@dimitargetsov9690 Год назад

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

@mustafaibrahim2558 Год назад

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

@thiagopintobraga6174 Год назад

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

@moishinetzer Год назад

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

@krateskim4169 Год назад

you are such a good teacher man

@sandeeptottadi Год назад

Super exciting content!

@TheDickname Год назад

Great tutorial! You are my Hero 👍

@mallipooalwa9085 Год назад

Your the best in covering useful Javascript API's

@pauserratgutierrez Год назад

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

@musha3368 Год назад

Nice! Good job bro, best tutorials!

@BroScro Год назад

thank you kyle. how awesome is this!

@lacamoura Год назад

Yooo i needed this for my project, thanks a lot

@nielslytzdk Год назад

You make killer content 👍. Good teacher too!

@guidingtechbd Год назад

Awesome explanation. I owe you!! 😊

@larrydev Год назад

I always wondered how this worked. Thanks!

@MdNaimurRahmanHera Год назад

Really learned some new things bro. Love you

@hussamalhinaty2340 Год назад

Very helpful and well explained

@yasirtahirkheli74 Год назад

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

@ivoxii Год назад

@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

@nottydread Год назад

Ooh, very interesting! Great tutorial.

@ohmwai Год назад

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

@kingstalker Год назад

nice didin't expect that really good well done

@armageddonvivas9243 Год назад

ITS REALLY WORKED LOL THANK YOU DUDE

@entrey_ua Год назад

Cool! Thank for a great tutorial.

@loordbeerus6284 Год назад

You are awesome i love your content keep going ♥

@isabelphillips451 Год назад

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

@rawsmoke8148 Год назад

So brilliant! Thank you!

@ilyesbejia6566 Год назад

Thanks for sharing those are great materials

@slametnugroho6535 Год назад

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

@hackytech7494 Год назад

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

@sojumoscow Год назад

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

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

@nikhil6842 Год назад

Great video Kyle

@hassaneoutouaya Год назад

Thank you so much!

@medAmineRg Год назад

thanks max thats really helpfull

@rulesofsuccessfullife6098 5 месяцев назад

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

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

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

@alpha6wolf262 Год назад

This is amazing!

@ArielZab Год назад

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

@beinyourguard Год назад

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

@dclxviclan Год назад

New level knowledge, thanks bro 👍

@shaikhyamin3464 Год назад

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

@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

@techpal9871 Год назад

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

@Opprofile 4 месяца назад

Thank you!!

@yusufsaify6735 Год назад

Great man 👍🏻

@vipbossman Год назад

You are the best !!

@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

@zorogenius 11 месяцев назад

You earnt a subscribe, my friend.

@jeffryansyahputra3765 Год назад

nice tuts...

@amershboul9107 Год назад

you deserve a huge like 👍🏻👍🏻

@kuroexmachina Год назад

always cool to see native stuff

@pugazhonline Год назад

good as usual

@mubafaw Год назад

Awesome!!!!!😊👍

@daniel-jerrehian Год назад

Great video

@Ahmedhkad Год назад

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

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

@abdiag603 Месяц назад

Can this be used with data/body texts fetched from backend using modern ajax methods like fetch() ????

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

@MrProxy10 Год назад

Just Amazing man❤❤❤❤

@nziokaaustin Год назад

tutorial added to my "to try list" asap

@FzsHotDogInDonut Год назад

How do I change the position [where it appears] of alert message or notification box? is there any way to do it? Like facebook notification on desktop website.

@xBZZZZyt Год назад

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

@michalkotlicki4710 Год назад

Can we use Notification class in React, or do we need Service Worker for sending notification?

@salehm9631 Год назад

Thank you

@vansh1190 Год назад

That's really an informative Video, Thanks @kyle

@GetushaHD Год назад

The COME BACK please is having me dead.😂

@zabihullahazadzoi Год назад

great, super useful

@nekromenzer Год назад

cool dude , useful !

@shub226 Год назад

This is dope

@marvin_e Год назад

is it possible to create a custom ui component that prompts a user for notification permission ?

@106rutvik Год назад

Very nice video

@michaelbrauner Год назад

Thank you much for this tutorials. Does this also work if someone has their mobile phone in their pocket, but the Safari browser, for example, is still open in the background? Does that person then get an IOS push notification?

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