How to Display Ionic 4 Local Notifications (Schedule, Payload & Callback)

hey everyone what a design from the ionic academy and in this quick one I will show you how to implement local notifications inside your ionic for app so we've done this before with ionic 3 and just some of the parts changed especially the Cordova plug-in was updated and is currently in version 0-9 beta I think so let's take a look at how we can schedule those notifications I've already created a blank new I own it for app and the next thing we're gonna do is install the ionic native local notifications plugin so make sure your ionic CLI is updated because previously we had to use at beta for those ionic native plugins but as of now we don't need this anymore we just need to make sure that we get the import for our app module right so maybe we can already do this in the background so what we will need is local notifications and then it's finished so we can already do the ionic Cordova plug-in for local notifications as well and we will take a closer look at this repository also in a sec but for now let's add local notifications from add ionic native local notifications and then just like always add it to the array of your providers in the app module yes and I made the mistake we shouldn't do so go ahead and add ngx at the end which is needed if you use those plugins with ionic for an angular currently alright so now let's take a look at our home page and because this is pretty boring I will just bring in a bunch of buttons in order to get some functionality what we want to do is we want to schedule different types of notifications and I just sorry I have to change the title because I can't live with a default blank title what we want to do is first of all schedule a notification the future just like in five seconds or whatever it could be in ten hours could be in five weeks so this is a one-time notification we want to schedule in now we get into recurring notifications and we will do this twice so once with the syntax for repeating every minute maybe not the most smartest thing to do in your app please think about something like this before we do it and then something repeating on a daily basis which comes in more handy if you think about like meditation apps or drink water apps that give you a little notification in the morning to do something and finally we also got a button to get all notifications because we can also interesting tech we can also get all scheduled and already sent notifications and therefore we will build a super tiny list right here come on what is wrong today I on item and then we will iterate over a few elements of scheduled array that we want to fill of course we could also do this automatically but hang a button and doing this I don't know it looks a bit nicer so there might be a bit more text so let's prep the text and then let's print out the ID of a notification that you can actually use it a later point to cancel a notification and then we also got the title which is exactly what it sounds like and then maybe also add the trigger this could also be the date at which the notification occurs but we will mostly use trigger so those are different fields and just take a look or maybe we can do this as well add the data inside the actual object that we got back from come on what is wrong with my eye today with we get all so now we need all those functions in our homepage and we also need two other things yeah we should save this that makes sense I'm not gonna open the ionic serve because if we're using Cordova plugins I said there's many times before we need to test the functionality on a device or in this case a simulator works also great and also there's a difference between local notifications and real push notifications which we have to talk about in a second before let me get some import right otherwise we will mess up all the things so we will need the platform you might be wondering why will I'll show you why then of course we need the local notifications package local notifications and then we need the alert controller wait don't need it but it's a nice behavior that we want to implement in here so alert controller all right maybe let me just bring in the most easy helper function which is showing an alert so just I only for basic stuff because we want to subscribe to the events of local notification and there are multiple events I can open this let me bring this in real quick so if you take a look at the plug-in which you actually should always do when you're using ionic native wrap us because those pages here contain a lot more information than the actual page on the ionic native package which is just a wrapper around the API of this plug-in so somewhere here what was I'm looking for I forgot it along the way of course I was looking for something like trigger that's a pretty bad one to go that's the events so these are the events that you can subscribe to which are add trigger click clear cancel update clear all cancel also quite a lot of we will just do it for trigger and click trigger means the notification was triggered and sent to the user click the user actually clicked on the notification in a default state the local notification that we scheduled won't be visible if the app is already open we can also change this so it comes up at the top but we will keep it like this for now and also if we just open the app when we are outside and receiving the notification nothing happens so what we want to do is in both cases display a little alert controller so we see that we actually reacted to the click event and also to the trigger event of the notification so therefore we will use this first of all why sometimes I just make a dot and it I don't know the code completes already okay whatever so this is the reason I was importing the platform if we want to subscribe to the local notifications we should also make sure that the platform is ready and then we can say on click and then previously this was a promise and now you can see it's an observable so in here we get the data back and same now for trigger completely same syntax and in here we can now do the magic and because well maybe let's skip this for a second let's go to our scheduled notification for now so this is the most basic way to schedule a local notification you just go ahead and say schedule and then you create a nice object with a lot of properties and at this point there are can I get this back yeah there are actually a lot of things documented on here so you could have something like a progress bar which looks like this you could have different icons you can have summarized of different notifications you can have group actually and what I also liked a lot was the yet there it is actions with action Batman this actually looks pretty much like iOS and now the problem I was not able with the current version of zero nine beta to implement most of the things especially for iOS so these grouping things or whatever is going on here grouping progress might work for Android but it's definitely right now not working for iOS and I'm not sure if any of this will actually be supported on iOS just like having a custom icon so normally I always use the icon of the application and therefore this is actually possible on iOS but again this was not working for me in this case I don't know maybe you can make it work if you can make it work definitely let me know so I can update this video again so much fun always updating the videos but anyway we will focus on what's working and this is scheduled notification and recurring notification so now to schedule you're gonna have to pass in an ID make it most of the time unique that would be great in order to cancel the notification later then you need title like whatever attention and of course some text Simon's notification in your case you can use something else like Simon if you want to and for the data this is now something interesting because we can pass in my hidden message this is some data there's not immediately visible so those parts will be visible at the top of your device and this is just something that we retrieve inside these blocks and do whatever we want so for example if you want to go to a specific page you might have something like page and then whatever jump link jump to me or just general information let's have an action or so and then you resolve this up here and now okay the action whatever was received so I'm gonna route the user to another page so that's an idea for this also works great but the real push notification about that's a different story so then we can set the trigger for this notification and I will just say this should occur in five seconds and the unit in the documentation it says like this seconds and then you'll run into typescript error so what you need is or maybe I will show you why it's not working so if you pass a string your code becomes like this then you can with Visual Studio code dive into unit and take a look Y so this expects an e L local notification trigger unit which is actually in in arm with a string but in typescript we get an error so what we do is we will just import the notification trigger unit dot second and there we go error is fixed and it actually looks pretty good as well instead of the second string so why just why should we type second if we can have an epoch long string like this so now the notification should come up in five seconds and just to give you an example I have this in the related code below this video as well you could also do it just like this with add so in or add both would work for the one-time notification this is just using a date object and then we could also say something like foreground to true so it would be visible even if the app is open but we'll leave this out for now now as we know that we send some data will our notification we can also go back to our cool observables up here and get the message from result that data which is this value and we need to check if this is defined and then we will use result of data my data and otherwise we will use an empty string and then go ahead and show your alert with result title result that takes and the actual message and same for the trigger maybe I'll put some console locks because once we run this on a device it's actually pretty boring so then we got some more things we can inspect once we're all ready so go ahead trigger and then we know which of those are cured okay great scheduled notification observables already let's wrap up with the last three missing functions first one being recurring notifications let's pick a different ID and also let's make this recurring and this is Simon's recurring notification we don't really need data in that case anyway and for the trigger let's make this pretty annoying and say every notification trigger unit minute I'm not sure if second actually works I don't want to crash my device if you're adventurers maybe give it a try one second and see what happens but if your device is completely in functional afterwards it is not my fault alright so this will schedule the recurring notification and it should it cure every minute hopefully and this is also a pretty interesting view that we don't need yet so to repeat it on a daily base let's make it and let's call it good morning well it's actually already noon that I don't care that this is code something epic today alright and the trigger for this is now again a bit different syntax so you see you can use it in a lot different ways like in whether you need add with the real date every or every with an object and for this one we will use an hour and minute as well so right now I have to calculate a bit mmm let's make this 50 whatever and for the hour also 11 well it will be wrong definitely because I need to deployed this I need to build the app and deploy it to your device so I just trying to figure out when we will actually see the notification but I just gonna uh maybe fix those dates again it doesn't really matter it's something you should also do so whenever you watch the video make sure to do this like a few minutes in the future so you can test out your notification and finally to get all of our notifications we should use the scheduled array and then edit in the beginning as an empty array and now say this the local notifications get all and you see you can actually also get the schedule the trigger the ideas so a lot of things and most of them are not really shown on the any native package page so that's what I meant in the beginning so then we will get back result which is an array so we can say this starts scheduled equals result no complaints sounds great if you take a look at it again we will get a promise with an array of those local notification object always a good idea to step into the code at some point so now I'm pretty sure I can move this more to the future and we're done so far so let's build it for Android or iOS whatever you prefer and let's take a look at it on the device all right here's the app so let's schedule a daily notification because my time is running out and the notification will already come in a min and I don't want to deploy it once again I already did it a few times so what you saw is first of all that we got this dialog for the permission on iOS automatically when we do the first notification we can also schedule this no not scheduled we can also trigger this at a later point in our app or in the beginning that's up to us and what we see as well thank God our notification was triggered and I was just a minute or just 20 seconds early in the day yep so here is the trigger object and I'm pretty sure right now my face is again blocking this well here's my face that should be fine so what we see in here can we go a bit better is a lot of information the idea that we said the text and the title and also the trigger for our app so if I now click on get all we also see the same information that this is still scheduled now let's set one for every minute as well and get them all no I'm confused so I'm clicking in this view but I have to type on my device so now there is also trigger and we just have to wait for a minute until the notification arrives but in the meantime let's also try the schedule one from top and also move the app to the bottom yes these are a few of my apps and now five seconds pass and we should see and we should see or did I do a longer time I'm actually confused and not sure at the same time trigger in five seconds yes please one two three four five yes in the recurring message but those are all the come on I just want to see the other notification how to move this it's interesting that I get the notifications on my Apple watch which I'm putting away now because yeah there is one of those notifications maybe now I can receive them when my watch is not connected yes there we go great great Simon not sure why they only arrived on my Apple watch not really what they should do so let's take closer look this one is attention Simon's notification and oops how can I move this now it's closed whatever attention Simon's notification that's the one the easy one and now this is not updating the view anymore great great job reflector thanks for the app whatever and in there we got the data for my hidden message so if we happen to click on this message which is attention Simon's notification we should be able to get this hidden message in our alert view that we bring up and see here my hidden message this is so now we have achieved what we wanted to do why you came here we were able to schedule notifications for a later point with a different syntax to trigger of recurring with units and with the time stem and pass some payload data with it and this now works across ios and android pretty perfectly everything else that we can use like the action buttons the icons the grouping yes thanks for more notifications all of this is not working 100 I also be careful if you use those functionality make sure to test them out maybe if you just target Android then it's no problem and you can use them so in that case again go to the github page of the Cordova plugin which contains a lot of information on how to use the plug-in that's it for today make sure to subscribe to my channel for more great videos and check out the ionic academy.com if you want to learn everything ionic and also right now everything ionic for as well so I'll see you inside the Academy in the next video everywhere enjoy the day and take care [Music]

Channel: Simon Grimm

Views: 35,016

Keywords: ionic, ionic framework, cordova, angular, javascript, html, css, hybrid app, cross platform, ios, android, typescript, web development

Id: 1zKTLSJCrV0

Length: 22min 48sec (1368 seconds)

Published: Fri Feb 15 2019