The Push Notifications Guide for Ionic & Capacitor

[Music] hey mornings what's up welcome back to a new ionic and capacitor tutorial in today we're going to focus on push notifications once again we had local notifications in the past we had one signal in the past but today we will try to make this in the like easiest possible way we will just use ionic capacitor and firebase since firebase API or the project Keys anyway required for Android and we will integrate iOS and that's what we're going to do now so what I did so far is I actually created the whole application so we can go through all the different parts and I don't have to type today because the code is actually not too important today it's not like the configuration so what I did is I started a blank new app with angular and capacitor I also directly specified my package ID if you already have an application then this is of course not an option for you but you can still set this in your capacitor config dot JSON file right here and if you already created your platforms for Android and iOS before maybe get rid of them and create them again or search for the string that's currently in here because it is added in a few places in the iOS and Android folder so that's really important to make your bundle ID work now if you start a blank new app you can simply set it right here it's the one you create in the iOS developer portal and we will take a look at this in a second as well then you can directly go into it to run ionic built and at your platforms and then we're able to configure everything that we need what I did as well in here is I added a little block for push notifications within the plugins object so in here you can set a few different presentation options I think these are actually all available so you can change the batch you might be able to play a sound and this is also to display an inept alert or actually at least show the notification at all when the application is open because when the application is in the background you will get the notification anyway but if the application is already open you usually don't see the this little top notification and this should hopefully change it so that's our capacitor config I will get to the other things that are added in a second for now let's try our integration so what you need is first of all a firebase project you can create a new one you can use your existing doesn't really matter go to project overview project settings or if you're in the fresh project you will also have them button to add an app right here in your overview but here is the place where you can always find it so in here you will see your EPS usually that is empty in the beginning as you can see I added two applications and to do this simply click adapt no weapons of course the wrong type first of all let's go for Android enter your package name which would be now the thing you specified in here so simply put this in I have already used this and a problem you can give it a nickname and then just register the app and download the according file which is a Google services JSON file we can see this right here in our Android app we could actually download it once again this is now basically the Android configuration part for push notifications so download that file the Google services Jason and then within your project go to Android app and put the file right there next to the bill cradle and capacitor build Gradle that's your Google services Jason and as far as I know yeah that's actually everything for Android push notifications so if you only need Android push you can basically skip until the end of the video because what now follows is the iOS push integration and this is not as easy as Android so if ready go to your iOS or Apple Developer Program which means you of course need to be a paid user of this program enrolled in this program and then you can get started by creating a new identifier if you haven't so and you're gonna go with the ID which is what you always do for a new application and once again this is the place where your bundle ID is used and the only important thing is to go down this list and to enable push notifications then just give it a description click continue and you're done let's see when my application is there it is so here's my bundle ID I just gave a random name and we can see push notifications is enabled I think we could actually edit it from here yeah we could but I feel like there's a better way to integrate your push notifications so there are actually two ways you could create a new certificate and then select from down here Apple push notification service then you got a select your application can I do this yeah and then you have to create the signing request you have might have done this in the past you would open the keychain access from there you would go to request a certificate from a certificate authority you run the dialog you save this to disk you upload it to Apple and then you finally get the certificate for push but in fact there's actually an easier way that I also took for this application that is to create a key instead so I think you can only have two Apple push keys at least for my accounts so you've already reached the maximum a lot number of keys for this service you can give it a name and simply enable this and this will give you a dot p-8 file and this file can be you know directly for firebase so now we are back in firebase just note I recommend that you take the key step if you have keys available because for the certificates he then still need to export it a bit I will tell you a bit more about in a second so please if possible go with the keys create the push key download the p8 file back to Android add your iOS application just like we did before with Android so once again at your bundle ID you don't really need any other information and you can download another file this time it's a plist file it's a Google service Google service info.plist yeah there it is I could download it once again now but now the important part is to go to cloud messaging and within your iOS app configuration upload your key I don't really want to delete it right now come up yeah whatever I will just delete it if it's not working now it's because I just deleted it here so for the upload I would know ruffnut drop don't don't do the drop I messed this up once again do the brows enter your team idea detected for this app thank you very much and the key ID is actually right within here so you could look it up right here is also the key ID but basically it's in the name so I below it and then firebase has all the information to contact the Apple push notification service and to send a push to your application if you can't use a key and you need to use a certificate the problem is that I no can upload anything the problem is that the file you receive at the end from the certificate is just a surf file cer that's not the file that expected here so you would have to install a certificate to your keychain by double-clicking then you need to select it and export this a file from this which would then again be a p8 file I think so it's a bit more complicated if you go with certificate it's still possible but I just recommend the key since you see you just configure it upload it here enter the credentials which are pretty obvious your team ID is basically within your Apple Developer account right here and the key ID is inside the key so that's really I think a lot easier now I think we're done with a configuration from firebase we need to make sure that we got the key right here for cloud messaging and we get edit the Android and iOS applications now we can use the Google service info.plist and this file goes straight to our Xcode I already got the file right here let me quickly remove the file just to show you something because because I no need to download it again and there we go download file it's important that you don't just copy that file into your visual studio code or I don't know anywhere else it's important that you really drag the file right here in the application file and click copy items if needed otherwise this file isn't really added to your iOS application and therefore your application wouldn't work okay so we previously edit the Android file to Android there was a lot easier now we've added the iOS file to iOS so what follows now is a bit I would say a bit more complicated because we get into native code now we could do this from Xcode we could do this from Visual Studio code it doesn't really matter do it wherever you want so from Xcode you can go to iOS app taught file which is the file in which capacitor specifies which puts basically additional libraries for iOS are installed and what we need to do is right here after this line word already says at your pots here we have to type on firebase messaging so this will and in the background install the fire based messaging pot the library needed to use the push notifications with firebase once you done with this you can also run npx cap update iOS because cap update iOS will reinstall all the pots specified in your pot file and that's now needed not just a sync or ionic build really we need to update the native platform that is step one or I don't know many steps we already had for iOS but too many too many but in fact that's not the end what we need to do as well is get into the app delegate file this file is inside iOS app app delegate dot Swift and there are three changes we need to apply to this file change number one is at the import for firebase at the top of the file change number two is at firebase app configure where's actually firebase app coming from I'm not really into Swift anymore I guess because you import firebase this is available for JavaScript that's kind of confusing but I can assure you this is the right way to do it so this is step number two and yet for Swift you don't need the semicolon step number three is to get the token correctly there's right now or there should be right now already at the bottom of a file this little if use push and there are too small a plank shion's as far as I know so the first function looks a bit like it looks basically like the second one just a tiny bit different and it's about how your application returns the token back to the JavaScript code and we need to change this to this little line actually you can check out the tutorial link right below the video or you can also go to capacitor ionic framework get started push is it in here nope it's in there own guide I think there we go there is the little snippet as well so this is what we can do did register for remote notifications with device tones so that's what you want to override again check out the link below the video to the code and also for the rest of all the code so with that in place we got the app delegate where our 50 minutes we haven't seen anything working so we should hurry up a bit now again the three changes to the app delegate import configure and this little lock to correctly return our data and I think at this point we can finally get back into our native or not native into our ionic application because I thought it would be a great way to simply have all of this inside a service and therefore I ran to commands I ran ionic generates service services okay just close this FCM and I created a little page as an example for you and how you could navigate within a push notification so additional service additional page go ahead and create it for the service I basically took a lot of the code from the documentation only edit a few tiny changes so again we will just go through it check out the code in the tutorial below this little function is what's actually the only public function of this class I don't need to add public because that's the standard but everything else in here is just private actually there's just one more just to a filter out that we don't run all of this on the web because it's kind of ugly when you always see these red arrows you're on the web you push is not available or anything like this so just at this little statement and this will make your life a lot easier so then once you register for push if you're not on the web this will first of all requests the permissions so if you want to ask for this in a later point make sure that you only call this really at the specified time so don't do it like we do we will immediately call inside our app component the init push perhaps you call it after a user has locked in which might make more sense for your application or maybe even on a details page where the user subscribed to anything for push notifications so really this is the place you want to delay if you want to ask for push notifications at a later point of time in your application as you can see this will then simply register your device and on registration so now after this little dialogue we add a few listeners the first listener is for the registration if it was successful you will now get a token in a lot of tutorials you will also see how this token is now stored to firebase in order to connected with the user ID let's totally legit but we will leave out the firebase database today in order to just really only focus on push registration error is I guess pretty clear to you then we got push notification received this basically always happens when you receive a push so that's why the name is push notification received the other important thing is push notification action perform and this means the user has clicked on the notification in the notification center or I'm just in the bar that comes up from top just notification receives means the app might be in the background and has just received this notification so that's not really a lot you can do in here for now we will just lock it out and for the action performed which means the user clicked on it we will actually do a little routing so within the notification I actually don't know what this is notification and then we got notification again but well that's just it we can wrap some data in the notification and I will show you how in firebase in a minute and if we get the data and the data contains details ID just whatever you could name this blog post ID or product ID whatever you want to go really the information you want to pass to your data to your app could be anything any just additional strings a pale out that you pass to your app with push and we will use this details ID to navigate to URL that we specified in our app routing so here's the place I changed the automatically generated block that comes once you run the generate page command to home slash ID which means we can navigate to the details page and pass an ID so that's exactly what we want to do with push notification actionperformed we've seen that we trigger the unit push right in our beginning and within our details page we can simply use now the route params to get this ID and to display it within our view additionally I added a little function to show you how you could reset the bet card so we specified this in the beginning to use the batch card and we will also increase it from firebase and with a reset batch count we can use the push notifications directly from capacitor called remove all the liver notifications so this should as far as I now remove everything from the control center that you can direct from the top and also clear the batch count okay great we got a lot of stuff in place I have actually deployed the application to all of my devices um I also prepared them with a little screencast so we can now hopefully take a look at it yeah it looks like I can't find my iOS device thank you really that was my intention okay there we go we got two devices I will just put it here oh my head is really uninteresting now so that's not what we need we need to go back to firebase because we now wanna send out some push notifications there are now two ways to use your push notifications our number one is to let's just duplicate this one for now and number one is to send a test message in here you can use your own tokens and you could find them from the capacitor lock so perhaps at the beginning you will see somewhere there it is my token and that's exactly the value that you could use now to test your total I think that's the token I already added yeah basically the same and I can now send a test push and there we see already our push notification but let's also try the standard ways this is really nice for testing just on one specific device and this one here was my information so Simon's push title a little notification text this is really optional both and you can go to next you can select your app let's stick with iOS for now schedule now and here are our additional fields and the details ID that I wanted to pass so I'll just pass the string Simon was here maybe not the best because it's used in a rod well whatever I also enabled the batch let's set this to three and then we gonna push this one out to my device and there we go Simon's push join the ionic Academy we should now also see our bet count was set to 3 because we specified this in the app and I could now go from the Notification Center to my notification click it and I would immediately arrive on the details page simply because we got the logic in place to on actionperformed we grab the details ID from the payload and we were out forward so that means we don't really need any other deep links setup or anything like this since we can just catch the information within actionperformed or notification receive perhaps in here you could also otherwise display a little alert with options for the user let's say go to a chat or check out latest offers really no no need to use any deep link stuff and now I could also reset my count and the application is back to empty let's quickly to wrap this up also check out Android because I don't want I come on I hate it let's just keep it up let's duplicate the Android push once again let's use the same data but target the Android platform schedule now details idea whatever let's keep it like this and then I will push it out and hopefully it arrives on my Android device I'm actually think it's try it again doesn't cost anything so let's push it out next Android next next review and go time go push yes there was a little change to our icon and there is my push so let's use this one go into the app and then we should hopefully be on our second page details page will push 42 I looks like I haven't deployed the latest version here but that's no problem so this was the full capacitor push notifications guide with ionic and firebase this is like the easiest perhaps easiest solution since you don't really need any other external service you just need for Android this one file which is really a very fast configuration for iOS a lot of steps I really recommend you check out the tutorial link below the video which also contains all the code that we've used in this tutorial and then I hope you will send out some great push notifications to users please don't overdo it because push notifications can definitely be a bit annoying so implemented and use your power wisely if you enjoyed this video please hit the like button and stay subscribe so you get notified about all the new tutorials quick wins and other app development and web development videos on this channel if you want to learn more about ionic with in-depth courses a community of like-minded developers so you can learn and build your apps faster you should definitely check out the ionic Academy which is my coat school to help you with everything ionic with a huge library of courses material and a supportive select channel so we can get your app out I hope you enjoyed this video I will see you inside the next video have a great day and happy coding Simon [Music]

Channel: Simon Grimm

Views: 39,222

Keywords: ionic framework, learn ionic, angular, ionic angular, ionic guide, cross platform, hybrid app, ionic for beginners, ionic course, ionic, cordova, javascript, ionic 5, learn ionic 5, ionic 5 for beginners, angular 9, ionic 5 tutorial, ionic 5 angular, ionic 5 course, ionic academy, ionic tutorial

Id: YUr8pw0nO7Y

Length: 25min 52sec (1552 seconds)

Published: Tue Jul 14 2020