WonderPush Documentation

The WonderPush Developer Hub

Welcome to the WonderPush developer hub. You'll find comprehensive guides and documentation to help you start working with WonderPush as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    

Ionic Quickstart

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

Setting up push notifications for your Ionic 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.

Prerequisites

You'll need:

  • NodeJS
  • Ionic
  • 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 wonderpush.com.

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 in the Firebase project Cloud Messaging settings.
In your Firebase project console, click the *gear icon* (⚙️) and select *Project settings* and go to the *Cloud Messaging* tab.

In your Firebase project console, click the gear icon (⚙️) and select Project settings and go to the Cloud Messaging tab.

  1. 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

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.

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:

ionic cordova plugin add wonderpush-cordova-sdk --variable CLIENT_ID=YOUR_CLIENT_ID --variable CLIENT_SECRET=YOUR_CLIENT_SECRET --variable SENDER_ID=YOUR_SENDER_ID
npm install @ionic-native/wonderpush

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 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:
https://dash.readme.io/project/wonderpush/v1/docs/ionic-quickstart

ionic 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 src/app/app.component.ts file, add the lines preceded by the Add this line: comment:

// ...
// Add this line:
import { WonderPush } from '@ionic-native/wonderpush/ngx';

//...
export class AppComponent {
  constructor(
    // ...
    // Add this line:
    private wonderPush: WonderPush,
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      // ...
      // Add this line:
      this.wonderPush.subscribeToNotifications();
    });
  }
}

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!

Ionic Quickstart


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

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.