How to send firebase push notification in React| React push Notification |Firebase push notification

[Music] you hello everyone welcome to our video in this video I'm going to show you how to implement 5s boost notification in your react application so let's get started so before starting make sure that you have already installed no JSON in PME new system so open your terminal and right in the X space create - react - app and your app name in this case I'm giving my half name as firebase - cloud - message and place enter and it will take some time to install all the dependencies after that in to write your ethnic CD space your rational to enter inside your app directory so write CD space firebase - cloud - messaging and then write code space taught to open text editor into the same directory so I'm using OBS Korea now open your terminal inside PS code and you can also use the default emblem and write npm space install space firebase to install the Pharos dependencies univer project so after completing you have to go inside ssed actually and inside is a CD actually you have to create one file that is 5s DOJ's so here I'm going to put all the configuration of virus so inside 5s DOJ's you have to first import that dependency of virus so write import 5s from fibers and then write Const and create one object for configuration so right first config equals 2 and here I had to paste all the configuration keys values okay so open your browser and go to 5 s dot google.com and go to console and make sure that you have already assigned gain beside the firebase so here you have to add one more project and you're right to give the project name so I'm giving the project name as files - cloud - messaging then click on this blue button and turn off this annex part because you don't need that and then click on that button again alright now click on that button and this type of window will open and as you are going to went in your website click on wave icon and here again you need to give your application name that is fire waste ash cloud - messaging so write that and pick on this pattern and after clicking on this button one configuration file you generate or you can say one script will be generated inside your script you can see all the API key messaging sender ID and all and you have to copy this thing and just go inside your code again and paste it here ok now what you have to do you have to initialize that config so dry fibers dot initialize app and pass that config object and finally export it as default so write export default and I have to export as files so write x 4 2 4 5 now save it and go inside Abdo JS file and at first delete the whole thing because I'm going to implement as classful component so I'm using ones shortcut here for the S code so now write constructor and it coughs here and call the super while so props and then write these just it and keep it as empty and I don't know if I had to use it or not and in theory you need to write component it mount okay well I drew first import virus inside this app touch install so right input virus from brought / virus because it is inside a CMV actually a five is five now right Const [Music] messaging and [Music] a sine curve s dot messaging and then right messaging dot request permission and it will return one promise so I thought in and then one callback function and it will populate the token I guess so right return messaging dot get token and then right dot then and then again one callback function so I think I can get for the token here so I broke in okay so yeah I'm just I will just show you inside console throw right console dot log and first just write token and then just pin that token okay now save it now handle also though here so right god catch for that so I got catch and again it will take one all the fashion and just lock something error like a lot okay now save it and again go to your public directory and he ready to create one file so inside your uplift a actually you have to create one final m5s - messaging - mr. blue dot Jace and here this file will work as a service worker so here to write these two lines and it will control EEP operate from my project and I will keep the link of this project in my description Egyptian you can check it out so after that to write five is not initialized up and go to your fiber such as well and just copy the sender ID key and paste it here okay so now right wanst in it messaging equals to five s dot messaging okay now save it and open your terminal again he said he has good and light NPM space start to start 30 X server so click on this this button and if you go to the localhost he throws input you can't see anything because I haven't written dirty but you know if you want to render anything you can so if it go inside your console you can see that is one token token is there so you know to just copy it and go back to your service console and if you scroll down you will get what option that is cloud messaging and click on send your first message and here if you feel like guests or whatever is you need to write here so just click on this button and it will ask for that particular token so paste that and click on this plus icon and finally click on send and here you can see that the one push notification is there so that's it for today hope you have enjoyed this video please click on the subscribe and like button if you like this video thank you [Music]

Channel: AVDojo

Views: 71,325

Keywords: firebase push notification, react push notification, firebase cloud messaging, react cloud, react cloud messaging, react notification

Id: PCYmdHpPLUs

Length: 9min 42sec (582 seconds)

Published: Thu Apr 09 2020