React Native: Handling iOS Push Notification with Urban Airship

I recently worked on my first project with React Native (I wrote about it here) and had a lot of apprehension when came the moment to work with iOS Push Notification.

Even if there is already an API to handle Push Notification with React Native, a few actions need to be done to succeed. And it’s definitely not that simple.

This is basically how Push Notification work son iOS :

Bottom line, the React Native API will handle the steps 1 and 2: ask to register for push notification and grab the device token received from APNS (Apple Push Notification Service). Apple manage the step 5.

The tricky parts are the steps 3 and 4. You will need a Back-end Service to store the devices token authorised to receive the notifications (step 3) and to send to APNS server the demand to spread notifications across the chosen devices (step 4).
You have the possibility to create your own service but honestly, good luck with that. The easiest way is to use an existing one, which is the solution I picked and I’ll explain a bit further.

This is the to-do list to add the Push Notification feature to your app:

• Add Push Notification Library to your project
• Configure your project
• Get your certificates
• Configure the Back-end Service
• Use the Back-end Service’s API

I’m gonna focus this articles on the 2 last actions: configure the Back-end Service (which will be Urban Airship) and play with the API.
To know more about how to add the Library to your project and configure it, I suggest you to read this very useful article.
To create your certificates, I recommend you to follow the steps 1 and 2 of this tutorial.

Let’s assume you’ve got your project configured and your certificates created. You should first take a break, enjoy that moment and then continue to read this article.

Choose a Back-end Service

This question was quite easy to answer till a few weeks ago when Parse announced their upcoming death. Because I didn’t want to waste time creating my own server I had to find another hosted solution.

There is a bunch of services but I quickly picked Urban Airship because of the possibility to sign-up to a free plan, which wasn’t the case for the other competitors I found.

Getting started with Urban Airship

What I suggest you is to create straightaway a development and production App on Urban Airship. That way you can configure both at the same time and use the auto-detect Production Mode feature from the SDK to automate the switch.

To integrate the SDK of Urban Airship onto your project, follow this tutorial (which is the same as the page you will get once registered).

At this point you should be able to send a Test Push from the dashboard to a real iOS device (it’s not possible to test with the simulator since this one can’t handle Push Notification).

Also once a device registers to the Push Notification feature of your app, the device token will be store by Urban Airship (step 3 of the diagram above). That way, the notifications will be sent to the authorised devices only.

The last step is to send through Urban Airship a Push Notification request to the APNS server (step 4, keep in mind the step 5 will be handle by Apple).

Use Urban Airship API

Congratulation, you’ve done the hardest part.

The last thing is to communicate from your server to the APNS server. But because your app is not native, it’s not possible to use the Swift or Objective-C SDK. The only way to achieve it is to use the JavaScript API.

The API is quite easy to use. And you will get a lot of possibilities to segment the devices you want to send the Push Notification to.
Let’s start with a basic example, you want to send a Push Notification to all the devices registered after a specific action on your app. This is the code to do it:

let urlUrbanFetch = ‘https://'+ <UrbanAirshipAppKey> +’:’+ <UrbanAirshipAppMasterSecret> +’@go.urbanairship.com/api/push/’;
fetch(urlUrbanFetch, {
 method: ‘POST’,
 headers: {
  ‘Accept’: ‘application/vnd.urbanairship+json; version=3’,
  ‘Content-Type’: ‘application/json’,
  Authorization: ‘Basic <master authorization string>’
 },
 body: JSON.stringify({
  “audience”: “all”,
  “notification”: {
   “alert”: “A unicorn has been detected!”,
  },
  “device_types”: “all”
 })
}).then((response) => response.text())
.then((responseText) => {
 console.log(responseText);
})
.catch((error) => {
 console.warn(error);
});

To use it into your app, you need to change UrbanAirshipAppKey and UrbanAirshipAppMasterSecret with yours. Go to your app’s dashboard > Settings > APIs & Integrations:

Be careful because those informations are different between the Dev and Prod versions of your app on Urban Airship.

The code above is straightforward. What I asked is to send a notification to all devices (“audience”: “all” and “device_types”: “all”) and with a custom message (“alert”: “A unicorn has been detected!”). You can use this code with the iOS simulator to send a notification to a real iOS device, that way you will be able to check the response logged within the Chrome Debugger.

As I said before, there is a lot of possibilities to specify to who you want to send a notification (OS, segment, tag, …) and the specificities of the notification (message, sound, badge, …). To know everything about it, check out the documentation.

I hope this article avoided you headaches! If you have any questions or feedback, let me know here or on Twitter and I will try to answer :)