How To Send Push Notifications With JavaScript?

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.c...
Quick Links
► Firebase Console: firebase.googl...
► Firebase Docs: firebase.googl...
► Firebase Cloud Messing Docs: firebase.googl...
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/codewithp...
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

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

[@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 👍

[@office-jayukani]

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

[@RamB-p3q]

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

[@afzalguru643]

Very Helpful video brother

[@sayantabhattacharjee9808]

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

[@a_13_balaji_k44]

Thank you so much , this video works for me , without errors.

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

[@AmmadAhmed-ou9bp]

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

[@MuhammadAyaz-gp7xd]

Love you brother. Keep the good work up.

[@MuhammadUmar-w8g8q]

very helpful video . appreciated...

[@sunnyy6295]

can i use this in electronjs project as well?

[@sagarghosh123]

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

[@MaheshGitte-sp2zi]

I create using node.js & react but problem is eatch notification shows 2 times

[@tarunjha3242]

maybe react is in the strict mode change it to the normal mode and try again

[@chandreshsolanki7580]

Can you please give me the code for react and node

[@tarunjha3242]

@@chandreshsolanki7580 sorry can't gave the code because i implemented that code in company projects

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

[@shitalchavan5538]

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

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

[@DEVILGAMING-tj1ee]

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

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

[@intelligentperson2447]

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

[@gracemathew61]

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

[@mausoofnawazish134]

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

[@timetopass23]

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

[@CHIRAGARORA-gj4cr]

very nice video

[@mbh604]

thank you so much

[@Adnanmegzel]

best tutorial

[@mohammedtaha3217]

Lovely Video

[@techknowledgebase4504]

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

[@buntyswain]

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

[@manojpoojary]

Thank you sir

[@jairoandresguevarajulio571]

Thanks for the video, great job

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

[@pratikgosavi7341]

does it work on ios also?

[@pushpajitbiswas3752]

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

[@himankgaming7555]

how to hide api keys in firebse service worker?

[@Codebyakshay]

ia ma getting this error care to explaing ? ERROR Registration failed - push service error ERROR Registration failed - push service error

[@Anythiny]

add one more video to this playlist on firebase hosting

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

[@zanhbenz]

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

[@weekendplayer442]

got the same error. Using next js

[@Anjalisinghattri]

Hey, any solution?

[@Anjalisinghattri]

M also using nextjs

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

[@christmbuli5438]

Merci énormément !

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

[@muneeburrehman7761]

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

[@AbdulKadir-sq4mf]

Very good vedio

[@Chawan-dog-kennal]

Bhai simple JavaScript app or PWA app may kashe kre

[@victorferreira2742]

does it work for iOS?

[@imtiyaz9331]

Sir How to send push notification to multiple devices

[@princerajput6709]

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

[@MaheshGitte-sp2zi]

I have same problem, of you have solution let me know

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

[@simba6510]

thanks bro, this video helped me so much.

[@piyushgargdev]

Glad to hear it!

[@shivamkumartripathi3052]

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

[@AnibalGutierrezYoSoy]

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

[@SanjayNG125]

How to hide our firebase details...??

[@mawaisnabeel]

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

[@pulkitjain5159]

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

[@roshankumar-um9he]

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

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

[@optymystyc]

You have to use the getApps package to see if there are any existing apps instantiated.

[@axioluxe]

i have followed but not work

[@sagargunjal1590]

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

[@MaheshGitte-sp2zi]

Hi bro you solved this let me know, i have same problem

[@roshankumar-um9he]

facing issue in version 9.15.0 bro

[@weekendplayer442]

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

[@Ediflex2]

Website mein kaise lagaye

[@sandeep_jadaun]

Hlw sir ek help chahiye

[@IlhamYusron-t6o]

hi, how to fix duplicate notifications?

[@davydavydavy05]

hey did you find the solution?

[@ThanHtutZaw3]

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 .

[@ShrinjoySaha-c4z]

Not receiving notifications

[@geovajonnathacorreia559]

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