Push notifications are widely used on both web and mobile applications to deliver notifications. Push notifications are a great communication mechanism since they can be used to send notifications even when the application is closed. Push notifications can improve the user experience and keep them engaged with the application. For example, push notifications can be used for personalized communications, deliver offers and discount promotions to users, and more.
This post explores three different options for sending push notifications with the Ionic framework while discussing the pros and cons of each approach to give you a better understanding.
Ionic is a leading framework used to build cross-platform mobile apps and Progressive Web Apps. Hence, there are multiple approaches to implementing push notifications in Ionic. For all the 3 main options: Firebase FCM, One Signal, and WanderPush, I'll be providing an overview followed by a step-by-step guide for implementing push notifications with each approach.
1. Using Firebase Cloud Messaging (FCM)
Firebase is one of the most popular platforms used to create web and mobile applications. It provides a messaging service named Firebase Cloud Messaging (FCM) that allows sending of free, cross-platform messages. In addition, FCM provides various features to send push notifications, including customizing and user grouping.
Pros of Using FCM
- Infrastructure support allows developers easily start application development.
- Provides a free basic plan with all the required services, including hosting, databases, and storage.
- It provides the skeletal frame of all the fundamental things required for running and promoting an application.
- Good documentation.
Cons of Using FCM
- Limited support for iOS features.
- Real-time synchronization issues.
- Limited querying capabilities.
Tutorial: How to Implement Push Notifications with FCM
This approach uses Firebase and Ionic Native FCM plugin to implement push notifications.
Step 1 - Creating a new Firebase project
First, you need to create a Firebase account and a new Firebase project. You can use your existing Google account to sign in to the Firebase console. If you are using Firebase for the first time, you will see a screen like the one below. If not, you will see your existing project list.
Then, you can create a new Firebase project by clicking the Create a Project button.
Step 2 - Enable Cloud Messaging
After creating the project, select the Cloud Messaging service under the Engage section from the left menu.
There, you will see four options to add a new application: iOS, Android, Web, and Unity. For this example, I will be using the Android option.
After clicking the Android option, you will be redirected to a new wizard. There you need to enter the package name of your Ionic application.
Then, it will give you a file named google-services.json. Make sure to download and add it to your project folder.
Then, follow the steps given by the wizard to add the Firebase SDK and finish the wizard.
Step 3 - Installing the Ionic Native FCM plugin
Now, you need to install the below plugins to your project.
1
2
$ ionic cordova plugin add cordova-plugin-fcm-with-dependecy-updated
$ npm install @ionic-native/fcmAfter installation, import ionic-native/fcm to app.module.ts file.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { AppComponent } from './app.component';
...
import { FCM } from '@ionic-native/fcm/ngx';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [ FCM ],
bootstrap: [AppComponent]
})
export class AppModule { }Step 4 - Updating the code
Then, you can import the plugin to your pages and implement notification actions.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
import { Component } from '@angular/core';
import { FCM } from '@ionic-native/fcm/ngx';
import { Platform } from '@ionic/angular';
@Component({
selector: 'app-main',
templateUrl: 'main.page.html',
styleUrls: ['main.page.scss'],
})
export class MainPage {
constructor( private fcm: FCM, public plt: Platform) {
this.plt.ready().then(() => {
this.fcm.onNotification().subscribe(data => {
if (data.wasTapped) {
console.log("Background");
} else {
console.log("Foreground");
};
});
// Gets the latest token in case of a token is refreshed by the app
this.fcm.onTokenRefresh().subscribe(token => {
// Register the token in back-end if needed.
backend.registerToken(token);
});
})
}
// This method subscribes the user to a specific notification
channelsubscribe() { this.fcm.subscribeToTopic('enappd');
}
// Gets the FCM token for the app from Firebase
getToken() { this.fcm.getToken().then(token => { // Register the token in back-end if need.
backend.registerToken(token);
});
}
// Unsubscribe users from individual notification channels
unsubscribe() {
this.fcm.unsubscribeFromTopic('enappd');
}
}Step 5 - Sending Push Notifications
Now, your application is ready to receive push notifications. You can go to the Firebase console and easily create push notifications.
2. Using OneSignal
OneSignal is a notification service that allows developers to integrate push notifications into their web and mobile applications easily. It is highly scalable and comes with features like real-time reporting, segmentation, and automated messaging. In addition to the push notifications, you can use OneSignal for sending emails, in-app messages, and SMS. OneSignal provides four pricing options: Free, Growth, Professional, and Enterprise.
Pros of Using OneSignal
- It is easy to integrate.
- Omnichannel support is available.
- Good documentation.
Cons of Using OneSignal
- High prices.
- Support is only available in English.
- Performance Monitoring can be difficult for the first few times.
Tutorial: How to Implement Push Notifications with OneSignal
This approach uses OneSignal, Firebase, and onesignal-cordova-plugin to implement push notifications.
Step 1 - Creating a OneSignal account
You can easily create a free OneSignal account by visiting their registration page. After registration, go to the Apps page, and you will see a UI like the one below:
Step 2 - Creating a new OneSignal app
Then, click on the New App/Website button to create a new app. You will see a list of application platforms supported by OneSignal. For this example, I will use Google Andriod.
After that, you must enter Firebase Server Key to configure the application. If you already have a key, you can copy a key from the Firebase console. If not, follow this guide to create a new Firebase Server key.
Next, select Ionic as the target SDK.
On the next screen, you will get an App ID. Save it since you need to include it in your Ionic application.
Step 3 - Installing plugins
Now, you need to install onesignal-cordova-plugin to your project.
1
npm install onesignal-cordova-pluginStep 4 - Updating the code
Finally, import the onesignal-cordova-plugin to your app.component.ts file and add the below function to initialize the OneSignal connection.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import OneSignal from 'onesignal-cordova-plugin';
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
constructor() {}
ngOnInit() {
this.OneSignalInit();
}
function OneSignalInit(): void {
// NOTE: Update the setAppId value below with your OneSignal
AppId.OneSignal.setAppId("YOUR_ONESIGNAL_APP_ID");
OneSignal.setNotificationOpenedHandler(function(jsonData) {
console.log('notificationOpenedCallback: ' + JSON.stringify(jsonData));
});
}
}
}Step 5 - Sending Push Notifications
Now, your application is ready to receive push notifications. You can go to the OneSignal console and create push notifications by selecting the New Push option under the New Message dropdown.
3. Using WonderPush
WonderPush is another notification platform similar to OneSignal that allows sending push notifications. It is fully functional, GDPR compliant, and offers a RESTful API, an online dashboard for designing alerts and analyzing their effects. In addition, it supports all the popular native mobile and web platforms.
You can start with WonderPush using the 14-day trial period, and it offers packages from 1 EURO per month afterward.
Pros of Using WonderPush
- Easy setup of new notifications.
- Supports segmentation and scheduling options.
- Easy automation.
- Great customer support.
Cons of Using WonderPush
- Only allows a 14-day free trial period.
- Support and tutorials are only available in English.
Tutorial: How to Implement Push Notifications with WonderPush
This approach uses WonderPush, Firebase, and wonderpush-cordova-sdk to implement push notifications.
Step 1 - Creating a WonderPush account
You can easily create a free WonderPush account by visiting their registration page. You will see a screen like the one below once you log in.
Step 2 - Creating a new WonderPush app
Then, enter a project name, select android as the project type, and Ionic as the SDK.
After that, you need to enter Firebase Server Key. If you already have a key, you can copy a key from the Firebase console. If not, follow this guide to create a new Firebase Server key.
Step 3 - Installing plugins
Now, you need to install the following plugins:
1
2
npm install wonderpush-cordova-sdk
npm install @awesome-cordova-plugins/wonderpushAfter installation, import awesome-cordova-plugins/wonderpush/ngx to app.module.ts file.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { AppComponent } from './app.component';
import { WonderPush } from '@awesome-cordova-plugins/wonderpush/ngx';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [ WonderPush ],
bootstrap: [AppComponent]
})
export class AppModule { }Step 4 - Updating the code
Now, you can import the plugin to your app.component.ts file and update the code to the below:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { WonderPush } from '@awesome-cordova-plugins/wonderpush/ngx';
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
constructor(private wonderPush: WonderPush
) {}
ngOnInit() {
this.wonderPush.subscribeToNotifications()
.then(() => console.log("User subscribed to notifications"))
.catch((error: any) => console.error(error));
}
}Then, update the config.xml file with the following line:
1
2
3
4
5
6
7
8
9
10
11
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="3000" />
<platform name="android">
// Add this line
<preference name="android-minSdkVersion" value="21" />
<edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application" xmlns:android="http://schemas.android.com/apk/res/android">
<application android:networkSecurityConfig="@xml/network_security_config" />
</edit-config>
...Step 5 - Sending Push Notifications
Now, your application is ready to receive push notifications. For that, you need to go to the WonderPush console, select the Notifications tab, and press Create notification button.
Wrapping It Up
This guide discussed three ways to implement push notifications with the Ionic framework: FCM, OneSignal, and WonderPush. You can easily get started with any of these methods with a basic understanding of programming. I hope this guide will help you to implement push notifications for your Ionic application and improve the user experience.
