How To Send Push Notifications With JavaScript?
ฝัง
- เผยแพร่เมื่อ 18 ก.ย. 2022
- 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
![เจ้าผู้เดียว - ดิด คิตตี้ [OFFICIAL MV]](http://i.ytimg.com/vi/q0NLCYKBOTo/mqdefault.jpg)
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.
Thanks for the video 👍,
It is working fine in my react app
Tnx bro,i was looking for this from past 2 monthes,but didnt find exact expected result,really really tnx brother
Your Welcome Bro 👍
Love you brother. Keep the good work up.
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
very helpful video . appreciated...
Such a helpful Video Thanks
HI, v10.2.0 with sw Nextjs not working windows 10 but same setup working in MacOS. Are you know how to solve that?
thanks bro, But what you actually did on the chrome permission settings? from that it's not comming like a notification.
Can anyone tell me how to read notification sent in the browser. What is the use of onMessage method in firebase
can i use this in electronjs project as well?
Thank you, awesome video, I was having trouble with creating firebase-messaging-sw.js file in public folder, finally solved it.
Nice work!
@@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.
It's not possible using wordpress website we can connect with Firebase for push notification. Please assist.
underrated video
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?
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
best tutorial
Thanks for the video, great job
Dom elements are not accessible in this file can you help me out with this? Sir!
Hola! se puede enviar la notificacion directamente desde la app en modo admin?
Thank you sir
Lovely Video
How can i set Foreground notifications?
Means website open in active tab i need that time also notifications
Helpful! I recommend you guys to follow his tutorial if you doing this task,
very nice video
will this notification work even after the tab is closed?
In background
I'm not getting any notification, can you please help me. I did everything that showed in the video
Push notification comes but it is showing localhost:3000,how to change this?
hey piyush i am getting same notification twice can u please help me?
does it work on ios also?
how to give permission when we send data?
i didn't get notification
facing issue in version 9.15.0 bro
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
Can you paste your firebase config
I got two notifications instead of one after sending it from fcm
Benjamin thanks man i was so done with this you saved me , praise the lord maybe break some laws
Hello, I receiving the error importScript not found why this happening I did everything correctly..?
Don't worry, the code would still work fine. That's just an error from your IDE, not the actual error in your code.
thanks bro, this video helped me so much.
Glad to hear it!
amazing! video, but as per the test message it's working but when I sent notification it didn't showed up
me pasa lo mismo u.u
what if a user is using your application with multiple device then how token will work ?
You need to store all the tokens as an array in your database. Each token is unique to device.
ia ma getting this error care to explaing ?
ERROR
Registration failed - push service error
ERROR
Registration failed - push service error
Bhai simple JavaScript app or PWA app may kashe kre
add one more video to this playlist on firebase hosting
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
"web dev simplified" did a turorial on what you want to acheive .(on youtube)
@@riiadada5283 thanks
How to send notification in safari browser because it is not working in safari
Bhai mobile main notification send nahi kar raha hai please help
i have followed but not work
How to hide our firebase details...??
doing every thing right still it's not working at all
ya jo code end pa video skip kr k add kia ha kahan sy kia ha
Sir How to send push notification to multiple devices
why do you need initialize firebase in two files ?
Website mein kaise lagaye
export const app = initializeApp(firebaseConfig);
export const messaging = getMessaging(app);
Server Error
ReferenceError: navigator is not definedI
8:56 localhost:3000 wants to know your location🤣🤣
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.
Have you made firebase-message-sw file?
did you got any solution?
Not receiving notifications
unhandledRejection: FirebaseError: Messaging: This browser doesn't support the API's required to use the Firebase SDK
got the same error. Using next js
Hey, any solution?
M also using nextjs
hi, how to fix duplicate notifications?
hey did you find the solution?
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 .
why do you speak in your dialet?
Hi There, I feel more comfortable in speaking in Hindi, so thats why :)
Wrong video doesn't works
Very disappointing video, I came here to see how you have implemented this for the foreground notifications but you didn't show that
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?
It seems like you are trying to create a file with name that is conflicting with some package. Can you share your code please?
You have to use the getApps package to see if there are any existing apps instantiated.
does it work for iOS?