Push notifications with React and Firebase | Firebase Push Notifications In React
ฝัง
- เผยแพร่เมื่อ 31 ก.ค. 2023
- How to Implement Push Notifications in React Using Firebase
Sending Push Notifications by Using Firebase Cloud Messaging
Push notifications with React and Firebase
Firebase Push Notifications In React
Sending Push Notifications by Using Firebase Cloud
Firebase Push Notifications In React
Please do like share and comment if you like the video please do hit like and if you have any query please write it comment box
NestJs Tutorial • How To install Nest.js...
You can support me by buying a coffee for me
ko-fi.com/N4N0JZBBN
Please do subcribe my other video tutorials
React Native Tutorial : • SDK location not found...
ReactJS Tutorial : • Setting Up React Local...
Linux Tutorials : • How to Increase File U...
Jquery Tutorial : • What is jQuery
Html & Css Tutorial : • Introduction to HTML5 ...
Wordpress Tutorial : • How to install wordpre...
Javascript Tutorial : • JavaScript Hello World...
Magento 2 Tutorials : • How to remove a MassA...
Github Tutorials : • Why version control? |...
October CMS Tutorial : • Builder plugin - Octob...
Bash Scripting Tutorial : • Shell Scripting Tutori...
Jenkins Beginner Tutorial : • Jenkins Beginner Tutor...
Apollo Client React Js : • Apollo Client React Tu...
Wordpress Tutorial In Hindi : • What Is Wordpress? - E...
MongoDb Tutorial : • How to Insert a Docume...
Bootstrap 5 Tutorial in Hindi : • Bootstrap 5 Tutorial i...
Xero Tutorial For Beginners : • Xero Tutorial For Begi...
React Material UI = • React Material UI - In...
Thanks for watching
Vue Js Tutorial : • Install Vue.js in Ubun...
Angular 14 Tutorial : • How to install Angular...
MongoDb Tutorial : • How to Insert a Docume...
Mysql Tutorial For Beginners : • How to connect to MySQ...
AWS Tutorials: • How to Create S3 Bucke...
Php Tutorial for Beginners : • How can I send an emai...
Nest
Have a Great Day !!!
![Deploy a Django web app to Vercel [FREE]](http://i.ytimg.com/vi/ZjVzHcXCeMU/mqdefault.jpg)
Thank you for teaching us. Very difficult stuff. You are a genius bro. May you go a long way Insha Allah ♥♥♥
Thanks 😊
I am unable to receive foreground notifications on my react app since it is over HTTP, I want to add ngrok as the callback URL in the FCM. How can I do that?
My code is also on http
i can only see the changes when i click the save button after i come back to vs code ,if i visit any other page then the notification wont work i need to press the save button again in the vs code .what is the issue
I need to check
in my project i am allowing user to install multiple pwa and for each pwa app i am generating new fcm token once and everything is working fine but for android the case is
when i install 2nd pwa and generate token by allowing permission then the first pwa is not receiving notification do you know reason why ?. for ios both pwa receiving notification
May be you are not sending notification to both check both generated token
Hello. when background message received I want to change a context state. but since background message listener is in the public folder I cannot do anything normally do in src folder. Is it available to do that?
What you want to achieve
@@TechnicalRajni i have a sidebar. in it there is a Notification section and it has badge(that counts new messages). and that message variable is in a context. i should update that context badge variable.
are you generating token everytime website loads ? and if yes then can you tell me the reason why ?
No why token will be different while reload
i want to pass json data from the server and receive it and make some logic later how to do it
@@yousifmobark6981 make a key data pair and react will use that key
❤
Thanks
Firebase messaging is giving error that it's unable to register th default service worker, what should be done at this moment
Service workers should be registered to get notification
Hi can i get the code also which version u r using
"firebase": "^9.22.0",
If it’s not working using using Google api then it of no use for me
It will work with fcm
Bro can you pls tell where can i get the official documentation of this fcm for reactJs?
No official documents
@@TechnicalRajniwhy not?! 🥺 i want to apply features like when user clicks on the notification, it will redirect to the website. How can i do that?
@@shadmanfatin777 when you get notifications just add redirection click
@@TechnicalRajnii dont know how to add redirection click to a notification :/
BRO DELETE SOME OF YOUR FIREBASE DEMO PROJECTS PLEASE DONT KILL GOOGLE FOR US... ANY WAYS THANKS FOR THE TUTORIAL
Why I will delete something wrong 😔
Getting this error: "An error occurred while retrieving the token. FirebaseError: Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker for scope"
You need to check the keys properly
This issue was fixed after adding the service worker to the public folder. But still did not get the notification.
Which browser you are checking 🤔
@@TechnicalRajni Chrome and firebox both.
@@user-pt3oi4wp7w if u still have this error just create a file named "service-worker.js" on your public folder
Can we send notification using nodejs
Need to check ✅
Man I watched all this just for you to show me that you are sending a notification directly from their test form? you serious?
What happen
@@TechnicalRajni I don't want to use firebase test to send notifications, I want my notification box to appear whenever my user posts something, you don't show us how to send title and body to firebase so that it notifies my users.
@@user-hy2sr9wi1p ohh I need to update the tutorial then
The api fcm need autorization value , what is that? Im your video doesnt show
Yes it requires let me check
show error The script has an unsupported MIME type ('text/html').
Need to check or you can check settings
i got the same message, so the code cant generate a token, did u resolve then?
If you are using reactjs add service worker file in public folder
@@biaali4590 How to add service worker file in public folder, please.
@@HuyChanel1415 do you have firebase-messaging-sw.js file?
hi there, i need the sample code ? can you share me github link ?
Yes sure but you need to try first if any issue then sure I will share ☺️
i m getting notification on every browser but not in safari
I haven't check on safari
how to subscribe To Topic with react and firebase?
Didn't get your point
I want to send multiple devices from firebase and subscription topics
Messaging: This browser doesn't support the API's required to use the Firebase SDK. (messaging/unsupported-browser).
in mac mobile i get this message
how to fix this ?
@@TechnicalRajni
caN YOU PROVIDE THE GIT HUB LINK FOR THIS
Any issues you are facing
@@TechnicalRajni yes triggering notification on the fire base using my fcm tocken is not toasting the notification on the app
@@sinistergaming513 check that token with firebase notification coming into the console
@@TechnicalRajni yeah i fixed it....idk why but when i tested on edge its qorking....something issue with the chrome i think
I want react code
Please let me know any issue u are facing
plz share the code
what issue you are facing ?
i can't understand u video bro
How can I help you?
bro you are making hard to see the code. why cant you just share the code. Anyway in this video, after you send the post api through postman, no notification is received in your video itself. you are just making us fool to watch the complete video. But the actual output is none.
Okay I am so sorry 😔 I will upload full video again with all your doubts related to code not showing and all then you can check I have video regarding nextjs 14 firebase push notifications you can also check
@@TechnicalRajni i can understand why you are not sharing the code, but see atleast show the code clearly.
i want to send push local notification using react and firebase cloud messaging. Could you tell me which video should i watch to make it work.
@@user-ss1ji9kw6m no issue I will definitely work on it thanks 🙏
@@TechnicalRajni do you have any group or chat?