Local Push Notifications in Xamarin.Forms

in this video we're going to learn how to implement local notifications on ios and android by just a couple of lines and this awesome amazing plugin.local notifications which makes it easier than ever let's first inspect the end result so here i'm showing you this only on ios but i promise you this video also has um the android bits i'm going to show you how that looks as well but here we have a button that says schedule notification and it will wait five seconds and send us a notification so let's go to the background wait five seconds and boom there we have it so it shows a badge it shows a little bar and this has been scheduled locally so that is very cool and whenever i click this i go in and i can get some custom data in here i will show you that too you can click the ok button so let's do that again switch off the phone and you will see the phone will wake up to show you this notification so that is really cool and that is all that we are going to see in this video but before we do i need to give a big shout out to jeremy kaiser thank you for becoming my latest member on my channel if you want to become a member then you can do that by clicking the join button on my channel and for a small fee you get access to all the latest videos even before they're public and most importantly you know you're just supporting me for all the work i do jeremy and all the other members thank you so much for doing that and let's quickly continue with this awesome video now let's see how to implement all this goodness for yourself in your own application here we can see visual studio 2019 running on a mac and um this is just a file new xamarin forms application on the left you can see the example page on the right you can see it actually running on the ios simulator on the ios simulator we've already seen like the end result for android i'm also going to show you just the end result um so stay tuned for you know the rest of this video and you will see what it looks like on android as well but you know i will be showing you the iterations through ios first let's update the title as always and here we go local notifications sample save that and with hot reload it's automatically updated on my running ios simulator or you know it also works on a physical device and let me remove well actually let's first install the nuket package of course so let's go over to the solution right click on the solution level and say manage nuget packages and i'm going to search for plugin dot local notifications there we go and it's created by elvin tutugala so thank you so much for that i hope i didn't butcher your name too much but thank you so much for putting this together you can see there's other plugins as well i think one notable one is shiny by alan ritchie so go check that out as well but you know i'm showing you this one for this video but here we go add packaging you need to install them to all platforms because you know this uses well i want to say custom renderers but it's not rendering anything but it uses platform specific code on android and ios so you want to install this on all of your projects now this is going to take a little time of course we've reviewed the the terms of usage the license and we've accepted those so it's installing on our project right now there we go now another good thing to note is that you need to use this with xamarin 4.5 minimum i think there's a specific 4.5 version but you know you should be using xamarin forms 5 anyway so just stick with that and the other thing is you want to target android version 10. so if we go over to the solution and we go over to our android project and select the options right here you can see here in the general tab compile using android version which is a target framework and here i have 11 so that's even higher you can do that too but at least it should be android 10 and this is the target version so this isn't the minimum version which you can see here under android application my minimum version is android 5 and my target version is android 11 so you know those are two separate things but you need to target android 10 at least for this to work properly so now that we've got this in place let's actually remove all these labels here of course i need to restart my application in a little because i made some changes that are not done through hot reload but i'm going to remove all these labels and add a little button here that's going to say schedule notification and let's add a click handler on this thing generate that for me automatically there we go save it and it will actually show me the button already but it's not going to work i'm going to go to my code behind so go to the solution main page main page example.cs and now it's time to set up my notifications so under this button you can do this of course through any other way you can do it through a button or automatically in the background but i can schedule a notification which is going to be really cool i can just say var notification is new notification request i need to use some adding here so let's go to the little light bulb and using plugin.localnotification that sounds good so it adds this using right here you can do that manually too and now it knows about the notification request which is something inside of the local notifications package so we can initialize that with a whole bunch of properties let me scroll this up for you a little bit and so you know here you can see them all basically so they have some android specific things some ios specific things which is really cool i'm gonna touch up on that in a little bit you can configure a batch number in fact let's just do that right now batch number is one so it will have that little batch number on top of it a description so let's do a description that's going to say test description so that we know that it's a description what do we have more we can have a title so notification typing is hard notification there we go and uh what we also can have is some returning data which is cool so you can put some data in here that you can you know update from your app as well it is a string and if you want to use multiple things then i think this package also has something that's called the object serializer which probably you know puts everything in a two string and can deserialize it for you which is um very handy if you want to do this thing so that way you can put multiple data in there but you know at its core it's just a string so let's do some dummy data here how we can use that we will see that in a little bit returning data and a notification id so this makes it a unique identifier for your notification so look into that what that is specifically but basically you can give each notification a id and you can um you know cancel it with that id or you can you know override it or whatever so make sure that you know what that is let's just make it uh 1337 for now um but look into what that does it might be important when stuff is not working and um so the other thing is also interesting we have like um a couple of other things so you can specify a custom sound you can say if it's repeats or not so you can make a recurring kind of notification which is really cool so if we say that you have a couple of options we can say no which is probably the default we can say daily weekly or a specific time interval and when you want to do a specific time interval i think you have to here set the notify repeat interval and you can do something with a time span and you can set a repeating notification which is really cool so you don't have to schedule it yourself each time now the thing that i'm going to do is just the notify time so i'm just going to set the time which is going to be daytime.now dot add seconds and i'm going to add the five seconds to whenever i press that button so i can close the application or do whatever you want and within five seconds it's then going to show that little notification and so you have a lot of oh actually i was i promised you to use the ios and android specific stuff you need a new object with that so this is the ios options this only has the hide foreground alert so that basically allows you to send a silent notification so it doesn't show that little bar thing whenever you know the notification comes in and for android i think there are some more options new android options there we go here you can see we have a bunch of options so we have the auto cancel the channel id the channel id is important i'm going to show that next we can set a color we can set a group we can even set the the color of a led if that's something that's on the device if it's ongoing what the priority is and you can even add a progress bar so oh there's even more there's even more you can add a timeout and a certain vibration pattern so lots of things going on here which is really cool go check that out for yourself or you know as always let me know if there's something specific that you want to see let me know in the comments and i'll be sure to answer you or maybe make another video so let me finish this up first so we can say now notification center dot current dot show so this is the api basically for this whole plugin as well we can say cancel so here we have that notification id coming in so that's this one that you can see right here you can cancel that specific one to not show it you can cancel all so if you have a recurring one you just cancel them all never show it again these events received and tapped i'm going to go into that in a little bit and here we have the show which i'm going to use now which is the notification there we go and now it's going to show it so that's how you set that up now one thing that we need to do for android is go into our solution go to our android project and our main activity and i'm going to set up that channel that we're talking about so because on android you have to work with specific channels that you can send notifications too so you can also create multiple channels and you can say hey i want to send this to this channel which is you know kind of specific to how push notification works so um find out how that works but you know if you want just want to do the default kind of simple notifications local notifications then this is going to be enough so let's go into notification center oh it also does a node here of course notification sender so i should be using plugin dot plugin dot local notification here and now it knows the notification center and i'm going to create the notification channel so there's another extra stuff that you can do here as well but you know you can just here set this create notification channel i think technically it's only necessary whenever you set it on api level 26 and higher and also here you can you know set some configuration here i guess but this is more like the advanced stuff so you can also here set some configuration on you know how it should view on the simulator so you know that that is stuff that you can play with go check that out but you know this is the default this is enough to send the actual notification so i think we set it all up so let's stop this one and start it again for ios and let's see if this is actually going to do something here we go notification is coming up and now if i press the button then we have to go be quickly here within five seconds and boom there we have it so we can see our batch is zero we can see our notification is coming up which says title notification good test description test description um after five seconds so that is really cool that's all the things that we can see whenever we tap it we are brought back to the application so that is really cool if i do this again and i shut it off so i press the power button on my simulator and we wait five seconds you can see it wakes up the device and it shows the actual notification as if it was like a more remote notification because you know the the concept is very similar so that is how we can implement these local notifications very quickly and easily now let me quickly show you a couple of other things as well um i want to show you also the events that were here but let me actually just do this so we also have no devicationcenter.current.com notification received so this is only fired on ios whenever it's on the foreground so i'm just creating a new event here that's going to be handled with this notification received here we go and then i'm going to say display oops display alert and let's say notification actually i think we can actually get the data from the event arcs right here so let's say e dot there we go e dot title so let's just do that e dot description and um an ok button so okay there we go so this is only fired for ios whenever it's in the foreground because typically i think you know the notifications let's actually try this out do not show whenever you're in the app i think there's it does or doesn't oh in this case it does uh but you know you you you might maybe people have set it up differently so um whenever this happens let's quickly start again um you can handle whatever it's received whenever the user's in the app you might you know do nothing or you know you might show this dialog box or whenever it's a silent notification and just pushes data in here then you know you might want to handle that data maybe so here you can see this is this is has the same data and you can show it like this now this works i think always on on android so there it probably registers a service which will always run um and then you can handle all the things that are going on in here but you know then you have to figure out like hey is this something that is um is it in the foreground yes or no because else you're not going to be able to display an alert right so that is something that you need to figure out now i think also for android you um need to do some other thing for this event so you have also the notificationcenter.current.tabbed here we go plus is create a new event handler there we go so whenever the notification is tabbed so the actual bar thing whenever the app is going to open then you know you can also trigger some some actual things so that is cool too and let's just display another alert there we go and i think this has a different set of the event arcs here we go yeah so here we can find that um notification tab let's do this and i think here we can say like e that e data so this is that returning data that we supplied here right so let's see um if we can get that out of there there we go and this might not work on everything because this might and also this one by the way they might be running on a separate thread so whenever it doesn't show or it doesn't behave you know you want to influence the ui and it doesn't work be sure to wrap it in a device begin invoke on main thread and i think um xamarin essentials also has something to do um for for the main thread um but just to make sure that it you know all shows up um because if you want to do something with the ui then you have to make sure that it's running on the main thread because that's the only thread that can access the ui so there we go let's make sure that this happens and then whenever we stop this and we run it again we should have this code as well and we should be able to get that extra data out of there so let me do this and go out of here and whenever we see our notification coming back up then you can see the badge again and we can click it and here we can see that dummy data going in so here we have the notification tab and we're showing a alert with the extra data also nice to note whenever you you know handle that notification whenever you go into the app the badge is cleared automatically so that is good too now for android let me quickly implement the last bits here and then show you how it actually behaves on android so if we go back to our main activity the thing that you want to do to do that tabbed event to catch that we need to add another thing here notification center dot notify notification tab there we go and here we have to put the intent in here so that's something that you know is known within the android app so we have an intent and we need to create a little event that can actually handle it so protected override and then it will help us on new intent there we go and then we first want to do the notification center dot notify notification tab so what this is doing um is just you know oh we want to get that intent from the parameter there so what this basically probably only does is actually fire the event that we've hooked up here in our main page so notification notification tab will just pass along you know something happened on android and actually with this in place let's check out how this shows on android so here i am back on android and you can see the exact same interface and i can just say schedule notification so let's do that and get out of the app right here and i can see you know the the little um icon of the app right here and you can see it doesn't show for this android version an actual value in this batch but it does show you the little dot that something is going on here and also in the top bar here um i think this has something to do with that um notification channel that if you want to show the the actual bars right here that you have to do some configuration in this notification channel but you can see that the notification still shows up it says notification and test description the things that i configured earlier and whenever i click this it will take us to the app and it will show us the notification data just as well so that is how all of this behaves on android and you can see you know it also handles this um same notification whenever we are in the app so it does both now which you know might be a bit too much so we probably want to you know go back in here the main page and say whenever we received one we only want to do this for ios because that's the only case that makes sense right the runtime platform is device dot ios i got a whole video on how to do this platform specific stuff should pop up on your screen right now so go check that out if you want to know more about that now it only does it on ios but this is how it shows on android so just as well a little bit more configuration but other than that it's never been easier actually to set up local notifications on ios and android now this has a lot more customization options you can do all kinds of things as i've just shown you i've shown you the apis and i've show you how to implement the basic usage but beyond that there's much more to do so let me know in the comments if there's anything else you'd like to see or if you have any questions and i'll be sure to answer them maybe join my discord server if you haven't done that already um you know there are some people that you can interact with and ask questions and we are there to help each other out um like this video if you've actually liked it and of course subscribe to my channel if you haven't done so already and i'll be seeing you for my next video keep coding

Channel: Gerald Versluis

Views: 9,473

Keywords: xamarin forms, xamarin forms notification, push notifications, xamarin forms tutorial, xamarin forms notification badge, xamarin forms notification sound, xamarin forms notification popup, xamarin forms notification click event, push notifications iphone, push notifications android, Xamarin.Forms 101, xamarin forms local notifications, xamarin local notifications, local notifications in xamarin.forms, local push notification ios, local push notification in android, C#, xamarin

Id: -Nj_TRPlx-8

Length: 20min 31sec (1231 seconds)

Published: Mon May 10 2021