How To Send Push Notifications With JavaScript?

Подписаться 146 тыс.

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

50% 1

Hey everyone, I am Piyush Garg and in this video, we are going to learn how we can send push notifications to a user via browser using React and Firebase cloud messaging.
► Complete Code Link: drive.google.com/drive/folder...
Quick Links
► Firebase Console: firebase.google.com
► Firebase Docs: firebase.google.com/docs
► Firebase Cloud Messing Docs: firebase.google.com/docs/clou...
Featured Playlists
► Complete Java Tutorial Series - • Java Tutorial Series i...
► Complete ReactJS Tutorial Series - • Complete React Tutoria...
► Complete Firebase & React Tutorial Series - • Firebase with Reactjs ...
► Website - piyushgarg.dev
Social Links
► Instagram - / piyushgarg_dev
► Facebook - / piyushgarg.dev
► LinkedIn - / piyushgarg195
► Telegram Channel Link t.me/codewithpiyushgarg
Video Titles
How to send push notifications using javascript?
How to send push notifications using React?
How to send notifications in chrome?
How to use firebase cloud messaging in react?
How to use firebase cloud messaging?
Tags
- React
- Firebase
- Firebase Cloud Messaging
Hashtags
#reactjs #reactjsdeveloper #firebase #firebasecloud #javascript #serviceworker

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

18 сен 2022

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

Hey Piyush, I used to be addictive to your videos now and for mostly all the topics on which I want to learn something, I search for your video. Thank you so much for your great efforts.

@office-jayukani Год назад

Thanks for the video 👍, It is working fine in my react app

@zaynsaifi5331 Год назад

Tnx bro,i was looking for this from past 2 monthes,but didnt find exact expected result,really really tnx brother

@piyushgargdev Год назад

Your Welcome Bro 👍

@MuhammadAyaz-gp7xd 9 месяцев назад

Love you brother. Keep the good work up.

@user-dr7rw2kl4u 8 месяцев назад

Thanks for this amazing video, I checked many videos for push notification but that one is not working but your video is very impressive, your description is very good

@user-rh9sl1ww9k Год назад

very helpful video . appreciated...

@shitalchavan5538 Год назад

Can anyone tell me how to read notification sent in the browser. What is the use of onMessage method in firebase

@abdullaharz5945 6 месяцев назад

Such a helpful Video Thanks

@sunnyy6295 7 месяцев назад

can i use this in electronjs project as well?

@mausoofnawazish134 Год назад

thanks bro, But what you actually did on the chrome permission settings? from that it's not comming like a notification.

@ajayjb8727 Год назад

Thank you, awesome video, I was having trouble with creating firebase-messaging-sw.js file in public folder, finally solved it.

@piyushgargdev Год назад

Nice work!

@ajayjb8727 Год назад

@@piyushgargdev In Firebase docs they have mentioned you can add meaningful content. Even after Googling also can't able to find right solution. I still don't understand why firebase has made it so complicated.

@timetopass23 2 месяца назад

How can i set Foreground notifications? Means website open in active tab i need that time also notifications

@sagarghosh123 10 месяцев назад

It's not possible using wordpress website we can connect with Firebase for push notification. Please assist.

@rajeshchitikela5847 Год назад

In Android I am just getting notification and it is sitting in the notification tray, how would I be able to make it as a floating notification?

@ritankarbhattacharjee7661 Год назад

The video is absolutely great Piyush. But I don't what is the cause when I placed the service worker in public folder it did not work but when I moved it in src folder it started working also changed the import codes a bit

@shubhanshusahu7406 Год назад

underrated video

@techknowledgebase4504 10 месяцев назад

HI, v10.2.0 with sw Nextjs not working windows 10 but same setup working in MacOS. Are you know how to solve that?

@AnibalGutierrezYoSoy Год назад

Hola! se puede enviar la notificacion directamente desde la app en modo admin?

@mohammedtaha3217 Год назад

Lovely Video

@jairoandresguevarajulio571 Год назад

Thanks for the video, great job

@user-ul6qv3qw1d Год назад

best tutorial

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

Thank you sir

@AmmadAhmed-ou9bp 2 месяца назад

Helpful! I recommend you guys to follow his tutorial if you doing this task,

@CHIRAGARORA-gj4cr 10 месяцев назад

very nice video

@DEVILGAMING-tj1ee 4 месяца назад

Dom elements are not accessible in this file can you help me out with this? Sir!

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

Benjamin thanks man i was so done with this you saved me , praise the lord maybe break some laws

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

will this notification work even after the tab is closed? In background

@sagargunjal1590 Год назад

I got two notifications instead of one after sending it from fcm

@umershabir7045 Год назад

amazing! video, but as per the test message it's working but when I sent notification it didn't showed up

