Making Sense of Cordova Push Notification Options and APIs


Update: (2/6/2016) Updated Mobile Apps support now that a Cordova client is available.

Updated: (10/27/15) Corrected my assessment of the new push plugin. You can read more about this plugin in my post Updates to My Cordova Push Sample and new Cordova Push Plugin.

Updated: (10/20/15) Added more information on sending push notifications from various backends.

The ways in which you can implement push notifications for Cordova apps can be confusing and a bit murky. This is because a) push notification architectures are somewhat complex, having both client and backend parts, and b) there’s more platform native stuff to worry about than for most Cordova client apps. The article that I published in MSDN Magazine only covered a small, simpler scenario with just Android. As such, I wanted to detail everything I know about the available options for implementing push notifications in a Cordova app in this blog post, including the following:

  • Importance of the backend service (and why Azure is so worth trying).
  • Client libraries and plugins for push notification in Cordova apps.
  • Service-side APIs you can use for sending notifications.
  • Configuring a push notification topology (mostly using Azure).
  • Sending notification from the backend.

Note that this post is point-in-time picture, and hopefully push notification support for Cordova apps (particularly the client plugins) will improve in the future.

The Basic Push Notification Architecture

While discussing push notifications options, libraries, etc., it’s important to keep in mind the basic architecture and process flow of a push notification topology. For this, we’ll turn to my favorite image courtesy of the Azure Notification Hubs docs:

Notification Hubs

When deciding what plugins and libraries to use, the important considerations are what backend service are you going to use and which client platforms you want to support in your Cordova app. Just as a reminder, these are the four primary platform-specific push notification services (PNS):

  • Apple Push Notification Service (APNS) – supports iOS devices.
  • Google Cloud Messaging (GCM) – supports Android (but not Amazon Kindle) devices.
  • Windows Notification Service (WNS) – supports Windows Store, universal Windows, and Windows Phone Store (>8.1) devices.
  • Microsoft Push Notification Service (MPNS) – supports Windows Phone 7 & 8 (“Silverlight”) devices, and will not be supported going forward.

Choosing a Backend Service

The specific Cordova plugin and libraries that you will end up using will likely depend on the backend service that you choose, especially when the backend has built-in support for push notifications. This backend service must do the work of tracking the handles (tokens/channels) distributed by the PNS to a given device and sending notifications to a given device by using that handle. You can prop your own service to do this work, but then you do have to know how to talk to the major push services for Apple, Google, Microsoft, Amazon, etc.

