iOS Push Notification for IONIC


I’ve been working with Ionic for almost 2 years. There’s no doubt it’s a top notch framework for building hybrid apps as it offers a native looking UI out of the box, easy to use CLI, it uses Cordova plugins for native APIs like Camera, Geo-Location, Push Notification and many more.

Over the year while developing apps for both iOS and Android, I had to implement Push notification service on some of my apps. As Apple’s dev tree is much more complicated than android and lack of community support caused me enormous amount of errors and debugging. So this post is for them who’s banging their heads or hammering their keyboards right now.

There are three steps.

  • Install Push plugin and configure your app.
  • Create APP ID
  • Generate APNS Certificate

First fire up your terminal and goto project’s root directory and install push plugin using the following command :

cordova plugin add phonegap-plugin-push --variable SENDER_ID="1234567890"

You don’t need to worry about the SENDER_ID, just leave as it is. To check if the plugin is properly installed, run the following command:

cordova plugins ls

You’ll see a list of installed plugins in your app. Or you can check your package.json file, you’ll see something like this:

Then add the following codes inside you service :

var push = PushNotification.init({
ios: {
alert: "true",
badge: true,
sound: 'false'
}
});
PushNotification.hasPermission(function(data) {
if (data.isEnabled) {
console.log('isEnabled');
}
});
push.on('registration', function(data) {
console.log(data.registrationId);
// registrationId is the device token.
//Store or send it to your server based on your requirements.
});
// The following event will be triggered each time a push notification is received by a 3rd party push service on the device or when you will tap on the notification.
push.on('notification', function(data) {
console.log(data);
// Handle your data here
});
push.on('error', function(e) {
console.log(e);
});

That’s all on your end. Next we will create our APP ID and APNS certificate in our Apple developer account.

Now login to your apple developer account and click on Certificates, Identifiers & Profiles > APP IDs. Then click on + button on top right and create a new APP ID for you app.

Your APP ID name

Next, your Bundle ID must be the same as your app package name. Open your config.xml file and copy the widget id here. (example: com.ionicios.pushnotification)

Then check Push Notification from APP Services and click continue. Next page will look like this :

Click Register and Done to complete the process.

Next we will create APNS Certificate.

Login to your Apple developer account and goto the App ID you just created and click on it.

You’ll see that Push notification status for both Development and Distribution is “Configurable”. That means we haven’t configured our Push Notification service for the app. Now click on edit and scroll down to Push Notification section and choose which certificate you want to create.

At this moment we will create a Development certificate. So click on Create Certificate.

Click continue when you’re in Create a CSR file section. On the next page Generate your certificate, it’s asking you to upload a .certSigningRequest or CSR file from your Mac.

To create the CSR file, launch your Keychain Access from your Mac and select the following:

Enter the information required and choose Saved to disk. Click continue and save it in your folder.

Now upload the certificate we have just created and click on continue.

Your Development SSL certificate will be generated.

Download the certificate. It will be saved in .cer format. Double click it to install the certificate in your Mac’s keychain access.

Launch keychain access and select login and My Certificates from Category from left side panel and identify the certificate you just installed which is now paired with a private key.

Select both the certificated and private key and right click on it. Select Export Apple Development iOS Push Services. Save the file as p12 fromat.

Enter the password for exporting. Remember the password as it will need in future. Click OK to complete exporting the certificate.

Now go back to App IDs and Click on your app id and you’ll see that Push Notification status for Development is changed to Enable.

Now use that p12 file based on your preference on you back-end server or wherever necessary.

Similar way you’ll create certificate for Distribution when you’re ready to launch your app for distribution on App Store.

For further query you can comment below or ask me at hasansadmans@gmail.com. I’ll be glad to help you.

Happy Coding :)