Cordova Push Notifications

How to set up WonderPush push notifications on Cordova cross-platform apps

Install push notifications in Cordova apps in 4 steps

Setting up push notifications for your Cordova app is easy. Push notifications are the ideal solution to re-engage users and bring them back to your app.

Estimated setup time: 5 minutes.


You'll need:

  • NodeJS
  • Cordova v9+
  • For Android:
    • A device or emulator with Google Play services installed and up-to-date
    • A Firebase account
  • For iOS:
    • XCode
    • An iOS device such as an iPhone or an iPad
    • An iOS Push Certificate (here's a how to obtain it)

If you haven't already, sign up for a free account on


Upgrading from the previous version 2.x of our Cordova SDK?

Follow this guide to update your integration.

Step 1. Create your project

Click on New Project:

Choose a name for your project and select Android and iOS as platforms then click Create:



Already have a project?

Just add the Android or iOS platforms to any existing project by going to Settings, selecting the first tab named after your project and clicking Edit. You'll be presented a form that lets you add a platform.

Step 2. Setup your push credentials

Android - Add your Firebase credentials

  1. Locate your Server key and Sender ID as explained in the Firebase / Locating your Sender ID and Server key article.

  2. Go to your WonderPush dashboard, in the Settings page, select the Platforms tab and click on Android application.

  1. Paste the Server key.
  2. Click Save.

iOS - Upload your push certificate

Head to the Apple developer website, go to Accounts, then Certificates, Identifiers & Profiles and click the plus button to add a new certificate. Choose the type Apple Push Notification service SSL (Sandbox & Production):


Then select your app ID (be sure not to select the app ID for the notification service extension):


Follow the rest of the wizard to download your certificate, and open it so it shows in Keychain Access.

We now have to properly export it along its private key before uploading them in the WonderPush dashboard.

  1. Launch Keychain Access on the Mac where you created the certificate request.
  2. In the Category section, select My Certificates.
  3. Find the newly created certificate and expand its content by clicking on the triangle icon.
    You’ll see both a certificate and a private key.
  1. Select both the certificate and the key, and choose File > Export Items.
  2. From the File Format pop-up menu, ensure P12 is selected.
  3. Enter a filename in the Save As field, then click Save.
    The certificate and key are saved to the location you specified as a .p12 file.

Go to Settings / Platforms, click the iOS application section title and fill in:

  • your push certificate by clicking the Browse button,
  • the push certificate password if appropriate.


Be sure to check how to use WonderPush in both Sandbox & Production.

iOS - Setup automatic provisioning

Provisioning is required to run your app on an actual iOS device or submit your app to the AppStore.
Cordova can setup automatic provisioning via a build.json file in the root folder of your project:

    "ios": {
        "debug": {
            "codeSignIdentity": "iPhone Developer",
            "developmentTeam": "YOUR_TEAM_ID",
            "packageType": "development",

A full and up-to-date build.json is available the Cordova website.

We recommend setting up automatic provisioning. Please note that the Notification Service Extension will need to be signed with its own application identifier and automatic provisioning sets it up for you.

Here's a typical error message when the extension is not correctly provisioned:

Provisioning profile "XXX" has app ID "YYY", which does not match the bundle ID "YYY.WonderPushNotificationServiceExtension".

Step 3. Add the SDK

Create your cordova application if you haven't already, see the official Cordova guide for more details.

Take note of your Client ID and Client Secret from the Platforms tab of the Settings page:


Now run the following command:

cordova plugin add wonderpush-cordova-sdk --variable CLIENT_ID=YOUR_CLIENT_ID --variable CLIENT_SECRET=YOUR_CLIENT_SECRET
cordova plugin add wonderpush-cordova-sdk-fcm --variable SENDER_ID=YOUR_SENDER_ID

Replace YOUR_CLIENT_ID and YOUR_CLIENT_SECRET with the appropriate values you find in the Platforms tab of the Settings page, in the Android application or iOS application section. Replace YOUR_SENDER_ID with the Firebase Sender ID from step 2.


iOS apps: Do you already have your Notification Service Extension?

Look for a colored message in your output that warns you that the Notification Service Extension could not have been added automatically.
Look at our Adding a Notification Service Extension guide for the manual steps required.
If you do not follow these steps, you won't be able to use iOS 10 rich notifications, but everything else would work normally.


Upgrading to the latest version of the SDK

First, take note of the variables you used by reading the cordova.plugins.wonderpush-cordova-sdk object in your package.json. If you forgot this step, your version control will help you.

Run this command:

cordova plugin rm wonderpush-cordova-sdk --variable CLIENT_ID= --variable CLIENT_SECRET=

And follow these instructions at the top of this step to re-add it.

Step 4. Add required code

Let's add the code that will prompt users to subscribe to push notifications. We recommend you place this code in a more suitable moment in the user journey, but we'll do it at launch time for now. In your www/js/index.js file:

function onDeviceReady() {
  // Prompt user for push subscription
// In this example, we'll prompt the user as soon as the 'deviceready' event is fired
// There's good chances you'll find a more suitable moment in the user journey
document.addEventListener('deviceready', onDeviceReady);

Setup AndroidX

Starting v3.0+, WonderPush uses, and requires you to use Android X. If your app is already using AndroidX, just skip to the congratulations below: you're done!

Otherwise, read on: it's an easy migration.

Open your package.json and take note of the version of cordova-android it is using in the dependencies.

Using AndroidX with cordova-android v9.0+

Make sure you have enabled AndroidX by adding the following line in your config.xml in the Android platform:

<platform name="android">
  <preference name="AndroidXEnabled" value="true" />

Using AndroidX with cordova-android v8.0+

Run the following command to add AndroidX support:

cordova plugin add cordova-plugin-androidx --save

Edit your config.xml and make sure you use 21 as the android-minSdkVersion, or add the following line:

<platform name="android">
  <preference name="android-minSdkVersion" value="21" />

Receive your first push!

Build & run your application and get the permission prompt you've configured:

Wait a couple of minutes and receive the default welcome notification:


Congratulations, you're done!