While you could use any backend service to send push notifications to your Cordova app, there’s a huge benefit to creating an Azure backend service or publishing your service to Azure—namely Azure Notification Hubs ( I discuss this in my MSDN Magazine article). This Azure service, which you can not only use with Azure Mobile Services but with any Azure published service or on-premises service, is designed to work with all major PNS services. Notification Hubs does the “heavy lifting” of managing device handle registrations and makes it easy to send notification from various backend platforms, such as: ASP.NET (C#), Azure Mobile Services, PHP, and Node.js. You simply have to configure each PNS with the notification hub.

Because Mobile Services prides itself on being a more turnkey service for mobile apps, it also exposes registration APIs for push notifications, which are passed to the associated notification hub. You can access these registration APIs by using any Mobile Services client SDK, including the Cordova plugin.

Client-side Libraries for Cordova Push Notifications

There are four main Cordova client options that I have come across for registering a device with the PNS1, registering the handle with the backend service,2 and handling incoming notifications4 (note that these superscripts refer to specific steps from the above graphic). Most of these libraries are designed to work with a push topology that includes Azure Notification Hubs.

PushPlugin

The original push notification plugin for Cordova, which does the basic work of requesting handles1 and handling incoming notifications4, has been deprecated.  (The new version of the plugin is much more platform agnostic; I was also able to reduce the amount of code required for push by about 40%.)
Use this plugin if you have created your own custom backend solution or when registering with Notification Hubs through Mobile Services.

  • Supports: APNS, GCM, WNS
  • Pros: Supports all major platforms and is fairly platform-agnostic (at least from a client perspective).
  • Cons: Doesn’t talk to any backend services. You need to perform your own local storage of the handle.

Notification Hubs plugin

This plugin was developed by MS Open Tech folks and it does the work of PushPlugin1,4 in a much more platform agnostic way, and it stores the registration info locally. Plus, it also registers the device and handle with Azure Notification Hubs2. This is a good option for using Notification Hubs without a Mobile services backend.

  • Supports: APNS, GCM, WNS, MPNS
  • Pros: Supports all major platforms. Single plugin integrates getting handles/tokens and registering (native) with Notification Hubs. Client code is platform agnostic (which is what you want from Cordova, right?).
  • Cons: Doesn’t support template registrations (which is a huge bummer for Cordova). Not yet in an official Azure project repo. Not integrated with the Mobile Services plugin.

Mobile Apps Cordova client

Azure App Service Mobile Apps now has (beta) Cordova support available, and is maintained by the Azure Mobile team.  This plugin supports registering with Notification Hubs2 and is the way that Microsoft Azure wants you to add push notifications to your Cordova app. Note that offline sync support will be added to the plugin before GA.

  • Supports: APNS, GCM, and WNS. 
  • Pros: Integrates with Mobile Apps to enable Notification Hubs registration2.
  • Cons: You must use a Mobile Apps backend.

Mobile Services plugin

The official Cordova plugin for Mobile Services supports registering with Notification Hubs2, but only for ANPS and GCM. It also stores the handles locally, but you still need to use PushPlugin.1, 4 This is the scenario that I highlighted in my MSDN Magazine article.

  • Supports: Only APNS and GCM
  • Pros: Integrates with Mobile Services client to enable Notification Hubs registration2.
  • Cons: Only supports APNS and GCM. Still requires PushPlugin.1, 4

Mobiles Services Push Sample

This was my first attempt at using push notifications with Mobile Services in a Cordova app, which I wrote back before the Mobile Services plugin existed. This sample includes my own push registration library that accesses the Mobile Services registration REST APIs for Notification Hubs (which IMHO are better than the Notification Hubs REST APIs)2 and stores the returned handle locally . Like the Mobile Services plugin, this sample also uses PushPlugin,1, 4 however it does also support MPNS. It’s pretty easy to extend to other platforms supported by PushPlugin—I know folks have also added WNS support (sadly, I don’t get much time to support this sample).

  • Supports: APNS, GCM, MPNS
  • Pros: Leverages the Mobile Services client to enable Notification Hubs registration (3). Easy to extend to WNS.
  • Cons: Doesn’t (yet) support WNS. Still requires PushPlugin.1, 4 Sample project is maintained only by me, and it’s not really a plugin.

Server APIs for Sending Notifications

Assuming that you are using Azure Notification Hubs to send push notifications to your Cordova app from your backend service,3 these are the Azure Notification Hubs libraries that you need to use:

Backend service

Notification Hubs-enabled library  Template Push API
Mobiles Services (.NET backend) Mobile Services .NET Backend PushClient.SendAsync() with TemplatePushMessage
Mobiles Services (node.js) Mobile Services JavaScript backend push.send()
ASP.NET Notification Hubs .NET NotificationHubClient.SendTemplateNotificationAsync()
Node.js Azure SDK for Node.js NotificationHubService.Send()
Java Java Notification Hubs SDK NotificationHub.sendNotification() with Notification.createTemplateNotification()

For backend servers not supported by these APIs (like for PHP/Python/Ruby), you can always just use the Notification Hubs REST APIs.

Configuring the Push Topology

For each supported client platform, you must have your app configured to access the PNS.1 You also need your backend service configured with the PNS to be able to request push notifications on behalf of your app using the PNS-generated handle.3

Client configuration

These client configuration steps are usually done in the client project must vary in complexity, depending on the PNS (and Apple is by far the hardest):

  • GCM:
    1. Enable Google Cloud Messaging.
    2. Set the Google Project ID in the client (PushPlugin only).
    3. Create a new server key (make note of the API key value, which is the GCM credentials).
    4. (Optional) Setup the Android emulator for testing.

    Android is the only app that doesn’t require you to build the native app and register using the platform IDE.

  • WNS:
    1. Build the Windows native app project from the VS Cordova project.
    2. Open the generated Windows project in Visual Studio.
    3. Register your app with the Windows Store.
    4. Go to the Microsoft Account developer center, select your new app, and make a note of your package SID and client secret, which are the WNS credentials.

    NOTE: You need a Windows Developer account to register for push notifications.

  • MPNS:

    For folks still trying to support Windows Phone 8 and Windows Phone 8.1 "Silverlight" apps, the good news MPNS doesn't require authentication, as long as you send less than 500 notification a day (per channel).

Backend Configuration

When using Azure Notification Hubs, the final step for each platform is to set the authentication credentials from each PNS in the Azure portal. Note that when you set the push credentials in Mobile Services, they are simply passed-back to the associated notification hub.

Conclusion

Push notifications is a key requirement for many mobile app scenarios, and the PushPlugin does provide push notification support for Cordova apps. While Azure is a great platform for sending push notifications, either through Azure Mobile Services or directly from Azure Notification Hubs, the Cordova client support in Azure libraries for push notification is not quite as robust as it could be, especially if you are trying to support Windows apps when using template notifications. In the meantime, you can fall back on PushPlugin and the Notification Hubs REST APIs to support these scenarios.

Anyway, I hope that helps to clarify things, at least a little bit.

Cheers!

Glenn Gailey
Comments (9)
  1. Fabio says:

    Hi Glenn! Thanks a lot great post!

    I try to use Ionic + PushPlugin and the Azure Notification Hubs REST APIs but I doesen't find any example of javascript call to Azure Notification Hubs

    Where I can find some examples?

    thanks a lot

    Fabio

  2. @Fabio:

    If you are looking for an example of sending notifications from a Node.js backend application using the Azure Node.js SDK, you can see this here: azure.microsoft.com/…/notification-hubs-nodejs-how-to-use-notification-hubs

  3. Simon MacDonald says:

    Hey Glenn,

    Your post links to the new version of the push plugin but describes it like it was the old version. If you take a look at github.com/…/phonegap-plugin-push you'll see we've smoothed over one of your cons "Requires platform-specific client code". The new API is consistent and we've been doing a pretty good job of constantly releasing it.

    I'm actually one of the maintainers, along with some folks from Microsoft. If you ever want some assistance updating your sample app just let me know. I'm @macdonst on github, twitter, etc.

    Cheers…

    Simon

  4. @Simon:

    @Simon,

    Ha, I actually just tonight finished updating my Cordova push sample to use your new push plugin (I still need to test it on iOS). You are right that the plugin itself is much more platform agnostic, which is nice. I was also able to reduce the amount of code required for push by about 40%. I am working on a blog post about that, and I'll update this post too.

    Cheers!

    Glenn

  5. Simon MacDonald says:

    @Glenn

    Okay, that's great news. I'm trying to get as many people over to the new push plugin as that is the one we are supporting going forward. Let me know when the post is up and I'll make sure to give it some love.

    Simon

  6. Vinicius says:

    Hi @Glenn, and wns implementation? how could I succeed? It is funny to think that Microsoft build this amazing resource, and not include yourself products (Windows Phone 8.1 and above)

  7. @Vinicius

    There will be WNS support for the upcoming Cordova plugin for Azure Mobile Apps. There will be a beta release coming soon, so keep an eye out here or on the Azure blog: azure.microsoft.com/…/mobile

  8. Vinicius says:

    @Glenn, thanks, I'm keep an eye out. Keep going foward, I've trying contact with you on  Twitter through @candidodmv account.

Comments are closed.

Skip to main content