Free up to 1MM monthly messages. No credit card required.
Previously, I covered this same topic for Android push notifications using Google Cloud Messaging (GCM). Today, I am going to show you a step-by-step tutorial how to send and receive iOS push notifications for devices via APNS.
Also, I expect you to have a lot of patience. Setting up all the requirements from Apple may not be as smooth as you expect.
I have created this demo, which simulates an Internet of Things desktop controller that lets you change the room temperature setting. When you set it over 80°F, it sends your iOS device a push notification.
Unfortunately due to lack of openness, I cannot distribute ad hoc iOS apk easily. If you have an Android device, try the demo on Android.
Apple Push NotificationService (APNs) is a service for iOS devices to send and receive push notification messages. The typical flow looks like:
To send a push notification:
To developer and distribute your iOS app, you need to create an SSL certificate associated to an App ID and a provisioning profile.
This step is not going to be fun, but you must complete to be able to start developing for iOS. It is more complicated than I described in the last article, so I am going to use .gif animations to show you exactly what you are going to do.
To create an SSL certificate for a push notifications, first you need to generate a Certificate Signing Request (CSR).
You are going to create a unique App ID.
Once the APP ID registration is completed, you need to configure it to make to work with push notification.
Now you are going to create a private key from the downloaded certificate.
Phew, I hope you survived the process. You are now finally going to write some code.
In this example, I am using PhoneGap’s open-sourced sibling, Cordova. First, create a project using Cordova CLI.
$ cordova create push-demo com.mydomain.push PushDemo
$ cd push-demo
$ cordova platform add ios
If you already have created the
push-demo project at the previous tutorial for Android, skip the first two lines and just add an iOS platform to your Cordova project. Also, skip the next section.
Cordova Push Plugin allows your application to receive push notifications on Android, as well as Amazon Fire OS, iOS, Windows Phone and Windows8 devices.
The plugin can be automatically installed via the Cordova CLI:
$ cordova plugin add https://github.com/phonegap-build/PushPlugin.git
This will install PushNotification.js file under
/plugins directory, and you need to copy this to somewhere under
/www, where you will be working.
Include the PushNotification.js and pubnub.js in
When you created a new project template, you should already have an
/www/index.js with a few functions that PhoneGap uses have already filled in. Where the
addEventListener method registers for
deviceready event type, change the name of the listener to the starting point of your app, let’s say
init. And in your
init function, create a plugin instance, then register the device as follows:
To support both Android (GCM) and iOS (APNs), install a Cordova Device plugin:
$ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git
and separate each platform, using
device.platform API method:
tokenHandler callback is called, you should successfully be able to obtain the device token.
To test APNs push notifications, you must test on your actual device. This feature is not supported on emulators.
When you are ready, try
alert(result) instead of
console.log to view the device’s token in an alert popup on device.
The token should look something like: 24c99cd5c39b283c58b554509c999999937aadb7b4bxxx0043cb363af6…
In the next step, I am using the static token value, however in reality, you probably want to store the value in PubNub and get the value from client to send a message to a targeted iOS device.
Now your iOS device is ready to receive iOS push notifications via APNs, so let’s create a desktop web to send messages.
This diagram below is the same as the diagram shown at the intro before Section 1, plus a user-flow from a desktop browser is included to describe the demo for this tutorial. The desktop is where a user changes room temperature, as publishing the information to PubNub service (step 5 in gray). If the room temperature setting is above 80F, PubNub connects to APNS (step 6) to send a push notification to the registered device (step 7).
pubnub.js to your
index.html, then initialize PubNub.
In the demo app, I am simulating an Internet of Things user interface with a fake temperature controller. Once a user sets the temperature too high, let’s say, 80°F, it sends your device a push notification via APNs. This is a simplified code to handle the user interaction:
To use the feature, you need to activate the feature at Admin portal.
$ openssl pkcs12 -in CertificateName.p12 -out CertificateName.pem -nodes
There are two step to send a message via APNS:
To register a device to a channel, use
mobile_gw_provision API. The basic usage is as follows:
Note: In the code, I used a static value for the gcm_regid to simplify the code sample, however in a real scenario, you are handling multiple devices. You should take advantage of PubNub Storage/Playback Service – store a registration ID from Cordova app, and grab the ID from web!
Once the device is registered to PubNub, it calls the callback that sends a message payload to APNs service. Use a PubNub message object,
PNmessage, then use
apns to set the GCM message object.
Now you should be able to send iOS push notifications to your iOS device from a web browser without setting up your own server! Awesome!
I used a simplified code sample to keep the tutorial easier to follow, but if you wish for the entire source code of the web app demo, you can view it on GitHub, and the source code for index.js in Cordova app is on Gist.
I hope you enjoyed this tutorial!
The source code is available in the github repository
Take a look at the top trends that are the most effective in attracting customers and reducing churn, and how you can incorporate...
Comparing the major game engines: Unity vs Unreal Engine vs Corona SDK vs GameMaker Studio, including the benefits and cons of...
Sockets (aka socket programming) enable programs to send and receive data, bi-directionally, at any given moment. This tutorial...