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

Hello friends welcome back to the new tutorial of the react and the Firebase today we are going to learn how to send the push notification for the browser using the Firebase in react those who haven't subscribed my channel yet please do subscribe my channel and if you like the video please do like share and comment on my video so let's get started so here you can see that I I need to send this Firebase notification from the fireplace to the react application look see how we are going to do that so here we have the token which is there okay and it will just pass the token SM token over here add this and paste let me add this hello world R2 send this text message add this fcm again okay okay the currently the power messaging a problem occur while unsubscribing there is any error they are coming let me see this one but here it's not there let me unload then again allowed permissions granted that this is unsubscribing let me check this one let me rebuild this one now we have to check now the token is there now let me add this token to the fcm so let's test this and here we get this notification part okay so notification part is coming so how we are going to implement this one in the react on the Firebase let's have a look on that one okay so first of all you have to go to the Firebase so let's go to the Firebase create a new project so I'm going to add a new project over here okay so you have reached the limit of your account you can add the fireplace to an existing project or increase the limit okay so we will switch the account we will switch the account of mine this I'm gonna here do we don't have the projects okay so let's create a project Firebase notifications okay so we have I accept this one confirm this then continue okay so um let's go and continue with this one leave all this except create a project so it will creating the project okay the project is ready let's go and continue with this one so here we have the Firebase okay then we have the web so here we are going to add our web notifications install this app okay so here we get all the details okay whether you want to copy or we will get it from this console go to the project settings okay then we have a Cloud messaging everything is here Cloud messaging API is disabled and it is not generating web push notification you also need to generate this key pair okay because in the last we have to use this one okay then you have to check the journal settings and here we have all the details of that one so you need to use this details when we have the Firebase okay so here we have a fireplace first of all in this folder structure okay then we have a source in the source we have a components that is notification.js so basically it's just you can see the toaster okay so here we have a react you state and use effect from the react toaster you don't need to install this package I'm not using this one so here we have the Firebase file so here we have the config file of all the details okay so make sure this all the details that is coming from here so this one right you can see that okay so make sure all the details you have to paste it from this file it is which is coming from here the project settings okay project settings on the journal you will get this details okay just copy and paste this one and here we have to initialize the Firebase and the get messaging app so first of all we have to request permissions whether you want to allow the browser notifications or not so this is basically the request permissions for along the browser after the permissions equal equal to granted okay if it is granted the notifications has been granted and we have to pass you have to get this token by with the help of this okay token messaging rapid key so where it coming from the rapid key is coming from here if you have you have to go with this one Cloud messaging okay so here we have the key so you can just copy this one So currently you can see copy this one and just paste it in your file okay so this key is getting from here so next step this is done you will get the current token okay otherwise it will show you there that failed to generate the app registration or error has been occurred to receive the token with that error okay else the user permission denied okay then we call the request permission on message listener this is the event okay on messaging we have to send the payload to get the receive the notifications so whenever we send the notifications we will receive this one okay this is firebase.js file complete file then we have a app.js file where we have the notification component which we have created this one okay so in the notification component we have used the you request permissions from the Firebase okay and after the request permissions we have to just on message listener payload we are sending the title and the body okay cost unsubscribe okay and here we have to unsubscribe return cash Adder consoled if there is any error okay then we have to return the toaster to send the toast notification with body and the title okay then notification component so these are this is the main file the notifications app.js okay fireplace.js right so on the behalf of it it will work next thing that I think we have to also send the notifications using the fcm Google so let me try this one also so here we have to go with the react application so I need to copy this token and try to send this token also here we have the body so let me add this token okay so here we go with adding this two let's try to send this one the notification is sent success one and here we have to get this notification let me check this one where the notifications app.js is coming from here you can try this one where we have the notification.js file let me enable this one also the total post notifications also is coming at that moment so let me restart this so here we have this this one success means it's ending right and if I go and just add this token again so I need to switch the account over here So currently which account is showing over here we have the phone number we have the messaging new campaign notifications I'll send it at this FPA CM send so it's coming okay so this is how we are able to send the push notifications in with the help of the Firebase and the react any doubt any query in that just let me know in the comment section make sure you have the user token to send the notifications if you don't have the user token this app will not going to send the notifications to your browser okay so this is how this is the way that we can send the push notifications to your browser any doubt any query let me know in the comment section thank you so much for watching this video have a great day

Channel: Technical Rajni

Views: 9,158

Keywords: firebase, react native push notification, firebase push notification, push notifications, react push notification, firebase push notifications, react native push notification firebase, push notification react native firebase, react native firebase push notification, react native push notifications, react native notifications, firebase cloud messaging, react, push notification, notification react native, react native scheduled notifications, react native

Id: 9EAgvpWujsw

Length: 10min 47sec (647 seconds)

Published: Tue Aug 01 2023