How to Add Push Notifications using Firebase | In ReactJs | To Boost User Engagement

hey everyone welcome to web Matrix in this video we are going to see how to implement the push notifications in a website or a react app by using Firebase so let's get started so first we have to go to firebase.com and then we have to go to the console and in the console we have to create a new project I'll name it as push notifications and I'll accept the Firebase terms and then click on continue so it's optional to enable Google analytics for the project so let's keep it enabled and click on continue and then accept the terms create the project so it will take couple of seconds to create the project so the project is ready now click on continue so now there are couple of features within the Firebase and we need Cloud messaging in order to use the push notifications so we click on Cloud messaging we want to integrate it on the web so we click on web over here and we have to register a web app we can name our app over here so I'll just name it as demo app we don't need Firebase hosting over here so we'll skip that so after you register the app this will take a couple of seconds again then it will give you a Firebase config so we we have to use this config in our app so now let's jump to vs code so first we will create a react tab so I'm using Create react tab for it then in the SRC folder which is created we will add a new folder which will name as notifications and within that I'll create a new file which is say fire base.js so we'll initialize the Firebase over here so I'll head over to the browser and we will copy this code and we'll paste it over here and we also have to add add one package which is mentioned over here which is Firebase let's do that so you'll see that there here they have initialized the Firebase using the config so we have initialize our app we don't uh need analytics currently so let me remove the analytics okay so while this is installing let's further proceed so we'll continue to the console and through this you can create a campaign so before we create a campaign we have to to take care of couple of other steps so let us go to the dots we also have to import get messaging in order to use Google Cloud messaging so we'll import this uh let's remove all the comments over here and uh we will initialize Firebase Cloud messaging over here so this is using this app instance and after that we have to configure the web credentials with the fcm so for that we will go to the Cloud messaging and over here we have will go to the settings project settings and in the Cloud messaging I click on generate a key pair so this gives us a ID which we'll further use now the key that we have generated over here is termed as VAP ID key or voluntary application service identification key and this will be used to generate the unique token for a specific device before we generate the token we need to Grant the notification permit so let's create a method in this method first we'll Grant the notification permission and we will make this method as ASN notification dot request permission and let's print the output also now we will call this method within our app.js so I use use def over here and we'll call this method on the Mount of our component first let's import that generate token and let's start our react tab we need to import the use effect as soon as the browser starts it will ask for the permission um and let's open the console so if we allow this then the permission is granted and suppose we reject the permission we don't allow it then it will print as denied so let's Grant the permission because we need the permission in order to generate the tokens so we have granted the permission and after that we need to generate the token so in order to generate the token we will import this get token method from Firebase messaging and this this is also an async method get token so first it accepts two arguments so the very first argument is the messaging instance and the second one is the options so we'll pass this messaging instance Cloud messaging instance and in the options we have to pass that VAP ID key that we have generated from the Cloud messaging console so this is the key that will pass over here and this will give us a token and let's print that token as well so we'll put a condition over here that if the permission is granted then only we'll be able to generate the token now if we open the browser then uh we'll see an error on the console where it's trying to register the default service worker and it's unable to find this file so this error is expected and we just have to add this file fbas messaging S.J in our public folder so let's go to the public folder and we let's create this file so we'll just create an empty file currently and uh then we'll revisit Vis this later so as soon as you add this file you can see that the token is currently generated uh now we'll move to the next step now in order to receive the message in a JavaScript client or a react app there can be two scenarios one is when the tab is in the foreground like the current tab we are seeing the second scenario can be that your app or your tab is in the background so either the tab can be h then behind other tabs or the tab can be completely closed so in these scenarios your app is in the background so if the app is in the foreground then we have to use the on message method and if the tab is in the background we have to use the on background message and this will be handled with the help of service worker however the foreground notification will be handled by our app itself so let's handle a scenario when the app is in the for round so for that we will import port on message method from Firebase messaging this on message method is always triggered when a notification is actually sent by the Google Cloud messaging so we will provide a Handler over here and this Handler will receive a payload and currently we will just conso log the the payload and we have also exported messaging from notifications filebase so I have exported this messaging instance which we will need over here so we'll need this to pass this messaging instance on the on message method and the second argument will be a call back or a Handler now let's set up our service worker in order to receive the background messages so we'll copy this code where first we are importing the scripts this is the Firebase core and this is a Firebase cloud Cloud messaging and then we are initializing our app using the same config we had used in the fire base.js and we creating a Firebase messaging instance and then we are adding an on background message listener that will listen to the messages in the survey worker so first we'll copy this and we'll replace this config with the same config that we had used before the messaging instance is created over here and then we'll add this on background message so here we are first printing the payload and then you can customize the message if you want over here and this will send the notification to your operating system So currently I'm using Windows so it will show a global Windows notification so instead of this type title we'll use the same title that we are sending so that will be payload do notification do title and instead of this body we'll use payload do notification. body and in the iton we'll use the same image that will'll send which is payload do notification. image and we'll pass in the notification title and the options over here now let's test the push notification so in order to test that we'll again need to go to the consoles we'll go to the messaging in our project and you have to click on create your first campaign so we have to select the Firebase notification messages in app messages is only supported in Android and iOS it's not supported in the web we'll select this click on Create and then here you can enter the title The notification title so I'll name it as notification 1 I'll say that this is a test notification and you can also add an image over here so I'll choose a sample Firebase image we can choose any image and on the right hand side it will show you how how it will look in the initial state it will look something like this on the Android and the apple and in the expanded view it will look something like this then if you hit on the send test message then the notification should be shown so let's click on the send test message and we have to add the FM registration token over here I'll go to the console and refresh it so this is the token that we have to use so add this token so ideally this token is send on the server site so as soon as the token is generated this is sent to the server site and the notific is triggered via the fcm apis from the server side but currently we are testing it directly from the Firebase dashboard so we are entering this token over here and if you click on test that tab is not active so it's showing the notifications over here the notification title there's a test notification and then the link is present over here and if you click on it then then that specific tab will get active if the notifications is not working for you on Windows then ensure that the right settings are enabled so go to the settings system and go to the notifications ensure that this notifications is enabled and go to the notification from apps and other senders search for Google Chrome over here and click on that ensure that the notifications is turned on and also these check marks are enabled show notification banner and show notification in the control center if you're still facing the issue then you can check out this link which I'll add in the description there are couple of other tips that are mentioned which can help you out now in order to test the foreground message we'll split the screen into two halves and on the right hand side our tab is currently active We'll add a deburger inside the on message method and we'll trigger a new notification so I'll make it notification to send testt message and you can see that currently the Handler of this on message method is triggered and if we check the payload then currently it's printed and inside the notification you can see the notification content title body and the image and we can use this object in order to R render a fancy notification over here we can also send the push notifications via Firebase using the rest API so here example for that so you have to use this URL where you have to add the Cloud messaging project ID and you have to provide the Firebase access token for that and this a message in which this is the device token and this is the notification message in order to show a beautiful notification in your react tab we can integrate react hot toast so we'll have to install this package npm install react hot toast and then we will import toast and toaster from the react hot toast so let's import that and whenever we need to trigger the toast we'll have to call this method and we'll have to pass the message we can also pass a react component over here so for now we will just pass the notification body which is payload do notification. body and we also need to add the toaster to our component wherever we want it to render it so we'll add it directly over here and when we trigger a notification so let's trigger it now you can see that this is a test notification so the notification is rendered over here and you can use the other apis of the react hot toast if you want to have a cross button if you want to show certain item over there so you can add all those customizations on your notification after you have tested the notifications then as a Next Step you can choose the target which app you want to Target then you can select the scheduling when you want to send the notification whether it's now or you want to schedule it to some other date and you can also choose the time then you can send some analytics labels to this push notification so this is used for the analytics and then you can also send some custom data so you can also send it over here in the form of key value pair and after that you can publish the notification so once you publish the notification then the campaign will get created and you can see this dashboard it will show you the stats of the send Impressions and the clicks so that was about this video If you face any issue then add a comment we'll reply as soon as possible and help you out if you're new to the channel then hit the Subscribe button like the video to support us thank you for watching

Channel: Web Dev Matrix

Views: 3,783

Keywords: firebase cloud messaging, push notifications, firebase, reactjs push notification, push notification, firebase cloud messaging android, firebase cloud messaging flutter, web push notifications, how to send web push notifications, firebase push notification, firebase notifications, notification, firebase android notifications, firebase tutorial, web notifications, react js tutorial, google cloud messaging, push notification on website, javascript push notification, service worker

Id: IK8x7qc9ZsA

Length: 17min 51sec (1071 seconds)

Published: Sun Dec 03 2023