Push notifications with React and Firebase | Firebase Push Notifications In React

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/N4N0...
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 !!!

[@shadmanfatin777]

Thank you for teaching us. Very difficult stuff. You are a genius bro. May you go a long way Insha Allah ♥♥♥

[@TechnicalRajni]

Thanks 😊

[@ArtLifeDev]

Firebase messaging required HTTPS to do that ?

[@kanchankothar6411]

you should share code as well bro

[@muneeburrehman7761]

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?

[@TechnicalRajni]

My code is also on http

[@ArtLifeDev]

I also encountered this issue. Have you resolved it? If so, could you offer some advice?

[@navaneethdevan-t3y]

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

[@TechnicalRajni]

I need to check

[@yousifmobark6981]

i want to pass json data from the server and receive it and make some logic later how to do it

[@TechnicalRajni]

@@yousifmobark6981 make a key data pair and react will use that key

[@abufaishal5753]

are you generating token everytime website loads ? and if yes then can you tell me the reason why ?

[@TechnicalRajni]

No why token will be different while reload

[@shreyashjain1475]

Will this work with react vite

[@TechnicalRajni]

@@shreyashjain1475 yes

[@shreyashjain1475]

@@TechnicalRajni actually some process has been updated please check and make the updated video

[@TechnicalRajni]

@@shreyashjain1475 ok kay

[@mansigupta549]

Firebase messaging is giving error that it's unable to register th default service worker, what should be done at this moment

[@TechnicalRajni]

Service workers should be registered to get notification

[@abufaishal5753]

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

[@TechnicalRajni]

May be you are not sending notification to both check both generated token

[@ShrinjoySaha-c4z]

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"

[@TechnicalRajni]

You need to check the keys properly

[@ShrinjoySaha-c4z]

This issue was fixed after adding the service worker to the public folder. But still did not get the notification.

[@TechnicalRajni]

Which browser you are checking 🤔

[@ShrinjoySaha-c4z]

@@TechnicalRajni Chrome and firebox both.

[@HamdaouiWassim]

@@ShrinjoySaha-c4z if u still have this error just create a file named "service-worker.js" on your public folder

[@shadmanfatin777]

Bro can you pls tell where can i get the official documentation of this fcm for reactJs?

[@TechnicalRajni]

No official documents

[@shadmanfatin777]

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

[@TechnicalRajni]

@@shadmanfatin777 when you get notifications just add redirection click

[@shadmanfatin777]

​​@@TechnicalRajnii dont know how to add redirection click to a notification :/

[@Jefferson4026]

The api fcm need autorization value , what is that? Im your video doesnt show

[@TechnicalRajni]

Yes it requires let me check

[@javhaasuhochir8126]

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?

[@TechnicalRajni]

What you want to achieve

[@javhaasuhochir8126]

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

[@BasimKM]

show error The script has an unsupported MIME type ('text/html').

[@TechnicalRajni]

Need to check or you can check settings

[@bezerrac]

i got the same message, so the code cant generate a token, did u resolve then?

[@biaali4590]

If you are using reactjs add service worker file in public folder

[@HuyChanel1415]

@@biaali4590 How to add service worker file in public folder, please.

[@biaali4590]

@@HuyChanel1415 do you have firebase-messaging-sw.js file?

[@MMCGlobalPCAA]

i m getting notification on every browser but not in safari

[@TechnicalRajni]

I haven't check on safari

[@ITSUPPORT-u9j]

Man I watched all this just for you to show me that you are sending a notification directly from their test form? you serious?

[@TechnicalRajni]

What happen

[@ITSUPPORT-u9j]

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

[@TechnicalRajni]

@@ITSUPPORT-u9j ohh I need to update the tutorial then

[@rajeevkumarsingh1718]

If it’s not working using using Google api then it of no use for me

[@TechnicalRajni]

It will work with fcm

[@afsalafzi6600]

Can we send notification using nodejs

[@TechnicalRajni]

Need to check ✅

[@rfryanfavour4369]

BRO DELETE SOME OF YOUR FIREBASE DEMO PROJECTS PLEASE DONT KILL GOOGLE FOR US... ANY WAYS THANKS FOR THE TUTORIAL

[@TechnicalRajni]

Why I will delete something wrong 😔

[@Anonymous-v3j2d]

Hi can i get the code also which version u r using

[@TechnicalRajni]

"firebase": "^9.22.0",

[@sinistergaming513]

caN YOU PROVIDE THE GIT HUB LINK FOR THIS

[@TechnicalRajni]

Any issues you are facing

[@sinistergaming513]

@@TechnicalRajni yes triggering notification on the fire base using my fcm tocken is not toasting the notification on the app

[@TechnicalRajni]

@@sinistergaming513 check that token with firebase notification coming into the console

[@sinistergaming513]

@@TechnicalRajni yeah i fixed it....idk why but when i tested on edge its qorking....something issue with the chrome i think

[@ZuhaibSubhanRayan]

hi there, i need the sample code ? can you share me github link ?

[@TechnicalRajni]

Yes sure but you need to try first if any issue then sure I will share ☺️

[@fahiyangtech]

❤

[@TechnicalRajni]

Thanks

[@olanazly4412]

how to subscribe To Topic with react and firebase?

[@TechnicalRajni]

Didn't get your point

[@olanazly4412]

I want to send multiple devices from firebase and subscription topics

[@olanazly4412]

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

[@abhilekhsingh8463]

plz share the code

[@TechnicalRajni]

what issue you are facing ?

[@react.dev.28]

I want react code

[@TechnicalRajni]

Please let me know any issue u are facing

[@saint115io]

i can't understand u video bro

[@TechnicalRajni]

How can I help you?

[@cyberaakash-k4q]

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.

[@TechnicalRajni]

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

[@cyberaakash-k4q]

@@TechnicalRajni i can understand why you are not sharing the code, but see atleast show the code clearly.

[@cyberaakash-k4q]

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.

[@TechnicalRajni]

@@cyberaakash-k4q no issue I will definitely work on it thanks 🙏

[@cyberaakash-k4q]

@@TechnicalRajni do you have any group or chat?