Setup Push notifications for iOS apps using Ionic

Create certificates, integrate with APNs, setup JavaScript functions

Posted by Aditya Pratap Singh on April 1, 2016

Setting up push notifications for iOS apps can be one of the most tedious tasks for iOS mobile development. In order to understand and setup it, we will first understand the entities involved and the flow during the complete process.

Entities

  1. App: The app for which we need to configure the Push Notifications
  2. App Server: This will be used to trigger the Push notification to devices
  3. Apple Push Notification Services (APNS): This is the service provided by Apple to send push notification to registered devices
  4. Device-token: This is a unique token generated by APNs when the device registers with it, using the device’s certificate. This token is sent to App Server and used to uniquely send a message to the device via APNs
  5. Certificates: Certificate identifies the communication between our app server and APNs and is used for authentication and security

The Flow

Below are the main interactions which happen during the setup of the connections

  • Handshake between APNs and App Server to setup Trust

    Setup trust between App Server and APNS Source: Apple

  • Device Token Generation

    Setup trust between Device and APNS Source: Apple

  • Send the Push Notifications Once the above steps are completed, while sending the Push notification our App Server sends a Push Notification request to APNs, using its certificate and devicetoken for the required device. APNs uses App server’s certificate information (The .p12 file info) to authenticate the App Server and once done uses the device token to uniquely identify the device and send the Push notifications to it.

In order to setup Push notification for an Ionic app for iOS we need 2 things

  1. Setup the certificates, provisioning profile
  2. Setup plugins & JavaScript code

Setup certificates: This step requires that you have a Apple Developer account. We need to create a certificate and use to to create a provisioning profile.

  1. Create a Certificate Signing Request:
    • Open Keychain Access tool on Mac
    • Open Keychain Access > Certificate Assistant > Request a Certificate From a Certificate Authority Request new certificate
    • Enter name and address. These are optional Enter name and address for the certificate
    • Save it to disk. This will generate your certificate singing request file and it will be saved as .certSigningRequest file Save the Certificate signing request
  2. Create an App Id: Apple identifies every app by a unique app id added in dev center. This is by convention named in reverse-DNS format and will be same as app’s bundle id (mentioned in config.xml as ios-CFBundleIdentifier). E.g. com.aditya.myapp
    • Go to Apple Developer Center
    • Open Certificates , Identifiers & Profiles Apple Developer center
    • Open Identifiers section and click + to add a new app Click + to create new app
    • Provide an app name and select the checkbox for Push Notifications under App Services Provide name for new app and add services
    • Provide app prefix and suffix. Prefix can be the default one, which is the Team Id. while suffix can be the app’s bundle id (in reverse-DNS format) Add app prefix and suffix
    • Select Continue. This will show the app as Configurable
    • Save the app
  3. Configure the app to send Push notifications:
    • From list of apps, open the newly created app
    • Click Edit and select the push notification service which says Configurable Configure app for push
    • Enable it by clicking on Create Certificate Create certificate
    • This will take you to this screen. Since we already have the .certSigningRequest, press Continue Create certificate continue
    • On the next screen locate .certSigningRequest file and once selected, it will give option to download the certificates for the app configured with Push Notification services. Download certificates
    • Download the dev version of the cert. This will be a file named aps_development.cer
    • Double click it to add it to keychain
    • Locate this cert in keychain. It will be present with the name of the app
    • Right click to export this certificate as .p12 file and save
    • Provide a password when prompted and note it down for later purposes. This is optional, but recommended
  4. Provide the .p12 generated above to your app server for App Server to interact with APNs for any further communications.

    Congrats. You have completed the steps for developing Push Notifications for the development version of your app. You need to repeat above steps for production version of your app

  5. Create the Provisioning profile: The provisioning profile is used in development to limit the access of the app to certain devices. It is a XML file which consist information about the AppIDName, ProvisionedDevices, DeveloperCertificates etc.
    • Under Certificates , Identifiers & profiles, select Provisioning Profiles
    • Select the + in the top-right of the screen to create a new iOS Provisioning Profile.
    • Select iOS App Development as profile type, then Continue. Create provisioning profile for iOS app development
    • Select your App ID created in Section 1, then Continue.
    • Select the iOS development certificate you created, then Continue.
    • You will now be asked which devices will be included in your provisioning profile. Select all the development devices then Continue.
    • Provide name for the profile, then hit Generate.
    • Download the profile from the next screen and install it by double clicking on it Download provisioning profile
    • This will add the provisioning profile to XCode and you are ready to use the Push Notification on development machine. You can provide the path to the provisioning profile while generating a manual build using xcodebuild as below

Setup push plugin and JavaScript code

  1. Add phonegap-push-plugin to the app using: ionic plugin add phonegap-push-plugin This will expose a global window object PushNotification

  2. Register for the Push notification. The push.on('registration') event callback will provide us the devicetoken id mentioned in Devicetoken generation step. This will be send to our app servers

  3. Now use the push notification payload from push-notification-data broadcasted event

Note: There is an issue with plugin that when the app is killed, and a Push notification is tapped the push.on('notification') callback is not called. This is a known issue and I have mentioned a solution here