Ionic Push Notifications

Ionic Push Notifications with iOS

Click Here for TL;DR

Learning Ionic Push Notifications

Okay so my latest hurdle I had to jump with Ionic Framework – Ionic Push Notifications with iOS.

Below are the steps I ended up taking to successfully set up Push Notifications.

An important note is that I am only working up to successfully returning a registration token. I am using Amazon’s SNS to manage my push notifications so I will not be going into generating and sending notifications.

Another important note is that push notifications are not currently supported in the iPhone emulator. You will need to run the application build on your actual device which requires an Apple Developer’s License.

Step 1

Installing the Cordova Plugin. For setting up Push Notification in our Ionic app we will need to install the PushPlugin for Cordova:

1
cordova plugin add https://github.com/phonegap-build/PushPlugin.git

We can now access this plugins capabilities via ngCordova. Note that ngCordova can be used independently of Ionic. Add the following dependency to your application:

1
angular.module('myApp', ['$cordovaPush']);

Step 2

We will now want to configure and register our device once it is ready. Remember we are only concerned about iOS in this example. There are many resources out there for Android as well. Check out DevGirl’s blog.

We will use Ionic’s $ionicPlatform.ready() method to achieve this. There are many advantages to using Ionic’s platform ready opposed to Cordova’s document.addEventListener('deviceready', callback, false); the main one in my opinion being that Ionic’s platform ready doesn’t break the app when you run it in the browser for quick testing.

Below is the minimum code required to retrieve our registration token:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
angular.module('myApp', ['$cordovaPush'])
    .run(function($ionicPlatform, $cordovaPush){
        function register() {
            var config = {
                "badge": "true",
                "sound": "true",
                "alert": "true"
            };
            $cordovaPush.register(config).then(function (token) {
                console.log("Register success ", token);
            }, function (err) {
                console.log("Register error ", err);
            });
        }
        $ionicPlatform.ready(function() {
            //checking for window.cordova allows this to fail gracefully if dependencies are missing
            if(window.cordova){
                register();
            }
        });
    })

Notice that the only thing being done here is that console logs are spit out on registration success and registration error. Since we are using SNS all we need is the registration token, Amazon takes care of the rest. There will be of course be logic to pass the registration token along to SNS

Okay so here is where I got stuck. I would run my application and receive the following registration error message:

no valid ‘aps-environment’ entitlement string found for application

Nothing I tried changing in my application files would fix this. That’s when I realized the problem lied outside my application files and was actually a configuration error with my xCode dev environment.

Step 3

The first thing I had to do was create a new Provisioning Profile and AppID that allowed for APN (Apple Push Notifications). To do this I logged into my Apple Developer Account online. I then navigated to the Profile’s section:

Apple Member Center

I then clicked on Provisioning Profiles under iOS Apps

Provisioning Profiles

I then clicked on App IDs and New (+)

Create A New App ID

I continued to fill out the information to create the new ID being sure name an Explicit App ID and to enable Push Notifications. It is important to use an Explicit App ID with no wildcards as APN doesn’t allow for this.

Setting Up APN with Explicit Domain

Now Click Continue -> Submit -> Done to finish creating your new AppID.

Now for the Provisioning Profile using the new AppID.

Back on the screen where we selected App ID’s we are going to look a little further down and select Development under Provisioning Profiles then click New (+)

Using Your Provisioning Profile in xCode

Once the new Profile screen appears we will select iOS App Development and click Continue.

Next we will select the new AppID we just made and click Continue.

On the next two screens you will select your certs and devices you want to associate with the profile and click Continue.

Finally give your profile a name and click Generate.

Step 4

Back into xCode. Here we want to make sure that your new provisioning profile with Push Notifications enabled is available.

To do this go into xCode Preferences -> Accounts

From here double click on your name and the following window will appear:

Accessing xCode Accounts

From here you can click the refresh button. Make sure your new provisioning profile is listed.

Step 5

Okay the last step! Now we need to make sure our Bundler Identifier matches that of our new Profile. To do this click your application in the left sidebar of xCode, click General, and make sure the domain in the bundle identifier field matches that of your new profile.

Resetting the Bundle ID here will work for the one build but as soon as you re-build the application it will reset. To solve this go into your Ionic App’s config.xml file and change line 2 to match your new Bundle ID:

1
<widget id="com.domain.yourapp" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">

Now the correct Bundle ID will be listed after each build.

That’s it! I hope this was helpful. As I mentioned at the beginning this just addresses setting everything up to the point of getting a registration token back. Thanks!

In The End

There are three main parts or focuses to using push notifications in your Ionic App.

1) Download and inject the Cordova Plugin into your application:

1
cordova plugin add https://github.com/phonegap-build/PushPlugin.git

We can now access this plugins capabilities via ngCordova, add the following dependency to your application:

1
angular.module('myApp', ['$cordovaPush']);

2) Accessing $cordovaPush in your application to retrieve a registration key:

Below is the minimum code required to retrieve our registration token:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
angular.module('myApp', ['$cordovaPush'])
    .run(function($ionicPlatform, $cordovaPush){
        function register() {
            var config = {
                "badge": "true",
                "sound": "true",
                "alert": "true"
            };
            $cordovaPush.register(config).then(function (token) {
                console.log("Register success ", token);
            }, function (err) {
                console.log("Register error ", err);
            });
        }
        $ionicPlatform.ready(function() {
            register();
        });
    })

3) Creating the proper AppID, Provisioning Profile, and adding the right Bundle Identifier to your Ionic App config file. You can see the steps to this above.

Pro Tip:

Ionic Platform utility gives you access to all kinds of handy device checks. You can check for iOS, Android, deviceReady, etc.. Below is a link to the documents and complete list:

ionic.Platform – Utilities

6 thoughts on “Ionic Push Notifications with iOS

  1. mark lovett

    Thanks, I’ll give it a try. Trying to decide if I want to work with ANS Amazon Notification Services. Have you worked with Amazon services at all? By the way, what kind of app did you build?
    Mark Lovett
    marklovettdesign.com

    Reply
    1. Jacob Post author

      Let me defer the Amazon question to someone working on the app with me (we went with Amazon and he was the one who implemented it). Look for his reply here shortly.

      Reply
    2. Eric

      Mark – I assume by ANS, you are talking about Amazon SNS (Simple Notification Service) which provides the uniform interface for handling mobile push notifications.

      We are using this for several projects and so far everything has worked out well for us. We prefer using SNS for our mobile push notifications because we can code everything against a uniform interface versus having to implement an individual service per notifications service type (GCM,APN,etc). This is the driving factor behind Amazon SNS.

      They also expose several other types of endpoints (Email,SMS,Http) that you can also push data to behind the same uniform interface, but we have yet to need or utilize these.

      SNS has the concept of ‘Topics` which you can subscribe endpoints to, but these have limits in regards to number of topics that are allowed at any time , so we ended up implementing our own topic subscriptions service that does basically the same thing, but gives us the control that we need. Thus we store (in addition to also being stored in SNS) the device endpoint, so that we can tell SNS which device we want to push data to.

      Using SNS and coding against the API and/or SDK seems to work well for us. However, be cautious of the immaturity of the Amazon SNS developer console. It is still very buggy and caused a lot of confusion for me early on (basic buttons didn’t work, confusing error messages,etc).

      Hope this helps.

      Reply
  2. belka

    I am following the same steps but when i try to activate push notifications in Capabilities-push notification…it shows me an issue “add the push notification entitlement to your app id”. Can anyone help me plz?

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *