Ionic 7+ firebase push notifications for android

Hello friends welcome to coding techniques again today I'm going to teach you how to work with the Firebase push notifications in our Android application so let's get started so as you can see here we are into the capacitor.js.com where I am into the push notification plugin one in which this is how we are going to install the push notifications while we don't need to work anything into our browser this time we directly going to jump into the Android Studio so this is my application which I have just created a new application which is the Standalone one you don't need to work with Standalone or anything else it's the same stuff only but little bit changes are there so you don't need to worry about anything whatever I'm going to show you just need to implement that that's it now I'm going to install this plugin here by using this command okay once that will be done the second command we need to install and we are good to go to work with the other stuff the I'm not going to cover up iOS in this particular video but we are going to work only with the Android one so this is done now I am going to run ionic build in order to run the next command because it's going to create the www folder which is very much necessary to work with the Android and iOS one so now this is really and I'm going to run the next command npx cap sync or you can also run ionic capsync 2. let me hit that it's done now before running anything else I am going to go to capacitor config.ts file here well I'm going to change the package ID and all of the stuff which is necessary for creating a new project or working with the Android one or iOS otherwise you need to change it later on that's completely up to you how you want to do that so my package ID that I am going to pass will be this particular one let's say com.technics DOT test push okay fcm is fine fcm let's say app or anything whatever you want you can just pass it here but it should be unique and in a reverse manner you need to pass it I have already taught you this stuff I think a lot many times so I'm not going to cover up in depth about this let's go to our package and see what else we need to do in the Android one we are going to see that in a moment but before going to that I need to add something in my capacity.config.ts file so I'm going to just copy this thing okay and get back now after this server I'm going to paste this particular stuff that's it so this is the configuration which we need to apply for push notification one it's going to allow you to play the push notification sound and everything okay so this is done now all right what next we need to work with well silent push notification data only before IOS and Android okay there are a few common issues also which we are going to just check one by what let's go to our application and create some services in order to work with the Firebase push notifications features which are shown here for Android Droid and iOS also it's going to be the same stuff but we are going to implement few of the things in the listeners one where is it actually listeners are available this is the one we're going to implement this listeners here okay and we are going to check whether this works or not basically the register one we are going to check whether the token is getting registered for the push notification one or not okay we are going to allow the permission or request the permission for push notification and these are the listeners by which you can track the data also but we are not going to go in depth of this data here let's go to our front end that pins the application and create some Services because I am going to cover up all these things in this Services once so ionic G service within our services folder which I will which will be created automatically within that an fcm folder where I'll have the fcm service let's create that now this will be created here okay you can see we have the app CN service created and in the home page I'm not going to do anything if you want well you can simply change it to push notifications what we are not going to look into that okay and you can simply clear all these things if you don't want anything out of here okay in this manner CSS also you can simply clear it you're good to go if you don't touch that also still it is fine now within this service what am I going to do I'm going to implement all these features here okay so let me just copy and paste few code this is the code which I'm going to just Implement don't focus on the errors I'm going to explain you this is basically for the storage one which I'm just going to create in order to save the fcm token that we will be getting on register so at first what I will do I'll create a function called init push in which I'm going to check for the platform if the platform is web then I am not going to register anything because this is not going to work in web in PW you can work with that but that's the different stuff we are just focusing on the Android one ready spy if it is Android or iOS also still it will work if you're working there okay that's what I have done and within this registered push what I've done I'm looking for listening to all the listeners in this particular function add listeners one and then I am checking the permission if the permission is prompt then I am just going to request the permission and move ahead if it is not granted then I am going to Simply throw an error okay that's what I'm doing that's it because if the request permission is denied definitely you don't want to go ahead right all right so if everything is good to go then you are simply going to register this push certification in your Android device and then you're good to go you will get a token there that's what we are going to learn in this particular function which is called register function okay now what does register function do let me just show you this is the one so this is the register function which is registering the app to receive push notification okay and you can unregister also using the unregister function so everything can be done here now let's get back and look into the other functions which we have here one is the gate delivered notification in which you will get the delivered notification whichever notifications are delivered even get those list and you can just check that also with this with the help of this particular function I'm not going to use that function anywhere you can just check this out I have not paused it if you want you can pass it here okay and get the a list of all the delivered notifications fine after that the most important one is the add listeners one if you are going for registration one you will get this listener to be called okay where you will get a token and you are going to get the value of that particular token in this particular manner because this is the token that we are going to write within that the value will be passed all right and I'm using a variable here which I'm setting it to one you can just set true or false whichever you want to now if the value is available then I am simply going to get the value from the Save token means I'm just checking here whether you have a previous saved fcm token or not so what happens is when you're registering for the first time you are going to save that token into the registered one that means a local storage one and if it is already available then we are not going to register it again we are simply going to skip that part that is what I I am going to do here and for tracking it down I'm just looking at the storage one whether this is available or not so if the save token is available that means we have some token there and I am going to check a condition that a save token which is saved there if it is equals to equals to the fcm Token that we are getting then we are simply going to say that we have the same token all right and we don't need to do anything otherwise we will have go equals to 2 and if it is same then we are setting go equals to zero now why I am doing that because we have a condition here if go equals to equals to 1 then only I am going to set the fcm token otherwise I'm not going to do that and if it is 2 then I am simply expiring the earlier token means I'm setting it in this particular manner in order to update the token because we will be getting the updated token if the token is expired fine so that is what we are going to do here now let's create another service for our storage one quickly so I'm going to do the same stuff except this is going to be storage slash Storage storage okay so this is also created here let's check it out this is our story service in which I am going to have this particular code here which you I think you already know about it so within this we are setting the storage we are getting the storage we can remove this storage also clear storage and gate token these are the functions which I have already created and I've explained you many times in my previous videos so let me just give it up type string because or let me just keep it off type any I think okay but it will be a string format only the key so I'll pass it as a string here in this manner fine and the value will also be in a stringify format so you can simply pass it but I'll keep it as any because I don't want to take any risk here fine once that is done I don't think we have any more errors here yes we do one error is here which is for the preferences one so we need to install this particular plugin also which is available here preference is one which is related to storage one okay and you can use two kinds of storage here one is the native one also I think with the index DB1 which is available where let me just show you you can just check this out okay you can use the index DB1 here using the native storage but by default capacitive storage will be used where you will have the local storage one okay so let's implement it here now I'm going to run npmi then this preference is one okay the ones that will be installed the Linux command that we need to run here is this particular one npx capsync okay once that will be done everything will be good to go and we don't need to do anything here I don't think so anything needs to be done so I'll jump to the push notification again and look into the Android one so this is done npx capsync I'm just going to run here everything is good to go in the fcm service I have an error here why is this coming up okay it is saying that the argument of type string or null is not assignable to parameter type string so in order to get rid of this error you need to return the proper type here okay so let me just pause it of type any so it is going to return any value all right so that's what you're going to get because it's not going to be string it's going to be an object basically so now the error is gone and I think we are good to go okay now after doing this stuff well before jumping into the Android one we need to do one more thing into our app.component.ts file in this particular file we need to implement some stuff in order to work with the Firebase functionality directly so in the Constructor I need to inject the fcm service here and need to do some activity so this is a step which I need to implement let me just break it down for you so that you can understand quite easily first is the platform one which we need to inject into our Constructor which is very much important then the fcn service I have injected once both of them are imported here you can see if the platform is ready as soon as the platform is ready then only we are going to implement some functionality here that's gonna be the init push function which I'm just going to call that will be responsible for registering the app to receive push notifications okay all right so our configuration is ready here now we just need to add the Android platform so ionic cap 8 Android that's what I'm going to do here all right our Android platform is added here now what x exactly we need to do into our Android platform at first you need to understand if you're using fcm push notification that means the Firebase push notifications you need to download the Google services.json file for for Android and for iOS it's going to be a different file so in order to receive that file you need to go to your Firebase console and create a new project here okay these are the simple steps which I have shown many times for creating a Firebase project and it's it's pretty simple you just simply need to go ahead I'm just going to skip this particular step and I'm directly going to jump into the project here so I have already created this project here where you can see I have tested many push notifications one which are already working it takes some time to run but still it is working now you need to go to the messages One messaging actually you will you will find it in the engage one okay you need to go there so once you enter that you will get options of this kind okay for creating new campaign and other stuff for project overview you didn't you don't need to like go with the configuration of Firebase here so this is a 30 plus point for you you just need to work with this particular stuff getting the Json file okay so I'm just going to go to the project settings here at first so in the project settings if I just scroll down you will see this is my com.technics DOT test fcm this is my package name now if I add another package here let me just do that I'll add another package which I'll name it as what is the name that I have given to our new package one let me just check it here okay this is the name or package ID I would say let me pass that okay fcm app any name I have given the sha1 key is optional if you want to pass you can pass it I'm just going to register the application here so once that is registered you can see download Google place Services dot Json file you need to download this file and in where you need to please I'm just going to tell you now but before that let's complete the setup so you just need to hit go go or next next text and complete this okay once that is completed you can see again you can download this file if you just certainly skip that part or you have not downloaded it you can still do that that's pretty easy and you can change your app name also if you want to and add a fingerprint show one key if you want okay all right so we are ready with our application here for Android now where to place this Google services drop Json file because if you don't work with that you are going to get an error now this is my project folder and here you can see Android within the Android you have the app folder within the app folder you need to paste that Google services.json file which is very much important okay because without placing this I'm telling you again you will get an error okay so this is very much important to place at a proper location once that is done let me close it and get back to our our application here the next step well let's get back in order to check our next step for push notification for Android we need to do certain things here in the variables I need to pass this particular stuff so let me copy and go to variables.gradle file I'm just going to search using command plus P or Control Plus P for Windows and you will get this particular prompt here okay just search here and variables.gradle I'm just going to place tweet and pass the configuration version which is this particular one copy and paste it here and you are good to go what next we need to do here well you need to place this particular meta tag into your Android manifest file so I'll just copy it and go to my manifest file Android manifest file and before or after the provider I'm just going to paste it all right so once you do that let me just break it down you can see the resource icon for our push notification is given as at MIP map slash push eigen name okay so we need to change that because I don't think we have that particular location so in the rest folder you won't see any meetmap folder directly I don't think it's going to work so what you can do either you can create a bitmap folder here and for doing that let me just get inside this particular location and within this I'm just simply going to copy all this stuff and we'll create a new folder here in this manner okay and I'm going to name it as MIP map within this let me paste this icons here now this icon will be used and I'm going to change the name into my meta tag also metadata tag which is going to be this particular one it's going to replace with IC launcher if you don't do that well it's going to look for that particular name and it won't find it so it will give you an error there by default it should not give but sometimes it gives that so once that is done I think in Android manifest we don't need to do anything let's check it out well you don't need to work with anything else here right so we have tackled this particular situation pretty nicely now it's time to test it for testing it up let me just do one thing I'll open this project in Android Studio using the command ionic cap open Android and hit enter so now you can see the project is opened up in Android studio and if we try to run this let's see what happens so I'm going to select pixel 6 Pro Epi 33 and this is my emulator so let's run this up and see whether do we get any error or not or it works properly alright the app is launched and I don't get any errors of Tau what about the push notifications will I get that let's check it out for doing that up let me go to the Firebase console to this particular project here to the messaging one and in the messaging one I am just going to create a new campaign here okay if you don't have all these things you need to just register it or create it now I'm going to go for notifications and here I need to pass the title so Android App notification test I think this is very big so let me just cut this and paste it in the text 1 and 40 title test tab okay now if you just scroll down you will see lot many options okay I'll just hit on next and you need to select the application here so I'm going to select the fcm app here which is our app and then you need to go to the next one you can Target another application also if you want and send to eligible users when right now I want to send if you just want to like schedule it definitely you can do that also now I'll just hit next and I'm just going to go next again and I'll just scroll down now if you want to pass some data here definitely you can do that say like I'll just pass some data as a key and in the value let me pass value one okay let me pass that and sound I'll enable it and I'll just click on review and now I just need to click on publish and I think we are good to go it's gonna take some time all right our campaign was successfully started this is the one this is the latest one which is active right now and it's going to take some time in order to receive the notifications we need to wait for it so I just removed the Android studio and we are going to open it up again and I have given a console log properly error fcm we get an error because we were not getting the push notification permission alert that we used to get so I'm just going to try it again so I'm just going to open it up in Android Studio once again let's check it out this time we get it or not and I've removed the application from the emulator so it's going to install it once again all right so let's go for it I'll hit this button and it's going to run it up now one more thing you can do here well you can simply go to the fcm one I have I think given here if the prompt is already shown where it is for the permission one yes so the prompt is shown and then only it's going to request the permission so I think the problem is here if it is not granted then also I want to request for the permission okay so I think you can simply change it to granted one also that will be fine I think granted is available there but anyways we'll I'll just keep it for the time being let's get back and see you can see I have the notification one I'll hit on allow and we are good to go now so once that is done if I just go to lock it and let me just search for my token do I get anything yes I think I do get an object here and if I want to check it out well I'll go to the browser within that I need to look for Chrome inspect devices and I need to just simply hit on inspect where I'll get this particular stuff where I have my token within that this is a value of my fcm token that I'm getting so this is how you can simply check your application stuff for the console log properly okay and I'm just going to close it and get back to our Android Studio so this time if we try to pass in a push notification let's see whether it works or not so I'm just going to go to my messaging one once again and in the messaging one we need to create one again okay now I'm not going to repeat this or duplicate this because for the timing it's going to give certain issues so let's create a new one new campaign where I'm just going to name it as a title of test Tab and Android push notifications test okay now same drill next select your application I have two applications so I need to select one of those okay or you can select another one also now I'll hit on next schedule now next and simply pass some data well I'm just going to pass token data or pass any data whatever you want and value will be this okay key should be passed in a proper manner so let me pass key one value one okay sound enable it up and you're good to go go for review and simply hit on publish once that is done let's get to our application here and we need to wait for some time it will take some time but you will get the notification which is found so let's wait for it right now we don't have any notification here and I'm going to enlarge it by clicking on this button all right and you can maximize it in this manner let's wait for it so you can see I just received the push notification and this is the one that is coming up it took little bit of time around two to three minutes but it came up sometimes it takes a lot of time but it happens quickly also I was just preparing another one Let's test it how longer does it take so it is ten zero five it is showing right now check it out how long it takes well I think maybe I'm running it in the emulator that is one of the reasons I don't know maybe a possibility that it is delaying it up because I think we will get the stir pretty quickly here let me just check it wrap it up let me remove all this and now we should be able to see the data also if I just look for Value one I should be getting here push notification received where I'm receiving ID along with the data where I have passed the key one and value one for the first time okay so I'm receiving the data here that is in fact great and and if you just want to check it what you are getting in the inspect one I'll just click here and inspect one you are receiving in the push received one you're getting the data in date in that you are getting the ID key value and all of the stuff in the stringify format I think you can just get the proper data out of it that is also working I think right so this is how you can walk around with all these things okay now what I need to do well we need to wait again for the next notification to receive it is it has not come yet and it will work in the background also so if I just remove the application let me just remove the application here okay let's check it this time whether it comes or not so I'll just remove the application let's wait for the notification to show up so the next notification is I think directly test we will be getting which I just prepared a test test let's check it out whether it shows up or not once the application is killed all right right after killing the application also I think after four minutes I have received the notification but where is the notification okay this is the one it actually there are two notifications so that is why test test that's what I'm getting and if I click on it it will open up the application so this is working but it took a long time and I hope it doesn't happen in the real device because that's quite a long time 45 minutes it's quite long anyways uh so many of you might face a problem with this when the app is scaled well I think this is the latest version of Android which I'm checking API 33 but in the previous versions there might be an issue with the app is killed or if it is killed for a longer duration then there might be a problem right in order to fix that problem well there is a solution that is being given here into the documentation if I just look into this documentation here what is the common issues that on Android there are various systems and app states that can affect the delivery of push notifications and it can restrict certain capabilities so that is what it is saying there are difference in Behavior between development and production okay so try testing your application outside of being launched by Android Studio that is what it is being saying so it is saying you can test it directly without going through the Android Studio process that's what you can do with any cap means live preload that's what you can try out so before these common issues for the Android one it is said that this plugin supports data notification but will not call push notification receive if the app has been killed to handle the scenario you will need to create a service that extends Firebase messaging service so it is saying that push notification received that's what that listener won't be called so let's check it out here what do we have we are getting the listeners we are getting the token right out of it and along with that do we get the data also for the test one this is the other data what about the other one well I don't see the data that I'm looking for okay I got the data here so data is coming up but I think push notifications might not received according to this documentation if the app is skilled so we need to handle it by creating some service into the Android Studio so let's get started with that let's try to create that and for doing that up I'm going to look into this documentation here so I'm just going to try it and it worked for me well I have just done something if it works for you also then it's great because this documentation is really helpful in order to understand that problem and rectify this up so these are the steps which you need to apply but at first you need to create a service on your own so for doing that up I'll go to Android Studio here and in the Java one well in this particular one you need to go to new and create a service here I'll just click on this service and you need to pass a name here so my Firebase messaging service okay that's gonna be the name that I will pass all right so let's me just click on finish and it will be created do you want to add the following to git okay edit no problem all right so this is the Firebase service that has been created just now now first of all what am I going to do I need to register this in this particular manner so copy it once that is copied I'll have to go to the Android manifest which I can go it from my visual studio code also so manifest file and in the Manifest file within the application here it is already you can see create it so you don't need to do anything but you need to change some stuff here so I'm just going to pass few things let me just paste it directly so this is my stuff where I am passing direct boot aware to be true Android enabled that was already true and exported you can set it to false or true in the documentation it is set to false here but you can set it to True also now what are the other things made attacks you can simply pass well I'll just scroll down in order to check it properly or instead of showing you all the things well you can simply check for boot aware also I'll just search for it boot direct boot aware if you want to received in boot mode okay so this is what the one that you need to install and I'm going to show you that don't need to worry now doing this what will happen enable boot direct direct boot mode message handling in your application maybe it's related to where it's OS is getting boot up maybe because in that particular scenario you need to receive the notifications that's why you need to do that so I have done that part okay don't worry I'm going to show the installation also everything let's go to our service and work with this particular one so I'm going to pass some code here now within this let me just replace all of it with my code so this is my code here okay now I have the same service which is extending the Firebase messaging service here and these are the Imports that you need to have and most of them I have taken it from this particular documentation only so basically what is happening is on message received what exactly you need to do you I'm just performing some execution here schedule job and handle now if if true so on message received certain functionality needs to be done which is shown here you can simply check this out okay and here schedule job and handle our function is being used so if check if data needs to be processed by long running job if it is true then schedule job function will be called otherwise if the messaging is handled within 15 seconds then handle Now function will be called now what this these two functions are not ex explained here what exactly you need to do so you can simply open this Java file and understand what exactly it's being done okay and perform the same activity here so this is the stuff that is being done for handle now and schedule job that's what I have also done and in you send notification we are not going to work with that part in this scheduled job one time work request it it is calling my worker dot class which is explained at the very bottom so this class has been called where do work okay this function is very much necessary so this class is being called here that just you need to follow these steps okay I'm just following this documentation here I'm not calling that and I'm not going to explain you in depth that's going to take longer period of time so you can simply understand if you want to or you can simply copy and paste this whole code here just the one that is shown there I have simply copied most of it which I thought might be related and pasted it here all right so explanation is not that much important for you if you want definitely you can do that okay I'm not explaining because it is not a part of ionic mostly with the Android one that is really deep so these are the stuff that I have done here and we are good to go but before going ahead we need to install some packages also now for instance installing it up what I'll do I'll go to which file in the app one let me just search it in the app one build.gradle file and within that in the dependencies one I need to paste two stuff one is for the work runtime and the other one is for the direct boot one so in the direct boot the version that was shown there is different okay if I just go back and to the receive messages what was the version that was shown here for direct boot let's check it out direct boot 20.2.0 okay but if I run that version it's going to give me an error here because in our our case the version that we have for our Firebase one in the variables.gradle file I don't think I'll get it here in the variable sort graded file is 23.1.2 and I think we need to pass the same version because there will be version classes that is what the error I got if you want you can simply try that up and you will get the same error and in order to resolve that definitely you need to pass that particular uh value that I told you just now so I'm just going to get back to the build.gradle file and this is a version that you need to pass and for work time you can simply pause the version that is shown here that's quite okay so remember to do this stuff okay otherwise the problem will occur because the work is not explained or sorry the work is not downloaded you're using work everywhere right Android X work so definitely you need to install that part in order to work with it and instead of pasting it here what am I going to do I'm just going to cut it and paste it in Android Studio because we'll have the option to sync if you just check it in the Android studio now you will get certain errors here right there are a lot of red marks are coming up and in order to solve that definitely you need to do certain tasks so in the work one mostly the errors are coming up and for resolving that definitely you need to install this so I'm just going to go to the build.gradle file once again so in the Gradle one build.gradle file I'll just open it up which is this particular one in fact now within this I'll just scroll till here and simply paste this to and click on this sync now once that will get synced everything will be downloaded and we will not have any issues after that if I go to my Firebase service messaging service you will see we don't have any more errors here and we are good to go so once everything is done our stuff for registering for direct Boot and everything is properly done I don't think we will have certain issues now in receiving the push notification even the app is closed that's what the documentation is saying so I hope it will work and I think we are good to go so we can simply try to run this project again let's try it all right it is running again and I don't think we will have any error so far great so no errors now it's time to test the application what am I going to do I'm just going to close this application here all right and we'll go for notification one so let's go to test notification and create a new campaign here in which I'll pass a title background notification testing notification in background mode okay let's go ahead next select the application next now next if you want to pass any data BG value test 1 any value I'm just passing in you can pass any kind of data you want all right so let's review this and wait for it to show it into our screen okay you can try for a longer duration also if you want to but I think it should work so our notification is created we just need to wait for it to show up here and right now I don't think I have any notifications so that's great all right I just received the notification it took longer duration but at least I received it so finally everything is working fine the only problem that I'm facing here is the duration of receiving the notification let me know in the comment section whether you are receiving the same problem or not all right so I hope you have enjoyed this particular video let me know in the comment section how you like this video and if you're new here make sure you subscribe to the channel and look into my courses which are available on udemy and there are a lot of coupons that are available where you will get a limited period offers that are going on so go and check that out right now so with this I'm going to wrap up this lecture here thank you so much for watching and I'm going to see you next time [Music] thank you [Music]

Channel: Coding Technyks

Views: 10,685

Keywords: ionic, ionic framework, ionic push notifications, android push notication, push notification, receive push notification when app killed, push notification in background, ionic native code in java for firebase push notification, fcm, firebase, firebase messaging, ionic tutorial, ionic for beginners, ionic 7, Ionic firebase push notifications for android

Id: pVsOIXjKbas

Length: 38min 32sec (2312 seconds)

Published: Tue Jul 11 2023