@vaniavenegas3925 Год назад

me pasa lo mismo u.u

@pushpajitbiswas3752 Год назад

I'm not getting any notification, can you please help me. I did everything that showed in the video

@simba6510 Год назад

thanks bro, this video helped me so much.

@piyushgargdev Год назад

Glad to hear it!

@pratikgosavi7341 5 дней назад

does it work on ios also?

@roshankumar-um9he Год назад

facing issue in version 9.15.0 bro

@vivekknShots Год назад

provider.ts:122 Uncaught FirebaseError: Messaging: Missing App configuration value: "projectId" (messaging/missing-app-config-values). i ma getting this error i have already added the project id in the firebaseConfig still getting that error

@piyushgargdev Год назад

Can you paste your firebase config

@saqibhussain2843 Год назад

great. but how can we send push notification programmatically I mean when a user click a button(reactjs,html etc) it should triggered a notification

@riiadada5283 Год назад

"web dev simplified" did a turorial on what you want to acheive .(on youtube)

@zinx6809 Год назад

@@riiadada5283 thanks

@buntyswain 6 месяцев назад

Push notification comes but it is showing localhost:3000,how to change this?

@princerajput6709 6 месяцев назад

hey piyush i am getting same notification twice can u please help me?

@roshankumar-um9he Год назад

how to give permission when we send data? i didn't get notification

@sonalarya5541 Год назад

Hello, I receiving the error importScript not found why this happening I did everything correctly..?

@piyushgargdev Год назад

Don't worry, the code would still work fine. That's just an error from your IDE, not the actual error in your code.

@Chawan-dog-kennal Месяц назад

Bhai simple JavaScript app or PWA app may kashe kre

@Anythiny 7 месяцев назад

add one more video to this playlist on firebase hosting

@krcpr007 Год назад

what if a user is using your application with multiple device then how token will work ?

@piyushgargdev Год назад

You need to store all the tokens as an array in your database. Each token is unique to device.

@f4kshort633 Год назад

Bhai mobile main notification send nahi kar raha hai please help

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

How to send notification in safari browser because it is not working in safari

@axioluxe Год назад

i have followed but not work

@Rohut500 8 месяцев назад

Website mein kaise lagaye

@imtiyaz9331 8 месяцев назад

Sir How to send push notification to multiple devices

@SanjayNG125 6 месяцев назад

How to hide our firebase details...??

@sayantabhattacharjee9808 Год назад

8:56 localhost:3000 wants to know your location🤣🤣

@pulkitjain5159 10 месяцев назад

doing every thing right still it's not working at all

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

ya jo code end pa video skip kr k add kia ha kahan sy kia ha

@weekendplayer442 7 месяцев назад

export const app = initializeApp(firebaseConfig); export const messaging = getMessaging(app); Server Error ReferenceError: navigator is not definedI

@user-pt3oi4wp7w 5 месяцев назад

Not receiving notifications

@zanhbenz Год назад

unhandledRejection: FirebaseError: Messaging: This browser doesn't support the API's required to use the Firebase SDK

@weekendplayer442 7 месяцев назад

got the same error. Using next js

@KhanePeCharchaMehngaKharcha 2 месяца назад

Hey, any solution?

@KhanePeCharchaMehngaKharcha 2 месяца назад

M also using nextjs

@user-hx1sg7ey6x Год назад

hi, how to fix duplicate notifications?

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

hey did you find the solution?

@ThanHtutZaw3 10 месяцев назад

Just temporally remove code self.registration.showNotification in service worker . It sends duplicate because we are sending from our app and also from the firebase console .

@actiongamerz1643 Год назад

sir aapki jo 11:50 per error aati hai wo meri bhi same aa rahi hai but aapki solve hoo gai meri nahi ho rahi hai, Please Help.

@piyushgargdev Год назад

Have you made firebase-message-sw file?

@flutterdart4542 Год назад

did you got any solution?

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

why do you need initialize firebase in two files ?

@enongenegilian9367 Год назад

why do you speak in your dialet?

@piyushgargdev Год назад

Hi There, I feel more comfortable in speaking in Hindi, so thats why :)

@jaif2900 Год назад

Wrong video doesn't works

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

Very disappointing video, I came here to see how you have implemented this for the foreground notifications but you didn't show that

@gouthamasatheesh Год назад

I followed the same thing in Next JS. But I got some errors. utils/firebase.js (18:38) @ eval TypeError: (0 , firebase_messaging__WEBPACK_IMPORTED_MODULE_1__.getMessaging) is not a function FirebaseError: Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app). These are the errors, I have got. Can you please help me to resolve this?

@piyushgargdev Год назад

It seems like you are trying to create a file with name that is conflicting with some package. Can you share your code please?