Part 3/4 - Firebase Push Notifications in Background, Foreground, and Terminated States Android/iOS

hello and welcome back to the third part of Firebase flutter notification Series in this video we are going to see how to receive a flutter Firebase notifications and how to ask for the permissions for the notifications as we know that there are the new there are the new policy in the new iOS and the Android versions that user must accept the or user must uh agree to the consent that whether he wants to receive a notifications for the particular app or not right so let's get started so first of all uh open the notification Services the class that we have created and in this the first step is to ask for the permission when app is loaded so basically these permissions will be asked for first one time only and later on if user select yes or no know that can be changed from the app setting not app setting from the mobile uh mobile setting okay so to to get started we'll here we'll create a new function that functions would be void request notification permissions okay so in this functions what we'll do we'll first we'll check whether the platform is iOS or Android on the basis of that will request the permissions for the notification so first we'll check for the iOS if so here we have to import this class okay okay now we can we can check we can write code specific for the iOS so starting from that a wait will use the messaging instance that we have already initialized for this so when do request permissions so basically in in this there are the different first we can assign this function as as sync okay so there are the different permission parameter for the iOS so it can be whether we want to set alert for this notification or not then then there is uh announcement then bat should be displayed or not so if you remember that when we receive a notification in iOS then it shows batch on the app icon so this settings can be changed from here then if uh someone is using and car play Then notifications should be displayed in the car play or or not then whether it is a critical alert then provisional and the last one would be a sound so a sound should be a played or not so make sure that this this call will be happen only when it is app is running in the iOS platform and we have to check this because I have faced the multiple issues if I do not add the iOS iOS tag before asking for the permissions because it does not show the popup in their mobile applications to access the uh to sorry to request the permissions and and the notifications was not displayed properly and only it was displayed in the notification center only then the next is we we can use the once we complete our check whether it or not then we can we can go we can use the notification settings class so it is the notification settings then again a wait and again we'll use the messaging instance then request permissions so this is the similar uh this is the similar to the uh the parameters that we pass for the iOS but this time it is for the Android right so we can copy this and paste it here now next is if here we'll see if settings uh if set it is auth in the authorization stations the authorization stations belongs to the particular uh iOS or Android Android device operating system so if it is already enabled in the mobile settings then it will it will not it will only only show that user has already Grant the permissions so from these conditions we can check whether the user has already Grant the permissions or not right if the not permissions is already enabled for the uh for these applications or not so to check that we can use the notification settings that the instance we have created do authorization status is equal to authorization status. authorized so if it is authorized we can print here that user has already granted permissions so user is already granted permissions right let's see what see here conditions must be a Ru okay so it should be a double equals to and the semicolon now in the next we'll see L is from the notification settings that authorization status is equals to authorization status. provisional that means the user granted provisional permissions so that means user has granted provisional permissions so again we can PR here something that user has already granted provisional permissions and the last is as in this case if user has not granted anything then we can write user has denied permission so here the two options the first option is if you remember then we get three options when any applications ask for the permissions the first is uh allow allow access that for the permanent access then for the time being only and the third that decline the so these three conditions are represent the same things okay so we have written the code to ask for the permissions right now we can test this one the first of all we have to include this code while app get started so what we can do in the uh you can write this code in your home screen in the init state where let's say notification services. request for the permissions so whenever this home screen will be loaded in the applications first it it will ask for the permissions and if the permission is properly set accordingly we'll we'll have the uh we'll have this message in the uh debug console so let's test this one so let me start one emulator okay our emulator is started now we can run this app in the emulator okay there here we go our app has been loaded and it might take a few moments before loading its main screen okay so if you see when our app loaded the home screen now it is asking the user to uh send you notification so depends whether if user clicks on allow then it will fire the first code that user has already granted the permissions and if don't allow then it will go to the that particular portions when we have handled that okay user has denied the access to the notifications so here we can click allow and if user clicks on the don't allow then later on that uh the user can go to the mobile setting and enable the notifications if needed so if you see that when we clicked on allowed here we have the notific sorry logs in the console that user is already granted the permissions so okay so the same thing will be work for the iOS also so here in this case I will not run the iOS uh simulator because similarly in for the iOS it will ask for the permissions and user can grant or permissions or not on the basis of the requirements right okay so now what we can do uh we can write the logic to receive the foreground notifications and then we'll write a logic to handle the notifications so again come back to your notification Services class and there here we have to write one Logic for the foreground notifications okay so use the future abstract interface there and write the foreground message and again it is a sync function and there here here's a thing we can start it with the await then Firebase messaging dot instance then again use the uh dot to set foreground notification presentation options right so what it will do it will set uh the notification presentation options when user is in the foreground that means user has already opened the notifications and in that case when user receives the notifications how that notification should be displayed to the user okay so the options are it should be alert then set it to true then the B should be displayed and the last one is it should play the sound right so now uh we are all set to uh receive the foreground notification so we need to call these functions from the home screen so again in the home screen after accessing the not notification permission we can write this or we can call this functions so make sure that first we ask for the permissions then we handle the logic for the foreground notification or foreground message and before getting the new device token always try to run the token is refresh or not so if there is a new token is assigned and the previous token is expired so it will be a assign a new notif uh sorry new device token and then we are getting the new device token here okay now okay so we are done with the uh foreground notification then our next step is to initialize the Firebase inst write void then here we'll initialize the fire base init function the functions takes the context of the application so it is a build context and here we can write context now when here the real logic we have to apply so this logic says when we re rece a message so in this case the Firebase will continuously listening to the uh notifications and when it listens to the on message events that we are going to write that Firebase messaging dot on message when the message will be received it will listen to that message so here event is nothing but the message that we receive right and you can WR semicolon then C right enter here okay so when we receive the message then we have to create initial initiate the two instances the first one is the remote message instance sorry remote notification instance right because it can be a null or empty so better to write the question mark that you already know about how that can be handled in the flutter then it's a notifications and then message and the instance that we have sorry the event that we receive message do notification and another one is it is Android notifications again this can be empty because if the notification is for the iOS then we'll have empty for this Android one so it is for the Android then again same thing message do notifications then again this can be m and it is entro all right so what we are here doing first we are receiving the notifications for the iOS and also for the Android so if notific messages for the iOS then we'll have something in this notifications and if there is a notification for the Android operating system then we have uh message for the Android one so basically it it is kind of the type casting that this would be uh inside the message notification and onroad and this notification would be on message. only notification okay now what we can do here sorry we can print the whatever data that we are receiving from the notifications so let's say we can write it is a notification a title then we can write it as notification dot better to write examination Mark if it is empty or null then it should not throw any error so we can display a title as this way then again we can display a notifications. body and we can print the data here that is a message dot data then to string okay so uh what here we can do we can test this by sending uh we can test this to send the notifications so in this case first we have to uh copy our device token because each device has its unit token ID so what we can do we can open the Firebase console and the from the Firebase console we can send notifications right so let me open Firebase console here and go to a Firebase conso okay after logging to your Firebase go to the project that we have already created in the previous part then click on go to engage and under the engage there is a messaging now and create your click on your create your first comp campaign and it is a Firebase notification message okay so what we can to test in the we can write the test from fireb console right here we do not need to uh enter any images and all test message and here we have to add the fcm registration token so fcm registration token is nothing but the device token that we have fetch in the home screen using the uh get device token method so you can copy that token and you can add the token here and click on plus icon so now that token is added so what Firebase here it will do if our if our all configuration are well and good then when we click on test the Firebase will send this test message to the particular device token and the the our device token is uh connected with the applications that we have run in the emulator okay so when I click this and when I click on test then we should receive something here okay so we are getting okay so we are getting one line that broadcast receive for a message but actually we didn't receive anything because this line of code is not executed at all okay okay so I got it we have written this functions but we have not called these functions from our home screen so what we have to do we have to call this functions from our home screen then only it will be able to send the message right so come back to the home screen then can write initialize this Firebase net and in the init we have to pass the constant uh sorry in the init we we have to pass the context okay so I think now we should be able to receive the notifications let's see again I'm going back to a Firebase console Sending testt message clicking our device ID and test okay so again we are facing the issue because it is not able to call this method and I think the reason is this home screen is not uh initiated after the reloading right so we can what we can do we can stop the project and we can rerun the project because once the the project is Rerun the home screen will be loaded and it will it will load the this uh init State method and once this method in is method is called then we'll able to call the fireb init method so let's try this way okay so let me first check our device token is not changed so I'm again going back to the let me remove this one again adding an this device token and clicking on test let's see okay so if you see that we have received the uh notification right because initially what was happen we call this function from the unit state but the screen was not reinitiated that is why we were not able to call this Firebase unit method now we when we restarted this applications that that this functions was invoked and now if you see that we have received this notifications as of now the data is empty because we are not setting any custom data from the Firebase console for the test for the test purpose we are just sending the title and the body and we have received that successfully so now the next step is still we are not receiving any notifications while app is running so once we are confirmed that okay we are receiving the messages then what here we can do is we can set check for the whether app is running for the iOS or Android so again we'll write that code that if split form is IOS first we'll check for the iOS so is IOS and if it is IOS then we'll directly write the foreground Mage now the next check is if the platform is Android right now we have to check whether it is for the entro or not then here we have to write the two Logics that first we have to initialize the local notification and the next logic is we have to show the notific application because in iOS we don't do not need to uh add this kind of particular Logic for the iOS platform but yes for the Android we have to write some logic in order to show the notifications so we'll create two functions so let's start creating the two functions so the first function is initializing the local notification okay so we can write init local notifications and this method will accept the other context and the message that we received so here it is a build context and the message that we receive so what we receive we received the remote notifications it is remote message then message again it is a sync functions now the next is we have to initialize the few variables that is where it is andro initialization settings right so in this case we have to pass the launcher icon if you remember when you receive any notifications that notification contains the app launcher icon or apps icon in in the notifications uh header so we have to initialize that first thing so that is Android init settings is equals to constant Android initialization settings and here we'll write atate atate map map SL IC launcher okay so what here we are doing is we have to show the launcher icon when we receive the notifications and for the Android initialization Iz ation settings we are using the uh icon call IC launcher from the mmap folder so if you are Android developer you you you would you probably may know that we have to add the launcher icons in the MIP map directory and this mm directories are contains the different size of the images based on where these applications will run whether it will run on the tablet or in uh small screen size device or the large screen size device so if we go to our files and under the Android folder under the app then Source then main resources and here we have the mmap IC launcher so it will use this launcher icon to display the notifications right so we are doing nothing but we are using that image from the mmap folder so that is the one thing that we have done the next thing is for the iOS notification we have to to write something so for iOS in it setting then it is constant or there is a Darwin initialization settings class and in this we have we do not have to pass anything because it will by by default it will take that image now again we have to initialize one thing that in it settings is equal to initialization settings and this will contain few parameters the for the Android that we have already created that is Android settings and the next one is for the iOS that we create settings for the iOS right okay now again we have to initialize when we receive the flutter notifications and in this case we'll write the on receive notification response and it will contain the payload and that it then there we have to write some logic to handle these notifications so till then what we have done we have we have done the configuration or initialization settings for the Android as well as for the iOS and we have passed the settings to the initialization settings right now next is write a wait then it is a flutter it is a flutter local notification settings do initialize right and in this settings we have to initialize this settings that we have created for the Android and iOS right and in that case we have to listen for one method that is on did receive notification response so we we will Len this one and here it is a payload that we receive for that here we have to handle this notification so we have to create this new functions called handle the message and in this we are passing the context of our applications and the message that we have received right okay so again let me first format this code and now the next is we have to write this functions called handle message so so what we have to do now is we have to create a new class sorry new functions called handle message now this handle message can can these functions can be used for the different purpose let's say when we receive the message for the particular type and it message contains the data that is payload with the particular values then you can take actions accordingly so let me show how this can be done uh here we have to write a build context that is context and the remote message that we have received and here we can write one check so let's say your message that you have sent it's payload contains some something like that if the type is like uh text right then you can take actions accordingly let's say from here you want to redirect to a new screen or here you want to take a different actions based on the payload that you have received right so you can do that based on payload that you receive but in this case we we do not have any that require that kind of requirement simply what we can do is that in handle message so we can add one uh statement that in handle message functions or I can simply write this one okay so our the first part is completed so from the Android what we can do we have we can write this and here we can pass contacts and the message right so if you remember we are initializing when uh when we received the message till now we are receiving message only in the console then what we are doing if the platform is IOS then we are directly calling the foreground message functions that we we have already defined there and if the platform is Android then here we are doing we are initializing the local notifications and in that case we are um in that case we are uh settings adding two settings one for Android one for iOS settings and on the basis of that we are handling the notifications that we which we have received it now next is we have to show the notifications right so you can write the new function that show notifications again we have to uh we have to write this functions and in this case we have received a message so this would be a future functions so future void then show notification and here we have a pass remote message object there so it is remote message and it is a sync right now here we'll write actual logic to display notifications so first we have in the Android we have to create the notification channel in order to receive or display a notification because we have already received notifications but we are not displaying it so first we'll create first we'll create the new channel here that is Android notification channel do we have that class here okay we have window notification Channel then Android notification Channel and closing it sorry what we have to do is yes we have to pass the channel ID so the the message that we receive the message then there is a notifications and then Android because we are writing for the Android then there is a channel ID do two string after this I will I will share one thing that we need to add in the uh Android notif Android man manifest file then next is again message so we can copy this one because we have to write the similar thing here then importance so the importance is the max it's kind of a priority then do we need to show a badge then yes then should it play a sound then it should be a yes so for now we are just playing the sound and it will use the default sound here right okay now our next thing is again we have to create a new instance for the Android notification details so that is uh Android notifications details yes no notification details is equal to Android notification details again I'm removing this and we'll write uh so that we can properly read it so here we'll write that is Android channel do ID do to string we are passing the instance from there then it is the channel do name dot two string don't get confus because we are using uh this channel settings in the notification detail class then next is the channel description so here you can write the flutter notifications whatever it it it can be a whatever name but it should be appropriate name right then again we have to write the importance that importance is do Max then next is a priority priority is also a high so these are the settings uh and on the basis of that the notifications are the displayed in your notification centers then play sound and tier so we can say we can simply write the name of the tier and in the sound we can use what sound we want to play that is notifications. sound right okay so we are all good by creating the Android notification uh sorry Android notifications detail class then the next part is creating the darving creating the daring notifications so the daring notification detail we have to create so again we have to write something that is the daring notification details that is ding notifications then ring notification details and here again we have to pass some parameters that is present alert that we are passing through then present badge again we are passing through and then we are presenting the sound or not so we are passing through so see uh this kind of configurations are required for both because we are writing code for the IOS as well as for the Android and that is why we have to write some code twice one for the iOS one for the Android and these can be only onetime configurations or onetime uh implementations then later on on the basis of your logic you can write your custom logic in the handle message whether this data uh your notification payload contains particular data or not now next we have to create a notification detail class so notification details is equals to notification details now in this in this uh in this we have to pass the instance for the both iOS and for IOS and Android that we have just created so it is like uh first is Android notifications that is Android notification detail that will pass here then is IOS so for the daring notification detail that we created it right now one final uh one final implementation is that is a future delayed so here we do not we do not want any uh delay for the notifications and for that reason we are writing this so duration is zero so no delay should be there while receiving the notification and then what the final step is uh the one if you remember that initially we had initialized this class that is a flutter local notification plugin that we have to use that initializations or instance here to show the notifications and here it is asking for the four parameters so for the ID you can pass zero then for the title that we are receiving from the message the message do notifications do uh don't forget to write exclamation mark here then title two string right so this is for the title let me write it properly then again next is um notifications do body to string and notification details that we want we have to pass and if you remember notification details contains the notification details for the Android as well as for the iOS so I think we are all good we have written over all the logic in order to receive notification for the Android as well as for the iOS but I want to uh let you know that for the iOS to send and to receive notification some extra configurations are the required and that for the particularly for the iOS we I will I will create a new video to how to configure the certificates and how to add those certificates from the sorry how to export those certificates from the iOS uh developer console to the Firebase so I will create one more video on that but till now we have done all the configurations for the Android and we are ready to receive and very to ready to display the notification for the Android because uh iOS part is very different from the Android so in in the part five I will explain you how to configure or how to implement iOS notification in clutter right so in that video I will mainly focus on uh creating the certificates registering the device in the Apple developer console and how to export as I mentioned how to export the certificate from the developer console and that upload Into the Fire Firebase console okay so yes from we can say that now there is a no code changes are required for the Android and iOS uh because we have done all our implementations in order to receive the notification apption right I think uh we are missing the one part here because if you see that we have set the priority here uh in the in the in the enter notification channel right uh not not the priority it is a channel ID so what we have to do is we have to write uh one settings in the Android go to your Android folder then open then under the Android folder open the app then open source and then there we have the Android manifest.xml file so here we have to uh add one manifest regarding the Firebase notifications right so what we can do here is write one new metadata okay and under that metadata you can copy this write com Android sorry com Google dot Firebase dot [Music] messaging then write default underscore notification make sure that you are writing uh properly and the there is a no spelling mistake otherwise this won't work then it is Android value so and value is high importance I import importance why importance underscore Channel okay make sure that you add in Android manifestation file and then now we are ready to send our notification from the console so let's try it before starting the testing let me first stop the running applications and we restart so it properly load all the your uh configurations and implementations right okay so if you see app is loaded successfully now let's go to Firebase console there and again we are writing a test and as description is test from the Firebase console Okay click on send test message selecting the device ID and clicking on test okay so if you see that we manage to receive notifications and then it is we have uh notifications icon there with the title and the body and we also got the what is we got the notifications for which applications and in the console we have same data as the notification title is test and okay by mistake I have written notification title but it should be a descriptions uh that Tes from the Firebase console so if I pull down the so if I pull down the notification center and there it also displayed in the notification center there and I can use this to dismiss it okay so uh now we are successfully managed to receive the notification in the for when app is in the foreground but what if application is not running or application is in the background so let's do over the last remaining part uh when the application is running in the background so in this case what we can do is we can go to our main screen that that is the starting point of our applications and then there we can write some logic so this logic will handle uh notifications when uh when application is not running or it is in the background as well as uh it also handle the things like when user clicks on that notification then it should be open it should open the our uh applications or to the particular screen right okay so here what you can do go to your main screen and in the main screen first we have to uh write one future functions here so it is Future and it is a void that is underscore or you can write any the fire base messaging background hand Handler messaging background Handler right and here accept the parameter as remote message because we are receiving the remote message here and it is a sync right and in this case in a wait we will we can we will initialize our Firebase in app okay and it should be annoted at at the rate right prma and it is a VM that is entry point of our application that is entry point again make sure that you are writing correctly and you are not making any uh spelling mistakes right so again what here we are doing we are writing one Handler that is the messaging background Handler and in that case in the background we are initializing the Firebase not uh Firebase applications okay so now we have to call this so what here we can do is when application is started that is the main is the starting point of the applications here we can write the file fire base messaging dot on background message we are going to call this Firebase handlers right and just close this all right s so again we will restart the applications okay so friends uh app is loaded now and soon we can test the background notifications let's wait for the app get loaded okay so see application is loaded now and if you remember that it is not asking again for the notification permissions because we have already provide our consent to the applications that yes uh we are ready to receive notifications okay so let's now see are we good to receive a notification when app is not running or it is uh terminated right so in this case what I have done I have closed the applications and now it is not running only um emulator is running there so again I'm going back to the Firebase console and clicking on the site notifications and selecting the device token there and clicking on test okay so if you see that we have received the notifications and we can see that notifications in the notification center so so guys uh we have seen how we can how we can Implement uh the Firebase notifications and how we can send the notifications from the console to your device so this implementation will also work for the iOS devices but in the next video we'll see how to configure the Firebase for the iOS and how to export and import the certific ific at in order to send the notifications so that's the W for today's video if you have any questions feel free to drop then in the comment section below and always make sure that the Simplicity is a s of efficiency and keep your code always simple and readable goodbye

Channel: byte array

Views: 1,949

Keywords: firebase, flutter, notifications

Id: U061-gxLBoo

Length: 49min 49sec (2989 seconds)

Published: Sat Nov 04 2023