Ionic Push Notifications

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

Get push notifications working with Ionic in minutes

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.

🚧

Using Ionic with Cordova?

This guide is for projects using Ionic with Capacitor. Head over to the Ionic with Cordova Push Notifications guide.

Prerequisites

You'll need:

  • A working Ionic installation
  • For Android:
    • A device or emulator with Google Play services installed and up-to-date
    • A Firebase account
    • An application with minSdkVersion >= 21
  • 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.

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

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.

Step 3. Add the SDK

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

Create your Ionic application if you haven't already. See the official Ionic guide for more details.
Make sure to add the required platforms using ionic capacitor add android or ionic capacitor add ios, then run ionic capacitor sync.

Install our Cordova plugins, compatible with Capacitor:

npm install wonderpush-cordova-sdk
npm install wonderpush-cordova-sdk-fcm
ionic capacitor sync

📘

Upgrading to the latest version of the SDK

Run this command:

npm upgrade wonderpush-cordova-sdk
ionic capacitor sync

Android - Configure the SDK

Edit your android/app/build.gradle file:

android {
  defaultConfig {
    // Make sure minSdkVersion is 21 or higher
    minSdkVersion 21

    // Note that it's important to keep the double quotes as part of the third argument
    // as this represents a string in Java code
    buildConfigField 'String', 'WONDERPUSH_CLIENT_ID', '"YOUR_CLIENT_ID"'
    buildConfigField 'String', 'WONDERPUSH_CLIENT_SECRET', '"YOUR_CLIENT_SECRET"'
    buildConfigField 'String', 'WONDERPUSH_SENDER_ID', '"YOUR_SENDER_ID"'
  }
}

Replace YOUR_CLIENT_ID and YOUR_CLIENT_SECRET with the appropriate values you find in the Settings page.
Replace YOUR_SENDER_ID with the Firebase Sender ID from step 2.

iOS - Add push entitlement, background mode and service extension

Open the xcworkspace file of your project in Xcode:

open ios/App/*.xcworkspace
Add device capabilities

Select your app's main target and, under the Signing and Capabilities tab, click “+ Capability”

Add the following capabilities, one by one:

  • Background Modes,
  • Push Notifications.

Make sure the Remote notifications background mode is checked:

Create the notification service extension

In Xcode, select File / New / Target..., and choose Notification Service Extension:

Enter WonderPushNotificationServiceExtension as the name for your new target:

When Xcode prompts you to activate the new scheme, answer Cancel to keep Xcode building and debugging your app instead of the extension:

If you activate by mistake, switch back to your app's scheme from the dropdown menu located next to the play button.

Set the Deployment Target of your Notification Service Extension to 10.0:

Make sure to use Automatic Signing for the extension target:

📘

If you're getting the following error, make sure to set up Automatic Signing for the extension:

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

Edit the file ios/App/Podfile and add the following at the bottom:

target 'WonderPushNotificationServiceExtension' do
  platform :ios, '10.0'

  # Pods for WonderPushNotificationServiceExtension
  pod 'WonderPushExtension', '~> 4.0'
end
cd ios/App
pod install
open *.xcworkspace

📘

If you get the following message: CocoaPods could not find compatible versions for pod "WonderPush", just run pod update and pod install again.

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.

For Angular

In your src/app/app.component.ts file, add the lines preceded by the Add this line: comment:

import { Component } from '@angular/core';
 import { Platform } from '@ionic/angular';
 import { SplashScreen } from '@ionic-native/splash-screen/ngx';
 import { StatusBar } from '@ionic-native/status-bar/ngx';
+import WonderPush from 'wonderpush-cordova-sdk';
 
 @Component({
   selector: 'app-root',
@@ -13,6 +15,7 @@ export class AppComponent {
   constructor(
     private platform: Platform,
     private splashScreen: SplashScreen,
     private statusBar: StatusBar
   ) {
     this.initializeApp();
@@ -22,6 +25,7 @@ export class AppComponent {
     this.platform.ready().then(() => {
       this.statusBar.styleDefault();
       this.splashScreen.hide();
+      WonderPush.subscribeToNotifications();
     });
   }
 }

For React, Vue and vanilla JS

Add the following lines to your src/index.tsx:

import WonderPush from 'wonderpush-cordova-sdk';
WonderPush.subscribeToNotifications();

iOS

Open your IOS/App/App/AppDelegate.swift and add the following, adapting YOUR_CLIENT_ID and YOUR_CLIENT_SECRET with the values you've noted above:

import WonderPush

func application(_ application: UIApplication, willFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
        WonderPush.setClientId("YOUR_CLIENT_ID", secret: "YOUR_CLIENT_SECRET")
        return true
}

Finally, we'll modify the code of the Notification Service Extension you created in Step 3. Replace the whole contents of NotificationService.swift or (NotificationService.h and NotificationService.m for Objective-C) with:

import WonderPushExtension

class NotificationService: WPNotificationServiceExtension {

    override class func clientId() -> String {
        return "YOUR_CLIENT_ID"
    }

    override class func clientSecret() -> String {
        return "YOUR_CLIENT_SECRET"
    }

}

Adapt YOUR_CLIENT_ID and YOUR_CLIENT_SECRET with the values you've noted above, the same you just gave to your AppDelegate.

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!