How to Send Push Notifications to Your Ionic 4 App With OneSignal

[Music] everyone what's up this is Simon and today we're going to talk about a tutorial that you requested a lot of times so today we will talk about push notifications in our ionic 4 application and we will use a great service called one signal to integrate them there are a lot more other services that we could use but today we will just focus on using one signal to integrate it with iOS Android into our ionic application so let's do this this is editing Simon I just want to bring one thing to your attention in this video I use a dark mode for my editor so previously we use the light mode now we're using a dark mode and let me know below in the comments which of those modes you prefer maybe not personally but inside the videos so you know what to do I've already created a blank new ionic application and I just need to take one more because that's going to be a long tutorial so what we did so far is creating a new ionic project and then install the ionic 1 signal Cordova plugin and also the ionic native one signal packages so these packages are just like all the other things inside ionic native pretty great if you also want to do some icons stuff you're gonna have to go through this part but for us the only thing we need to do is install them and then move on to the app module and import them add them to the providers just like we always did so far so let's close all of this and we will actually jump around a bit because so the integration will take some time then we will see how many time we got left so where do we continue actually there's so many parts of where we could continue but I will say you first of all go to one signal and let me just bring in basically everything that we need so if you don't get in one signal account you can easily sign up for free and use the service for free as well so I'm not paid or I don't get any money from one signal I just like their service so then you go ahead and create a new application and once you're in location you can see the native app platforms and here we have to add Apple iOS and Google Android which I already did but I will guide you through the steps that we need to take in order to get our apps set up in here so if you get your application first of all make sure that it got the right identifier so this is the bundle identifier and we will use it both on Android and iOS that's basically the app ID that will be used in your profiles so make sure it is something of course not like this that would be my example but pick something whatever it is with your domain name or your real name and then maybe the project name and that's it and then you're gonna have to keep this in mind and use it in a few other places so if you go to your Apple Developer Program so developer.apple.com and then two certificates identifiers profiles and then to the app ID section you can go ahead and register a new app ID in in here you're gonna need first of all the name that's whatever and then in here you need to make sure that you put in the bundle ID that you took from right here so at this one in here you can also enable the push notifications but I think this will also be enabled by default later on we'll another step so create this app ID and then you should find it in the list of your app IDs next step is to go to one single settings and click on the Edit icon and this will take you from here to the documentation and from the documentation you can now find a cool tool called the provision data tool right so if you work with push notifications in the past you know it actually involves a of certificate stuff and set up for iOS that's what you see in this screen but one thing will make this pretty easy by giving us this cool provision data plug-in service tool whatever you want to call it you simply get started you fill out the credentials it will retrieve the list of your iOS developer account and then you can select the app ID you picked in the beginning and in the end this all given or give you a p12 file and also I think let me look it up I don't know two or three other files you can save them just in case you need them but what you really need is the p12 file and also the password that's next to it so go through the provision ATAR which will create the iOS push profiles for you okay so then you can move back then you can finally go to this again click Edit and then you will be able to upload your p12 file you can input the private key password and hit save and then if you're lucky you should see that whatever your certificate expires in one month and it should be active at that point okay so so far so great what we want to do as well is let's open the platforms iOS workspace file so that's the native file you will get once you build the ionic application for iOS so if you haven't used this before this is Xcode the aply the environment that native iOS developer used I used this previously when I work with Swift and objective-c so I kind of like it a bit what we need to make sure now is that our bundle identifier in here is exactly what we got here and normally when you run I own a cordova built iOS that's exactly what will happen so they will put the name in here if you already built this once then you change the bundle identifier and build it again you might get an error to remove the platform and again then everything should be fine what I recommend is well is to check automatically manage signing and select the team urine this will create some profiles for you and it's actually a bit easier for you if you're already part of a team and they've created certificates I know they can help you to integrate the right certificate as well in here sorry what you need to check now is go to the capability step and make sure that the background nodes with remote notifications and also push notifications is enabled so if you remove the platform editing and install the Cordova one signal plug-in to your application that should normally already happen everything should be fine so far and that's just one more thing and it's quite hard to show you right now because it's at the top left of your screen and that's why you got oh it's out of the screen so said so if you're got Xcode open go to file and workspace settings and in here you will now see some settings and from here you can use the legislative so normally I think it's a new build system or something but in order to make the one signal stuff work you got a pig legend see milk system otherwise you will receive an error once you try to build your application on your device okay one more thing as well if you do this for like the first time the chances are high that you receive some kind of strange era when editing the package or running the project and that might be because your heaven install the cocoa pods or they're outdated or anything related to them is wrong so as you can see actually one signal already gives you this information that you might need to run gem install cocoa pods and then pottery for update to update the cacao pods which are I think used within the SDK of one signal so correct me if I'm wrong this is like dependency management tool for native iOS projects a bit like NPM I would say for the packages we use within our ionic application so great tool so far but it might cause some trouble so keep this in mind that you might have to do this okay so at that point you got the iOS application configured you got it in one signal you got the certificates uploaded you get the build system ready so now you could deploy this application to your device and run it of course we haven't written the actual code that should be executed we will do this in a second but before we do this let's just quickly take a look at how we can finish the android integration so for n right let me bring it up we gonna need the firebase console so if you haven't created a project within firebase just create a new project and I'll bring this in here so this is a blank firebase project you don't need to use any of the hosting database authentication or whatever simply click the project settings right here heat over to cloud messaging and from here you will find the server key and the legislature key and the sender ID and that's exactly what you're gonna need for your one signal app so let's close this and then you go to the Settings Google Android you edit this and you will find the firebase server key which is the server key and you will find the firebase sender ID right here so copy them save them and then your Android integration is also configured and hopefully green so make sure both of these are active and then we can finally write some ionic code or JavaScript code ionic code is somehow anything it's wrong right it's a bit wrong so what we need to do is once our ionic applications start we're gonna register the device to one Sigma and later on we need to react when we retrieve a push not if you occasion so almost cold just like I like it now not at all I like one coffee so what we need to do is or what I recommend is that you first check if you're running on the cordova platform because if you run ionic surf this part will be simply skipped you don't have real push notifications on the browser actually it is possible to have like native push applications or what push as you can see all browsers except Safari and again interesting actually I'd never did the setup for this hmm doesn't look too hard at all but we're not gonna use this so we will try to only perform the push setup if we're running on a Cordova plug-in platform and then what we need to do is first of all call this stop one signal so make sure you got one signal import it and inject it into your constructor and then I just noticed that I'm using the dark mode which I sometimes use so I will edit something into the beginning because I know people won't look to the end I will just ask in the beginning again if you like this and so if you watch this now you already got the question so that's like Inception here what we want to do is first of all call the initialize function so we call start in it and now we got a pest in the app ID from one signal and the Google project number so let's look them up simply go to keys and IDs and here we got the one signal app ID and then we need the Google project number which we have seen already here and there we go copy paste and then our initialization is ready so once we're done with everything we can call the end init function we're gonna pass a bit more into this so in between this initialization block we're gonna call one signal in [Music] displaying and let me just look up the time okay twelve minutes that's fine so that's setting up how come on one signal will be shown when one is received while your app is in focus so that's interesting so by default this is set to enable art which can be helpful during development that's right but we gonna just disable this we're on a dangerous path here so let's pick none what would notification do actually I don't know I don't know you're gonna have to try it so with this ready we now need two more blocks that are interesting and the first one is one signal handle notification opened and this is observable so we can subscribe to the result the second one is pretty much the same but this is called handle notification received so notification received callback to run when a notification is received whether it was displayed or not that means simply just what we did in here if the app is already opened currently we won't show anything but still this block would run because we received a push notification in the background and this block will be called when notification is tapped from the notification shade Android or Notification Center iOS ok so we got those two places in which we can perform some action and this is now the part where things not really get tricky but that's something you're gonna have to decide for your application so I haven't added any routing to this application normally you might want to send you users to a specific URL come on I need more coffee to a specific URL in your application but for us we will just show an alert view now I'll bring in some some I will bring in some okay I just picked the let's do this in another order because otherwise my brain explodes so from the data we actually get nice code completion so you can simply tap into data and then you will see what's included in here and the most important or the interesting stuff is in the payload rate so we will find the body the title and also something called additional data in which we can pass basically everything that we want so in our case or what I came up with for this tutorial now we might pass a little task that we can then display on our alert button so you could also pass in the button names or this could be the ID of a profile we're gonna open or an article you're gonna open and promote whatever it is you can pass it to the additional data and then read it in here and find them and we will see how to pass this information to the push notification of course in the end as well and so for notification opened I will just skip this a bit and just once you highlight that data a notification payload is needed in this case and in that case it's just data payload I'm not exactly sure why this is the case I think I also said this in the last video when I use one signal I just don't know just make sure that you pick the right payload from the object of course otherwise you would anyway get an error within your code okay so that's all for the push notification setup I have already deployed the application to my iOS device which I now recommend you do as well and if you have an Apple watch I recommend you take it off because I've been trolled by this little watch a few times already because I was trying to send myself push notifications which ended up on the watch and I didn't really notice it and I was debugging why there were no notifications so just put the watch aside and let's do the push so if you lock in for the first time you will see oops interesting let's see bu all users you will see that a new user is added and from here you will see player ID that's basically I think what one signal is using to target the users and from here I recommend that you add your user to test users I can only remove myself because I am already added what is also interesting to note here is you can add different text to your users so let's say some users are subscribed to a specific topic or whatever then you can put these kind of information on to the user object in one signal so there's a lot of segmentation going on here that you can do as you can see you can create new segments and add the users to the segments you can filter them and all kind of these great things that you can do but we will skip this for now in this video if you're interested in like doing some segmentations that filtering sending notifications you know what you do leave a message and of course hit the like button so the video gets trending know what we're gonna do now is to send the notification to the device I just got the iOS device can you can you see this actually or should I I should add the reflector application I just noticed that this is otherwise not going to happen like it should so let's connect our application with the great code zero eight four seven can only be a great application so where we go there we go let me bring it in and now oopsie-doopsie not that big my friend I think this should be above my image so let's try to send a message to our application now things get interesting let's do a new message new push we want to send it only to my test device or a new case to your device from the video awesome my message this is so that's just a little preview for iOS it should look like this and then you can you find a lot of things which we don't want to do only we want to pass in some additional data and that's right the connection to this part so we are looking for the task so let's add a task and this is join I own a Academy of course this won't do anything it's just a try or example you can leave everything else blank and then confirm send immediately began sending confirm 101 sent message and hopefully we should know there we go I really love when the part what push notification actually works I'm I'm always a bit scared I did these videos in the beginning and basically I I fear today in the morning I fear to get up and create this tutorial because it was always real pain to create these push notification tutorials but as you can see it is now super easy from the video my message the action joint ionic Academy that's exactly what we created in our code in the beginning and that's what called because we received the notification okay that's a bit different so let's see what happens if I close my application and I will set up everything just like before whatever I will just leave it like it is and then no I will change this changed just so no one can say that's I don't know some kind of scamming here so we want to send it where's my no reflector no my application come on why why why you do this to me why why why are you why is this only working if the application is open that's just that's just not the idea of the reflector why are you gone I don't know I really don't know come on so here we go once again let's send the message and yes there we go there we go okay now I forgot to click it and then there we go action change so you can see it is the unification notification the new notification that we created from our device so from here were to go bonus code okay if I got one thing which actually makes one thing pretty awesome and that is the REST API I don't know how I could forget about this maybe because I was basically already heating down what to get lunch so what you can do besides using this web dashboard and everything you see in there is simply making an API request - there one signal API so here is one example to make a little post week rest you gotta need the app ID of your application then you get to target some segment I will just use active users that's just the default segment but again let's do the segmentation aspect you could also target users based on a little filter very low please don't leave a little filter or whatever ID and then as well put in all the information you had previously and also put in the authorization header while you use the rest API key that you can find under keys and settings or keys an IDs of your one signal app and then you go ahead you send this out and then I knew it I knew it then you gotta put up your Apple watch again so in order to receive actually I saw it already on my device yep there we go now so there it is I just want to prove that both works the web dashboard if you just want to specific or target some users and do it occasionally or use the REST API if you already got a server in place and that brings us to the end of the video I hope you enjoyed this video on real push notifications for both iOS and Android Willborn signal it's a great service it is free to get started it is a REST API that you can use from your own service so it is basically a plug-and-play you can easily add this to your application that already maybe exists and it's a great alternative to doing it on your own which can be very tricky so if you enjoyed this video make sure to give the like to subscribe hit the bell I can do everything to support this channel and then I will catch you hopefully inside the next video [Music] you

Channel: Simon Grimm

Views: 42,312

Keywords: ionic, ionic framework, cordova, angular, javascript, hybrid app, cross platform, ios, android, web development, ionic 4, ionic 4 tutorial, ionic 4 course, ionic 4 app, ionic 4 for beginners, learn ionic 4, ionic 4 angular, ionic4, angular 7, angular 7 tutorial, learn ionic, ionic for beginners, ionic tutorial, ionic angular, ionic guide, ionic course, ionic onesignal, ionic 4 push notifications, ionic 4 onesignal, ionic push notifications, ionic notifications

Id: 0j0Jz5ka5Co

Length: 25min 11sec (1511 seconds)

Published: Tue May 14 2019