Product
Docs
Resources
Log In

Sign Up

Implementing Ionic Framework Push Notifications [Top 3 Ways]

  • Using Firebase
  • Using OneSignal
  • Using WonderPush

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.

Ionic Notifications via Firebase FCM

Then, you can create a new Firebase project by clicking the Create a Project button.

Create New Firebase Project for Ionic Framework

Step 2 - Enable Cloud Messaging

After creating the project, select the Cloud Messaging service under the Engage section from the left menu.

Firebase Enable Cloud Messaging for Ionic Framework

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.

Add Firebase to Ionic Framework App

Then, it will give you a file named google-services.json. Make sure to download and add it to your project folder.

Download Firebase SDK for Ionic Framework

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/fcm

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

Firebase FCM Send Notifications for Ionic App

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:

OneSignal Dashboard for Ionic Framework App Notifications

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.

New OneSignal App for Ionic AppAfter 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.

Configure FCM in OneSignal for Ionic Framework App

Next, select Ionic as the target SDK.

OneSignal Ionic 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-plugin

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

OneSignal Ionic Send Notification Dashboard

OneSignal Ionic Send Test Notification

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.

Create Wonder Push Notification Account for Ionic Notifications

Step 2 - Creating a new WonderPush app

Then, enter a project name, select android as the project type, and Ionic as the SDK.

Create New WonderPush Ionic App

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.

WonderPush Ionic Framework Settings

Step 3 - Installing plugins

Now, you need to install the following plugins:

1 2 npm install wonderpush-cordova-sdk npm install @awesome-cordova-plugins/wonderpush

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

WonderPush Send Push Notification Test for Ionic App

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.

View More Guides

Build your first notification in minutes

Send up to 10,000 notifications every month, for free.

Get started for free

Email & push notification

Build your first notification in minutes

Send up to 10,000 notifications every month, for free.

Get started for free

Email & push notification

Product

Pricing

Providers

Developers

Documentation

API

Libraries

Status

© 2022 Courier. All rights reserved.