Ionic 3 Push Notifications One Signal

Almost every application you will write will at some point involve push notifications. Luckily for us, push notifications are a breeze to integrate into our Ionic 3 application thanks to OneSignal’s fantastic plugin.

In this example, we are going to demonstrate how to setup our Ionic 3 application to receive push notifications.

We will start by creating a blank Ionic project and installing Ionic Native’s One Signal plugin

Before we begin, we’ll need to update our app’s id in our config.xml file. This is important because it helps identify our application on the Google Play and App Store (more on this later).

To ensure that things installed properly, we’ll try to build against iOS by issuing the following command:

At this point, running this resulted in the following error:

To get around this, we need to update our pods and reinstall the plugin using this sequence of commands:

Trying to build against iOS should run just fine and we’ll be able to continue with setting up our application.

Let’s open the following link file in our platforms/iOS directory: MyApp.xcworkspace

We need to register the app identifer in our config.xml in order to receive push notifications. There are two ways to go about this: we can head to developer.apple.com and set things up ourselves or we can use xcode. For the sake of simplicity, we are going to have xcode do the work for us.

Next, we’ll need to create an account and a new app on OneSignal https://onesignal.com/.

There is no way in which I could write instructions on how to set up your .p12 file that are better than OneSignal’s documentation, which can be found here: https://documentation.onesignal.com/docs/generate-an-ios-push-certificate.

Note: If you want to review the steps, you can find a YouTube video embed at the bottom of this article.

After uploading our .p12 certificate, we will then be asked to select our platform. We are going to choose Cordova.

Finally, we are going to get our app id, let’s jot this down and get back to the coding part of our app (don’t close this window yet).


First, let’s create a PushNotificationService.ts

PushNotificationService.ts

The reason for this line is to ensure that we are on a device before initializing OneSignal (which can only be called within a cordova example).

Finally, we are going to initialize our plugin when the platform service gives us the signal that Cordova is ready to be used.

Launch the app

After accepting, if we go back to OneSignal and check if we are subscribed we will get our confirmation screen.

We are going to send a push notification using OneSignal.

The push notifications was received when the app was running, which does not usually lead to the best user experience.

To avoid this, we can add the following line to our PushNotificationService service

This will ensure that we do not show a push notification when a push notification is sent.

We have barely scratched the surface on push notifications and OneSignal support. The OneSignal API has a very rich API that allows us to tag users, segment them, and much more.

You can find a repository of this feature on Github by click here and a full video explanation can be found below:

If you enjoyed this article, enter your email below to get free updates!