Local Push Notifications with .NET MAUI, Easy With This Plugin!

Video Statistics and Information

Video
Captions Word Cloud
Reddit Comments
Captions
Long time ago, I made a video on local push notifications for Xamarin.Forms and now this plugin has been updated for .NET MAUI and it has gained a ton of new features. So it's time for an updated video. So just to go back a little bit, what are local push notifications? Basically they are push notifications. They look the same as push notifications, they smell the same as push notifications, but kind of like the difference is that net Maui local push notifications triggered from on your device. So from inside of your app, instead of like a signal on the outside from a server that is coming in, I have a whole video on what are push notifications. So definitely go check that out. I highly recommend that you do, but for this video, I'm going to look at a plugin that will make it very, very easy to allow you to send local push notifications that, well, maybe because you have some kind of alarm inside of your app, right? You're making an app that has an alarm to wake people up or to drink enough water or to go stand with their standing desk. I don't know. You can send a local push notification. You don't need a server for that. You can just schedule local push notifications. It will show up at the time that you schedule it and you can repeat it and you can do all these kinds of things and they will look and feel the exact same as push notifications that are coming from a server. So that's really cool. So a couple of things about this actual plugin, it is supported by iOS and Android. So no Windows or Mac Catalyst at this time. Hopefully we can change that in the future. And also I reached out to Elvin or Tudaluga as his nickname says, for at least iOS because I was testing it for this demo. And for iOS you need permissions for the local push notifications, push notifications in general. And the dialog to ask for the permission didn't really come up. And he said like, hey, I need a little bit more testing for iOS. Maybe I need some help for iOS. So if you are someone who is passionate about open source, maybe consider go helping him out on the repository. Maybe I can find some time to help him out with some things that are in there. But keep in mind that for iOS there might be some rough edges. For Android, it mostly works fine from what I could find. So for iOS at least, you want to probably implement something to ask the user for permissions for push notifications and then you should be mostly good. Let's just go check out what this plugin can do for you because it's pretty, pretty sweet. So here we are in Visual Studio 2022. I just created a File, New .NET MAUI application because this plugin is now ready for .NET MAUI. So that's what we're going to show. And the first thing that you want to do is install it on your project. So let's right-click on our project and let's go to Manage NuGet Packages. Then you want to search for Plugin. LocalNotification So I think the name has changed a little bit from when it was working with Xamarin, so be aware of that. And here it is with a nice icon Plugin.LocalNotification by Elvin. I see it's now pronounced Thudagala. So sorry for that. And the time of recording the latest version is 10.0.2. So let's just install that. And while that's installing, you have to do okay for all the things. I accept all the things. Of course, you have to read the agreement there. And then it's going to install. Now, to actually initialize the plugin, we're going to go to our MauiProgram.cs. And what you want to do here is somewhere in your builder, add the line, UseLocalNotification. And with the new Visual Studio features, I think it adds it automatically to using if it does not use IntelliSense or add using Plugin.LocalNotification yourself and whenever you do that then boom, we have UseLocalNotification and the plugin is ready to go. So that's it. That's how easy it is. Now let's go to our MainPage.xaml and here I'm just going to reuse the UI that's here because I'm just going to use that button basically to trigger some code. Now, a good thing to note, you can also definitely use this with MVVM. Actually, that initialization line that you just saw registers a service, an interface that can do everything with this local notification as well. So go check out the repository for this plugin. It has all the documentation or of course, let me know down in the comments below so I can make a video just for you if you want to see how to do that. So let's go here to this on counterclick. So we're going to go to our MainPage.xaml.cs and I'm just going to remove all of this code right here that I don't need because I want to do something with this push notifications, right? So again, you probably want to go here to the top and add using Plugin.Local Notifications, right, so that we have access to all the APIs here. And whenever we do, we can now start creating our push notifications. It's kind of like worked with a notification request. So let's just say request = NotificationRequest. So there we have that and whenever we do, you can set a whole bunch of properties, right? So let's start exploring with what's here. One of the first things is the NotificationId. Now that's important or not, kind of like dependent on your use case. The notification ID is a unique ID that you can reference your notification by. So with that you can cancel your notification. For instance, so I don't know if you have a timer, but the timer has expired. You can say, hey, notification ID this one. And I think the way to cancel it is if you set the notification schedule to somewhere in the past, it will get canceled, right? But you need to have that ID. So it can be important, but it can also be just 1337, some arbitrary thing. Maybe you don't need to set it at all, but that's how you can use this one. Now, of course, you're going to need some kind of title, right? So we can just say maybe want to subscribe to my channel, right? Maybe that's a good title for a notification. And what else do we got? You have a subtitle. You can put something in there. Hello. I don't know. Let's just do something. And you also have a description, right? So here is probably a good time to note that not all properties work on all the platforms. So on iOS and Android, I think Android has kind of like the most customizable notifications. So there you might have the subtitle and the title and the description. For iOS, I think you will only have the title and the description. So please be aware of, you know, test it out, check the documentation on what exactly is applicable here. But you know, just so you know that not everything can show up in your notifications, maybe. Another thing is an example of that, by the way, is your batch number, right? So we can set this to ten or do 42 because the batch number is also dependent on a version of Android that you're running. I don't think it doesn't show actual values, but on iOS it actually shows you the red bubble with like the 42 in it in this case, right? And on Android it just shows you a little bubble that something is going on, but it doesn't show you any content in there. So again, this is differences between the platform that you can't really solve in a great way, but Elvin has done a great job in making that as easy as possible, at least. So there we have it. Same thing is kind of like the category type, I think, which is something very specific. We have category types, a none, a status, alarm, reminder. Depending on what it is, it might look a little bit different, probably only on Android for now. But you can specify a category. And here, this is something that was much requested on my earlier video, is the schedule. So this is an API change from previous versions and you can set a schedule. So this is how you're going to schedule your notification. But this is now a complex object. So we can set a new NotificationRrequestSchedule, right? So what we can do here is do some more advanced things. And the first thing is the notified time, right? So we can set the notification time and let's make that date time. Now add seconds, five. So I'm just going to set this in like 5 seconds from whenever I push the button, right? So we can see the result here. So with that in place but you can also do it repeating, right? So maybe you have something that you want to do by a specific interval or have the engagement from the user so that whenever they haven't opened the app in like a day or a week, then you can schedule this notification. When they start the application, you probably want to set the notify time a little bit longer and you can repeat a couple of things, right? And then if they do open the app and other time then you can cancel it. With that NotificationId and now you can reset it to somewhere in the future, right? So that's a little free tip right here to get that user engagement going. But you can set here the notification AutoCancelTime. So it cancel it automatically after a certain time as well. But you can also set the notify repeat interval, right? So you can set a certain interval like, hey, how many times or at what interval does it need to repeat? And now we can suddenly say TimeSpan.From... I don't know, FromSeconds. So it will repeat after seconds. That's probably not a good idea but FromDays. And you can set do it every day, right? So every one day. And we have more options here. You can also set some kind of repeat type and you have some Android specific options. So I think if you do not set the repeat interval, you can set the repeat type here and we have daily, weekly. So it will kind of like set that automatically. So it's kind of like more options to do the same kind of thing. And with the interval you have a more finegrained control over when it's going to repeat each time. So let's do that. I'm not going to demo this because then the video will be a day long. This might be a little bit too much, but trust me, go test it out. This will repeat after one day. So this is kind of like where I want to leave the demo at. But like I said, there's also specific Android and iOS options. So let's put a comma right here. And you have Android is and then you can set some kind of Android specific options here, right? So Android is and what does this need to be? Notification and Android options. So if we set new Android options, we probably need to import some new using here we go, using Plugin.LocalNotification. AndroidOptions. And you have all these kinds of cool Android specific options, right? Because the notifications for Android can do a lot more at this time at least than iOS. You can set a progress bar and you can net the progress on that progress bar, right? You can set a channel, you can set the LED color. So if the device has an LED, you can set the color for that. So there iOS, all kinds of things, vibration patterns, all stuff that is possible for Android and not for iOS, but for iOS, there's also some stuff that's not possible for Android. So here you also have the new iOS options, right? And we can set a couple of things here as well. So I'm not going to go over all of this. If you want to know more, please net me know down in the comments and I will make follow up videos for you. So let's leave it at this for now. The one last thing that we need to do is actually schedule this notification, right? So we can use the LocalNotificationCenter for that, which is a static class, like I mentioned. You can also dependency inject an instance of this and you can use that to make it more dependency injection and more friendly for your architecture current. And we have a couple of other things here as well, right? So we can say clear with the notification ID list. So we can clear notifications based on their ID. You can do clear all, so just clear them all out. You can check if notifications are enabled, yes or no. So there iOS, all kinds of APIs here as well, to do check things and cancel things and do all that. But what we want to do is the show. And with the show we can put in a request. So we put in our request that we've just created here and with this we should be able to show our actual notification. So let's deploy this application to our Android emulator. And now whenever I click the button, it will schedule our notification for 5 seconds in the future and we should see it show up. So here it is. Our application is being deployed and here we are, our application iOS here. So if I do click me and I'm going to net out of this application, then it's going to show me that notification. So pay attention to here in the top bar. And you can see that it comes with this icon, the icon. You can customize it for Android, you totally can. But for now it's going to show me the little dot. You can also here on the app icon. See the little bubble here, right? The little batch. It doesn't have that value, but you can see the batch. If I do my Notification Center here or whatever it's called on Android, you can see subscribe to my channel. Boom, there you are. And it says it's me. So you can see it picks up the description, not the subtitle. I'm not really sure you should check the documentation, how that all works when it doesn't show up, yes or no? Oh, I can see the subtitle here. Hello. And you can see it here, right? So you can see it here in the notification. So this is all things that you can do and you can click it. And I think this brings you back to the application, right? So that's how that works. That's how you can schedule your first local notification. Now, before I let you go, there's one other thing that I want to show you which is really cool and you can hook into all kinds of events. So let's stop running here for a moment and go to my constructor right here. And what I can say here is again, Local NotificationCenter. Current.NotificationActionTapped or notification received or notifications disabled. Right. And again, this is a little bit dependent on if you're running on iOS or Android, which is going to work, yes or no. So please test that out. Check out the documentation. But for the Notification action tab, for instance, we can hook into something and we can check out what the user did. Whoa, this is a big thing. This is something in my visual studio because I blew up the font. So you can really see it really well, but you can see this really well. Alright, so let's just take this out of here. And it has generated this new event handler for me, right? So with the event arcs, I can do a couple of things. So I can check if e.IsDismissed or IsTapped, or you can check the action ID because you can add action buttons to your notification. A lot of people have asked for a video on that. If you want to see a video, please let me know down in the comments. And you can do all these things, right? So let's see if you do is dismissed. I do know for sure that this one only works on Android and you can do whatever. I'm just going to put a breakpoint here. But you can do something, right? And else if you can check e.IsTapped, right? So you can see if the notification was actually tapped, yes or no. So let's put a little breakpoint here. I'm going to rerun the application and now whenever we dismiss the notification, for instance, it will show up here in our code and you can do some kind of action with that. Now, again, this only works on Android. For Android, I think there's some kind of coupling between your app and this notification for iOS that definitely doesn't happen. Your iOS notification cannot really trigger any code inside of your application outside of the action buttons that you can add. But there's all kinds of specifics going on here, so it's a little bit more advanced. I click the button for 5 seconds. There should be a notification here. It comes up again. So let's do this. Get this menu down here and whenever I dismiss it here so I put it to the side, you can see that my breakpoint gets triggered here and it says it is dismissed is true. So now I can do all kinds of code here for dismissing my notification. And that is how you can get started with local notifications in .NET MAUI. Now, while local notifications might seem very simple. There is a lot to unpack here. Like I said, you can also add buttons to your notifications so that users can automatically do actions inside of your app. They can be taken to a specific page or they can, I don't know. Some example is whenever I get a Twitter notification from someone tweeting at me, I can pull it down and I have an action button to actually like that tweet right, without going to go into the app. So that's something that you can do with this. So you can have these action buttons for like snooze the alarm or do all kinds of things that make sense in your application. Also, you can style with icons, with colors on Android. At least you can send extra data together with you. There is a lot to go over here, so please let me know down in the comments below what you want to know. But be first, be sure to check out the documentation on the wonderful repository of this project by Elvin. Of course, as always with my videos, some people don't seem to be aware of that. I have code samples for all the code that I write in my videos on my GitHub account as well. So be sure to check that out. All the links are down below in the video description or in the first pinned comment down here. With that, please like this video so that more people can benefit from all this local notification goodness. Because liking it will spread it to more people on YouTube and that will help grow my channel and support my channel for totally free. So that's amazing, right? Subscribe to my channel if you haven't done so already, maybe check out that join button if you want to support me with this channel some more. And I will be seeing you for my next video. But before you go, please check out this playlist for more .NET MAUI videos, this video that is recommended especially for you. And check out this button to see if you're actually subscribed. See you next time.
Info
Channel: Gerald Versluis
Views: 19,879
Rating: undefined out of 5
Keywords: .net maui, dotnet maui getting started, dotnet maui, dotnet maui tutorial, .net 6 maui, .net 6, .net maui app, net maui, maui community toolkit, c# maui, learn .net maui, maui tutorial, maui local notifications, maui local push notifications, dotnet maui local push notifications, .net maui local push notifications, Plugin.LocalNotifications, ios, android, push notifications, maui .net, push notifications iphone, push notifications android
Id: dWdXXGa1_hI
Channel Id: undefined
Length: 17min 28sec (1048 seconds)
Published: Tue Nov 01 2022
Related Videos
Note
Please note that this website is currently a work in progress! Lots of interesting data and statistics to come.