How To Send Push Notification In Ionic Android App

In this tutorial, I am going to explain how to send Push Notification in Ionic Apps in a simple and more efficient way. Here am using Firebase Cloud Messaging (Google Cloud Messaging) for Android push notification and OneSignal to manage more segments for push notification to users and various platforms. You can integrate OneSignal with various platforms to push Notification.

This tutorial written for ionic 2 and above but still ionic 1 and cordova projects can follow same steps except sdk installation for send push notification.

Send push notification to you hybrid ionic app in 10 simple steps

Step 1: Create Firebase account

Create Firebase account from https://firebase.google.com and Create a new project. Use your App Name for easier identification.

Step 2: Navigate to Project Settings

Once the project is created, go to the project click Settings icon and Navigate to Project Settings.

 

Step 3: Get Server Key and Sender ID

In the Settings page, Navigate to Cloud Messaging tab to get Server Key and Sender ID. Copy Both keys and save in secure place. We need this key to configure OneSignal platform.

Step 4: Create OneSignal Account

Now Create OneSignal account from https://onesignal.com and Create a new app. Use your App Name for easier identification.

 

Step 5: Select Platform in OneSignal

Now Select Android platform from the list and Click Next. You will be prompted to insert your Server Key and Sender ID.

Paste the Value which we copied from firebase in Step 3 and Click Next.

Step 6: Select SDK

Select the SDK of our Project. Currently, here we have to select Ionic/Cordova/Phonegap and Click Next.

 

Step 7: Install OneSignal SDK

OneSignal will generate App Id for the app. Now its time to install OneSignal SDK in our Ionic app.

$ ionic cordova plugin add onesignal-cordova-plugin

$ npm install --save @ionic-native/onesignal

After plugin installed, now add a plugin to your App Modules file “App.Module.ts”.

...

import { Onesignal} from '@ionic-native/onesignal';

...

@NgModule({
  ...

  providers: [
    ...
    Onesignal
    ...
  ]
  ...
})
export class AppModule { }

Step 8 : Configure “app.component.ts”

Usage

Let’s Initiate OneSignal and Subscribe the Device to OneSignal Service. Use the following code in “app.component.ts” file. Replace OneSignal App Id and Firebase Sender ID in the following code.

import { OneSignal } from '@ionic-native/onesignal';

constructor(private oneSignal: OneSignal) { }

...
//Replace APP ID and Sender ID
this.oneSignal.startInit('', '');

//Type of Alert
this.oneSignal.inFocusDisplaying(this.oneSignal.OSInFocusDisplayOption.InAppAlert);

//Handle Event when push notification is received when app is running foreground 
this.oneSignal.handleNotificationReceived().subscribe(() => {
 // do something when notification is received
});

//Handle Event When user clicks on the push notification
this.oneSignal.handleNotificationOpened().subscribe(() => {
  // do something when a notification is opened
});

//Subscription Initialized Successfully.
this.oneSignal.endInit();

More OneSignal functions available here https://ionicframework.com/docs/native/onesignal/

Step 9: Add Android Support repository

Make Sure your Android SDK installed with Android Support Repository and Google Repository.

Step 10: Trigger Push notification to your App

Build your app and Go to OneSignal page and click registered devices and Try Sending One.

Note: If you receive push notification when app is opened and app running in background but not when the app is closed. Then the problem is your device custom ROM terminates the GCM to save battery. Make the app trusted or add to the auto startup.

See also: How to post feeds on Facebook from Mobile App