Flutter Firebase Foreground and Background Messaging

will take a look how to work with firebase  messaging for android device flutter android and   we'll see how to work with android foreground and  background messages well to first work with this   wherever you're following from me and what kind of  application it doesn't really matter go ahead and   install these two plugins firebase messaging now  this one has to get notification from the firebase   and this one is to for showing on our mobile phone  itself so that is flutter local notifications   but the basic theory i'm going to explain it would  work without this as well but it's recommended to   use them together because you'd be able to view  your messages anyway so now we'll come into our uh   main.dart over here and in our main function at  the top we have to ensure that we are calling this   2 over here so especially this one so it  would help you initialize the firebase   and related libraries and at the same time  you also have to make sure that on your   android app you have google services dot json  which means that you have already created a   firebase app on the firebase console okay now  let's take a look at this section over here   now in general if you want to work with firebase  messaging you want to call this one okay   now i'm calling this inside try clause try  catch close it doesn't have to be like that   but it's better so you can just simply go ahead  and get all the initial messages from firebase   and based on that you can do some checking but  if you don't need to do checking just go ahead   and call and get the messages that's fine and  it's also recommended to use at the beginning   now over here i'm doing some extra checking  which you might not need to do in your case   so you can skip that but do remember that this  remote message over here it does contain a lot of   information from firebase so you can go through  them and use them in your app as you need okay   and after that over here we have this initialize  method which is coming from this helper function   which will take a look very quickly now this is  a helper function and inside this we have few   methods now the method we are going to work with  is basically this one for now okay initialize and   this is being called from here as you can see and  that's a static method and at the top over here we   have created this object which is called flutter  local notifications plugin based on the plugin   that we have installed and it is recommended  you do it at the top it's globally available okay so we'll take a look in detail over here  in this function little later but one thing   we can do first and we should be very useful  that we have this on background message now   this on background message is coming from our  firebase messaging itself so firebase message   has a function which is called on background  message and it takes a callback function or   callback handler so this is what we have  over here now over here we're just simply   printing the information that we say that we have  a background message and the related information   now this information actually we expect to get  back from firebase from uh firebase console uh   well now how to get it from firebase console will  take a look very soon so we have few information   over here as you can see so we are looking at  this three information title body and the title   log okay now if you have to have background  message or when your app is in background   then you have to go ahead and do it like this  you have to call the method first messaging and   then call on back on background message okay  now this is what we'll take a look first okay   now over here we have our app ready up and  running and at the same time i believe our app has   printed a token okay that's a device token now um  i'll grab this device token and first what i'll do   i'll go ahead and post it from postman  okay now over here i'm using this fmc   apis from google and well if you have seen  my other tutorials you know that they take   json body and over here to means to where you  want to send and you can also mention the priority   and the message that should be showed in our app  itself okay so here we are sending body title and   title lock key which corresponds to this three  section these three items that we are going to   print okay so what will happen let's see so  right now our app is on foreground so we'll   put it in background okay let's go ahead and put  it in background so this is the app now i've just   copied this token so i'll put it over here so  here we are let's go ahead and send a message all right we do see that over here we have this  notification icon and over here as well as we see   a badge okay which means that we have notification  and if we pull it down over here we'll see that   so this is what we got this is a title and this is  a body okay so this is the information that we are   trying to print okay and at the same time we do  see that we have information successfully printed   over here now what it has to do over here because  now if we go and check we'll see that it says this   one like on background so this is the information  that we just printed okay so the idea is if you   want to get notification when your app is on the  background then you have to go ahead and call that   okay all right so that was for background  okay now what if our app is on foreground   okay now this is where this is comes into play  this one okay so over here we are initializing   okay so let's go ahead and click on this and we  already have seen that this is over here okay   now there's a lot of information it may look scary  but i'll explain step by step so it won't be that   scary okay all right so first inside this we see  that this is the function uh initialize function   okay all right now inside this first we initialize  our android settings then our settings and we   take both of the settings and we combine them  together create a new settings and that is the   settings we pass to the initialize function which  is coming from flutter local notifications plugin   from this object okay now this object actually we  are sending it from here okay so it's available   in this function now it has a method called  initialize so that's where we are sending this   okay so here we have this initialized settings  okay now one thing you have to okay i'll talk   about this very soon which is very very important  so anyway now inside this as you see we have   another three functions that we are calling one  is called set foreground notification persistence   options now this is for apple okay now for apple  or ios devices if your app is on the foreground   and you want to get the notification you have  to call this one and implement this three option   otherwise you won't be able to get okay so it's  very important that you go ahead and initialize   this so you can directly call from firebase  messaging instance and you're good to go okay   you do have to see that sometimes we do firebase  messaging instance and sometimes we do firebase   message then an object the object could be very  different in this case this is on message and   in this case this on message opened so this is the  thing you need to take care now well what happens   on android if your app is on the foreground  and if you want to get messages from firebase   then you have to go ahead and call this callback  function inside this it takes a function and   function itself takes a parameter which is called  remote message that means that the message is   coming from firebase and you can do whatever  you want first we are printing the messages   as well as the three items that we have seen  okay now our app right now uh is background   but we'll make it let's see now we'll click  on this and now our app is in the foreground   now we'll send a message from our postman and  we'll see how it looks like and we'll see that   this has been printed instead of the one that we  have seen earlier where we print background okay   let's go ahead and check it but this time  we'll just change this value just for fun okay all right that's all now over here we'll see  that okay we have this one okay and we have this   message as well okay and it successfully printed  success one and now over here if we go and check   we see that on message okay so so what that  means that if your app is on foreground which   is uh visible then this method gets called the one  we have seen over here okay so this is the method   one message gets called now inside this callback  function you can do a lot of work that you need   to do i mean a lot of things you could actually do  okay so a lot of background work whatever you need   you can do them and you're good to go okay now  one thing i need to tell you over here this one   now this refers to the notification  icon now this icon should be   same as the one you mentioned  in your androidmanifest.xml   now regarding this one your android manifest.xml  configuration is very important you do have to   make sure this this information are all correct  you have internet connection and as well as   com coming down from here actually this for  information which is channel id notification icon   and notification click and messaging event so  this few information are quite important if you   have wrong settings actually you might get error  but these are actually pretty similar across all   the app like in this case you just have to change  your channel name it could be any random name you   use but you have to use it everywhere wherever you  see the channel name or channel id okay now this   notification icon the one that we have seen over  here okay all right now you also have to make sure   that you have this icon actually so you have to  have this icon inside this app main and then res   and inside this drawable over here okay so you see  i have this icon and this icon is better png with   transparent background okay and it refers to this  drawable okay otherwise it will get error okay   all right yeah so actually that's if you follow  the steps you should not have any problem   getting messages whether your app is on the  background or foreground thank you so much

Channel: dbestech

Views: 22,715

Keywords: firebase cloud messaging, flutter firebase messaging notifications, flutter firebase foreground message, flutter firebase background notification, flutter firebase foreground notification, flutter firebase onMessage, flutter firebase onbackgroundmessage, How to handle notification when app in background in Firebase Flutter, Sending Push Notifications by Using Firebase Cloud Messaging, Background Notification OnClick With FCM Flutter app open up an empty activity, fcm, firebase

Id: 3LP285yL7HM

Length: 11min 0sec (660 seconds)

Published: Sun Sep 11 2022