Many of our customers use Apache Cordova or the Ionic Framework for their mobile apps as a way to deliver cross-platform mobile apps to their customers and employees. While Azure Notification Hubs doesn’t directly support these frameworks, Ionic supports most Apache Cordova plugins and there’s an official PhoneGap Push plugin you can use as well as a community-built plugin for Azure Notification Hubs apps running on Apache Cordova.

The PhoneGap Push plugin doesn’t support Azure Notification Hubs directly, but you can use it for the device-side part of the device registration process, using your app backend for the rest. I’ll describe that option later in this post.

The community plugin for Azure Notification Hubs is not supported by the Azure Notification Hubs team, but many of our customers use it for their production apps today. For Apache Cordova developers, the instructions included in the plugin’s readme show how to use the plugin in your apps. For Ionic developers, later in the post I’ll highlight sample applications for Ionic 3 and Ionic 4 I built using the plugin so you can see how to use it for your Ionic apps. These samples are just that: samples, provided to show you how I did it while recognizing that they might not work today based on changes in the Ionic framework and the underlying Apache Cordova (for Ionic 3 apps and Ionic 4 apps built on top of Apache Cordova) or Capacitor (Ionic 4 apps) runtime.

Using the PhoneGap Push Plugin in an Apache Cordova App

The PhoneGap Push plugin handles the process of obtaining a device’s push token from the device manufacture’s Push Notification Service (PNS). After following the instructions for adding the plugin to your Apache Cordova project, your app will have a call to initialize the plugin using code similar to the following:

const push = PushNotification.init({
  android: {},
  ios: {
    alert: 'true',
    badge: true,
    sound: 'false'
  },
  windows: {}
});

Next, you’ll add a registration event listener like the one shown below:

push.on('registration', data => {
  console.log(data.registrationId);
  var deviceToken = data.registrationId;
  console.log(data.registrationType);
});

With that in place, the value in the deviceToken variable is the unique push token for this device you’ll need to send notifications to the device using Azure Notification Hubs.

Send that device push token to your app backend then use the Azure Notification Hubs Installations API to register the device for notifications. You can find instructions on registering devices in Azure Notification Hubs in the Registration Management documentation.

Configuring Azure Notification Hubs in Ionic 3 Apps

Ionic 3 apps are built on top of Apache Cordova, and the Ionic team did an excellent job of enabling Cordova plugin support in Ionic 3 apps. To build an Ionic 3 app that works with Azure Notification Hubs, simply:

• Create a new Ionic project following the instructions at https://ionicframework.com/docs/v3/intro/installation/.
• Add the third-party cordova-azure-notification-hubs plugin to the project following the instructions at https://ionicframework.com/docs/cli/commands/cordova-plugin

With the plugin in place, initialize the plugin and respond to notification events as documented in the plugin’s documentation.

We created a sample application demonstrating how to use the plugin in an Ionic 3 app. The sample implements an Ionic Provider for Azure Notification Hubs that manages registration and processing of notifications as they come in. When the provider has important information (like registration success or a notification message) it sends it to the application’s main form as an event notification which causes the app to update its UI.

Configuring Azure Notification Hubs Ionic 4 Apps

Ionic 4 delivered big changes for Ionic. The Ionic team made a lot of changes to the framework plus released Capacitor, their alternative for Apache Cordova. Capacitor still supports Apache Cordova, but only a subset of the existing plugins. Ionic also built many common plugins into Capacitor, so you no longer ‘need’ Cordova plugins to deliver certain functionality to your app.

One example of this is the Capacitor Push Notifications plugin which adds support for registering for and processing push notifications to Capacitor. If you follow the procedure to create an Ionic 4 project, add the cordova-azure-notification-hubs plugin to it, and add the code that registers for and processes notifications like you did for Ionic 3 applications, you’ll find that your application registers successfully, but never ‘receives’ any notifications.

What’s happening is that the cordova-azure-notification-hubs plugin is properly managing the registration process with Azure Notification Hubs, but the Capacitor Push Notifications plugin intercepts all notifications that arrive on the device, circumventing the Azure Notification Hubs SDK.

This means that to automatically register for and receive notifications, your Ionic 4 application must use both plugins. The cordova-azure-notification-hubs plugin to manage automatic registration, and the Capacitor Push Notifications plugin to process them when they arrive. Special thanks to Matthew Podwysocki (Microsoft) and Mike Hartington (Ionic) for figuring this one out.

We created a sample application that shows how to use the plugin in an Ionic 4 app. The sample implements the same Ionic Provider for Azure Notification Hubs that manages registration, but adds additional code to use the Capacitor Push Notifications plugin to process received notifications. With that in place, it’s basically the same UI and logic as the Ionic 3 sample (updated for changes in Ionic 4).

The Capacitor Push plugin also supports a similar registration event listener you can use to grab the device push token and send it to your app backend for Azure Notification Hubs registration. Doing this eliminates the need to use the cordova-azure-notification-hubs plugin in your Capacitor application.

Conclusion

As you can see, Ionic developers have options for implementing Azure Notification Hubs in their apps using a third-party Cordova plugin. We hope that the sample applications we provide help you implement Azure Notification Hubs in your Ionic applications.