Implement Push Notifications with Xamarin.Forms (Android) and FCM

all of you have asked for it many many times and finally here it is we are going to see how to implement push notifications with firebase and xamarin forms and in this first episode we are going to look at android let's go now to implement the push notifications i'm going to roughly follow this blog post by leo mares reyes she's really cool she's putting a lot of great examined content out there as well so if you are not following her yet go check her out because it's really awesome and this is a blog post on the progress the lyric blog where it says how to use push notifications in xamarin forms and it describes all these things how to do it with this plugin the plugin firebase push notification that is the one that i'll be using as well and she describes like you know how to set up the project we're going to see that right after this how to you know set up the permissions how to do all the things for android for ios but this is the steps that i'm following so go check out the link if you want to have you know some kind of reference check out the link in the video description this is what i'll be following so before we dive into any code we need to first set up that firebase project so you can do that by going to console. let me check here console firebase.google.com so that's where you want to go and then you have to sign in with your google account et cetera et cetera but eventually it will take you up here and you can see i already got a couple of sample things here but what you want to do is add a new project and then you can see it asks you for a project name so let's name that well actually you know you can you can go about this two ways you can create separate projects for your android and your ios um projects or you can both do them in the same project so i'm going to show you all of this with within the same project but you can make two separate projects if that's what you like so but let's make this push notifications sample there we go so it will create a little uh name for you a unique identifier now let's say continue now with google analytics you can get a lot more information about the the push notifications that you're sending all kinds of statistics but you will have to link a google analytics account to it i'm not going to do that right now but if you want to do it you will get all these a b testing predicting user behaviors crash free users etc etc you will get all this kind of reporting of course if you're going to do this please let your users know that you're doing this because that is the right thing to do because they are giving up you know some of their info some of their usage behavior so you want your users to be in the know about this and be transparent about what you're doing here now i'm not going to do this right now i'm just going to focus on the pure push notifications and then i'm going to say create project which is going to take a little while it has to set up some things so it's going to show you this little loading bar and have you wait for a little bit but there we go provisioning resources so it's setting some things up in the cloud right now just for you and whenever we're done this takes us to this new dashboard where you can add those apps and you can do do not just push notifications firebase is much much more okay here we go so it's done our new project is ready let's continue and you can say it takes you to the dashboard for this particular project now like i said you have authentication firestore real-time database i don't know all these kinds of things i'm going to explore this more because a lot of people have asked me for more firebase things if you want to know more about firebase services please let me know in the comments and i'll be sure to have a look for you but there's all these kinds of things that you can do but here it says get started by adding your firebase to your app and it says ios android and even web or unity so let's start with the android one right now but this i think it stays in this exact same place you can also add the ios one here so again you can have different projects for separate things or you can just add both of your apps in this project so let's go to android and here i'm going to have to specify my android package name so in my case i only always have nl for netherlands then my last name and then push notifications sample so that is the unique package name that is also used to publish your app in the store right so i'll i'll show you where you can find that in um in your project later on in visual studio for mac but this needs to be the same so you can give the app a nickname i think that's just a friendly kind of name for in this firestore console thing so let's say android app and you can have this debug signing certificate which is more a little bit advanced and i haven't really found the need for it to use this so i'm going to skip over that for now and i can say register app so it takes a little while to generate some configuration file for us and now it says download google services json and we need that so it shows this android studio right here and it gives you some instructions because this does not know or care about xamarin and visual studio which is fine i will talk you through it but we need to download this json that holds metadata about the setup for our firebase and basically your api key so also be aware of not committing that to a public repository so just click download we will need that file later on you can see it popping up in my downloads right here so i've got that secured and then we can go next and here they're going to give you instructions about adding the firebase sdk um this this all looks you know very scary this is more i don't know is it is it java is it i don't know what it is but we don't need it so let's just skip over it next and the next steps is you're ready so we can explore documentation or code but i'm going to show you all of this so let's just click continue to console and now you can see here at the top of our console right here that we have this android app right and if you want to add another app we can just click here and we can select ios and we can select our ios app in here as well or another android app but we're not going to do that the ios app will come in another video so keep on the lookout for that for now we're done here but let me quickly show you a little thing so i'm going to scroll down here and here is cloud messaging it's also here in the in the bar on the left it says cloud messaging right here take it will take you to the to the same thing and this is the thing we're after this is the push notifications they call it cloud messaging and here it says send your first message so whenever you do that you can you know send a test notification so we'll be seeing that later on to send an actual test notification but first let's now hop over to visual studio and set everything up on our android application and actually be able to receive this notification now here we are in visual studio 2019 for mac this is basically just a file new examined forms application on the left you can see the main page in example on the right you can see it running on the ios sorry the android emulator not the ios one and i've updated the title here already to be push notification sample so let's add a little exclamation mark and whenever i save that with hot reload you will see it update automatically in the running app so that is very cool okay so now let's get quickly to the notification stuff so there's a couple of things that we need to initialize first so we're going to install the nuket package for the plugin we're going to have to set some permission we're going to have to double check our application identifier so there's a couple of things we need to do first so let's get that out of the way i'm going into my solution explorer right here and on the um here the top one the solution i'm going to right click and say manage nuget packages and there is the plugin dot notifications it's probably firebase notifications i can't remember what the name was um here we go by randy del rosario he's doing some great work there's a good number of downloads here but it's not been updated for a while at the time of recording this so that might worry some people and you know that could be valid but in this case all the code just works and i didn't encounter any major problems so you should be able to safely use this but of course you're happy to use any other plugins i think shiny is doing something with push notifications too which is really cool so go check that out and let me know in the comments of course if you want to see it with another plugin that you have seen so let's just add the package we want to add this to all of our projects right here android and ios already so let's do that and it's going to install and i think it's going to pop up a couple of readmes on how to get started but we can ignore those because that's what i will be telling you right now so while it's doing this let's go back into our solution right here and go to our android project right click and say options so we go into the options here and under the android application pane we can see the application name which is always a bit weird so in my case xf which is xamarin forms and then fcm which is firebase cloud messaging push notification sample but the important thing is this the package name so that has to match the one that we specified in our firebase console because that is the unique identifier for this app and they need to match in order to you know be able to send the push notifications over successfully now the other thing that's important is the target android version because we need to target at least level 26 api level 26 for the plug-in to work properly because it uses some specific apis on the 26 level now note this is a target android version so the minimum android version could be lower but the target android version has to be at least 26 and then lastly we have the required permissions the only one we need for the push notifications is the internet one so that we can access the internet freely and then we're going to click ok and that is all we need to do for at least this kind of setup now let me get this readme out of the way here we go and what i'm going to do then is to initialize this plugin a little bit and i'm going to bring in some code that i'm going to copy and paste from the readme from this plugin because it doesn't make sense to have you watch me typing all the thing so let's go into our solution and we need to add a new file to our android project so let's go add new file and let's call this application there we go whoops not a forms content page let's make it a empty class there we go application like i said i'm going to copy some stuff off screen here but i'll walk you through what it does so boom here we go don't be scared we'll we'll see what it is and we need to actually import some usings because now it doesn't know this stuff so let's import a couple of usings here for the application which is the android app one and it knows that so for the this one android runtime and here it wants to know something about the android version number and of course our firebase push notification manager so here we go now we got all the bits in place okay so what this does this registers this class as like the application class for your android one so you will see a lot of stuff with the application lifecycle like the oncreate um so don't don't confuse it with like the main activity one that we have here because this is the main activity so an activity and an application is something different if you've been working with android you probably know but this is more like for the application life cycle so that is above the activity basically now what this does it checks if we are above android o oreo if i'm not mistaken and then we can work with channels so channels in android you can have different channels and um you probably want to make use of that as well i'm just going to show this with one channel which is like the simple use case but if you want to have a channel for sending your marketing messages or a channel for sending your you know the the actual notifications you want to make these things two channels because in android users can manage these channels separately so they can say hey for the marketing ones um i appreciate you doing it but i don't want to get notifications for that so it's going to disable it entirely and for the normal notifications then you can still allow that as a user so that is pretty cool because like on ios for instance it's just on or off and if you set it to off you get no notification so on android you have a little bit more fine grade control to actually be able to do that so probably make use of that especially if you want to have one channel where you will send notifications more often which are not um you know essential to the workings of your app then you want to split that out in a separate channel because else the user is just going to shut off your notifications and you can't reach them anymore so this is kind of the default values default notification channel id which is you know some sample value can be any string value as long as it's unique for this app and also the default notification channel name is general we'll see a little bit about this um later on so let's see if we debug so here we have some initialization line with the firebase push notification manager dot initialize and it wants to have the context which is also an android object thing and so we can just pass in this and the true says something about the reset token so if we are going to debug then we are going to reset the token each time which is apparently necessary if you run this in a debug scenario for android and of course because that token is the token that will be used to send the push notification to so that is the unique identifier for the device of this user and you can send a push notification to that token so if we are not in debug then we definitely do not want to reset this token because you know then they are going to have a new token each time the app starts and you can never send a push notification to them so that's not great and they're showing us here like a little sample event on notification received like this is if you want to handle something um android specific but there are also events to do that on more of like the um cross-platform level so don't worry about this for now we'll come back to how to handle these things uh but this is kind of you know high over what you want to do we've set up this that is great now the next step is to go actually into the main activity that we've seen before here we go so also the oncreate and here's some essentials initializing here examine form solutionizing and here we have the load application and after the load application we can say i don't think the the order really matters by the way but you can say fire base push notification manager there is again notification manager so let intellisense help us here using plugin firebase push notification dot um process intent here we go and we want to set the activity so the activity is this and then we want to have the intent which is i think something that's coming in here um is it the saved instance i think is it this bundle i think so there we go i don't think so no it's not okay then what is it intent oh intent i think that's just something intent that is something that is a property a field of this actual activity so an intent is something that you you know what triggered this activity to come up so with the process intent then we need to set this up to pass like whenever the push notification is opened um we have to it's going through here and it's going to process the intent and see if it needs to invoke one of the events on the this plugin for you to be able to handle it that sounds kind of abstract but i hope that will be come clear later on don't worry too much about it just make sure this is in here for it to work now i think one last thing that we need to do is add that file that we downloaded from the firebase console earlier so let's go into our solution and to android and you want to right click and add a existing file and here you can see the google services json so this holds all kind of api keys and our unique application identifier so we want to add that to make the firebase stuff initialized properly with all the right values let's just open this and move it into this one we don't need it for anything else so let's just move it into our project right here and then into our solution we want to actually have this google services json we want to set the build action but there is something funny about it because you want to right click and set the build action right here and there should be but there isn't always a google services json build action and looking at this it's not here so you see this has a lot of build actions and depending on that this file gets a little processing and same for the google services json file but it's not in here one way to fix that is to install a package manually so let's go here and say manage nuget packages which is the xamarin google play play basement so you can either do the base or the basement i think and although i think let's do the base so let's do this one and if we install that it takes a little while to install then we need to accept we get some other things which are you know already linked basically through the plugin that we installed here but somehow it doesn't get wired up properly and in our solution now we can go to the google services our build action and we see the google services json here all the way down to the bottom so now we have that proper build action we could set it to that and it should be processed properly and set up for us to use in like the notification so one thing that we still need to do is not entirely required but it will help us in this debug scenario at least so let's go over to our solution and then into our app example example cs so that is basically you know whenever our apps start up the the shared library app um of our xamarin forms application so here we can say cross firebase push notification notification let intellisense help us a little bit here and dot current so that is like you know how we can access all the apis that are in this plugin and here you can see a whole number of events that you can use now be sure to check out the documentation because some might have a little different behavior depending on if you're using ios or android or maybe not fire at all but you know you can use all these things so you can see if the notification is opened or received i think that's a good good example actually the notification received is only happening on ios whenever the app is in the foreground so you can handle the push notification like in app but we'll see that in the ios video and the deleted one for instance i think that's only supported on android so make sure to check out um what is supported on which platform but the one that i want to show here is on token refresh so whenever this device this this app gets started and the device goes out to register it with firebase then it will get back this token and then the event is fired so let's add this one and add a little event handler for that so there we go i just pressed tab and the telesense will generate a method for me and here in the event arcs we can see that we can get the actual token and that's what we need to to debug this thing and and run it from the firebase console so let's just put this into our system.diagnostics.debug.writeline here we go so this will write it out to the application output just so we can see what is going on here so let's say token and e dot token there we go so now we should be able to see the token and that is what we're going to need at least for our debugging to send a notification to our application here so let me stop and restart the application and bring it back with the console here on the left as well so you can actually see and send a test message so here we are now in the firebase console for our little project application we can see the android project is still right here but we're going to scroll down to the cloud messaging thing right here and then we can send a test message so well send your first message it's not a test message beware so if we click on that we can use it for test messages so let's test and test message now let me tell you a little bit about the rest here because this will compose an actual push notification you can schedule it you can do some other things but the ui is a bit weird so it will show you like a little preview right here but you can also target so target different audiences or apps you can schedule them and you have some additional options but you can't go here straight away you have to go through this next next whatever but the options in here definitely also are taken into account whenever you send a test message here so that's a bit weird but we'll get to that in a little bit so now what we want to do is whenever you click here send a test message is you'll get to this screen where you can add that fcm registration token and then you can send it to that device so that's why i wanted to implement that little piece of code that gives us the token so if we go to visual studio now quickly and we go to the application output we can see here that we have a token if you look real closely it's a little bit small sorry about that but there's this long token that we want to copy right here and then if we go back to our console we can add that in here click the plus sign and then it's added to our list here now remember that the android app resets the token all the time so if you restart the app you have to get that token out of there again so if it's not working that is something worth checking now let's put this app in the background because we don't have any way to do it in the front and whenever the app is in the foreground it's not going to show so but whenever we sent this now we can um you know see it popping up here we can see a little icon coming up here and we can also see a little um thing little badge here over the application icon so if i pull down here the notification center then you can see our test message is right in here and whenever i click that i'm brought back to my application and of course the badge is reset also so that is pretty cool right now you notice that it didn't give me like the little bar that you're actually seeing here and there is kind of the way android handles the notifications has a a importance so it's low importance or high or urgent and depending on what it is it will only make a sound or maybe make the led blink a little or you know it will actually show the bar so there's a couple of things you need for that and the first thing is to let the user actually you know allow to show these bars so if i go to the settings right here and we have the apps and notifications and this is the one that we are using right now you can see notifications and we can see that general thing the general um channel that i have set up and whenever we do here this is allowed to pop on the screen so we're actually allowed to do that and of course also alerting or silent so you know the user has all this control over notification so keep that in mind whenever you implement this and then whenever we go back to visual studio we have these default notification channel id and default notification channel name but what you also have so this is just one of the ways that you can set this up is the firebase push notification manager and we can say default notification channel importance so here we go if we set that and i make this i don't know hi probably then high or max let's make it max so that it's maximum importance and we save that and i have to stop and rerun the application of course for this to take effect so let's do that then it should actually pop that little bar that we've we wanted to see or at least i wanted to see it so that is how you can do that of course if you set these channels up properly then you know you can do this definitely different as well if you just create a not a default notification channel but i'm just you know going um of the idea here that you are sending simple push notifications to just one channel for sending your things so let's put this in the background let's go back to our console right here send the test message of course we need the new token so let's remove this one go here to our application output and we have our new token right here and go back to our console add it into our little thingy here and send a test and now hopefully we should get that bar no it isn't oh so maybe maybe this has to do with the options that we have here in this console so let's go next and here you can see that target so you can do a user segment or a topic or you can select also the app so we can select an app and i also only have the android app in here right now but you if you add the ios app to the same project and you can do the android app and you can click the and operator right here and we can also add the ios one so you can send them to all of your applications but we only have this one for now we can schedule it for now or for whatever and here we can set the additional um option so oh i think here this is where it's going wrong so i can specify the channel that i want to send it to so this is again the channel that you want to you know use for maybe marketing or your other things so let's jump back into visual studio and it has to be the channel id so let's get this firebase push notification channel and go back here put that in here you can also add custom data that you can also catch then in your application that may be processed so maybe i don't know you're gonna send like hey you have uh a amount of new messages in your inbox and then that amount you can put in here and you can use to show the user that you have 10 new items in your inbox or whatever you can just put custom data in here that you can process in your application and to make extra sure that we you know are noticed we can and enable or disable the sound right here so let's enable that now down here we have review or saved as draft again this is whenever you're going to send actual push notifications you can do through here or of course in some automated way there are apis to communicate with firebase as well to send something automated through this which is you know let me know i will make a video about that as well but if we go back here to our test message now the options here are also applied to our test message so let's send this again and see if it actually does show up now see so now we get the bar so i had to set that real proper channel id to actually send it there and then it will pick up on that importance and it will also probably play that sound that we have set up so and whenever we click this we get back to the application so that is how we can send our first push notification to our android application with xamarin forms and firebase cloud messaging there are a lot of customizations possible for the push notifications because you can set the icon you can do a custom sound things with the channels so if there's something more that you would like to see if you have any questions please let me know down in the comments and i'll be sure to see if i can provide you with an answer or maybe record a new video altogether other than that i hope this was clear to you i hope you liked it and if you did please click that like button and while you're at it if you haven't subscribed yet please subscribe and click that little bell because the people at google they also you know implemented those push notifications now you know how hard it is how you know they they had to do it and why not reward them with you know enabling them and getting a notification whenever i post a new video and other than that i will be seeing you for my next video keep coding you

Channel: Gerald Versluis

Views: 14,821

Keywords: firebase push notification android, firebase push notification, push notifications, xamarin forms push notifications, xamarin forms push notifications plugin, xamarin forms push notifications sample, xamarin forms push notification firebase, xamarin forms firebase cloud messaging, xamarin forms firebase push notification plugin, firebase xamarin forms tutorial, firebase cloud messaging xamarin forms, push notifications xamarin forms, push notifications xamarin forms firebase

Id: 7w2q2D6mR7g

Length: 28min 48sec (1728 seconds)

Published: Mon May 24 2021