Firebase Push Notifications in Ionic 3

This tutorial is about how to configure firebase push notifications in your ionic project.

Start with a blank ionic application using below command on your terminal.

ionic start IonicFirebasePushNotifications blank

When building Ionic app to Android/iOS we need two files to configure Firebase to our project.

• Android: google-services.json
• iOS: GoogleService-Info.plist

Download google-services.json by following below steps.

• go to Firebase console
• create a new project by clicking add project.
• then you will see screen like below. click on android icon above “Add an app to get started” text.

• Then add your app package name and click on Register app button.

• After you click on Register button you can download google-services.json

• GoogleService-Info.plist file downloading process also same as above. But you need to download APNs certificate to configure firebase push notifications to iOS app from apple developer account. Follow this medium article to get APNs certificates.

Now we will move to Ionic app. Place GoogleService-Info.plist and google-services.json files inside root directory of your Ionic app.

Below content is related to Ionic 3 which is little bit outdated now. Read This article: Firebase Push Notifications in Ionic 6.

I am using cordova-plugin-firebase plugin to add firebase to ionic project.

Run below 2 commands in terminal inside project root directory.

ionic cordova plugin add cordova-plugin-firebase
npm install --save @ionic-native/firebase@4

Import “ionic-native/firebase” module into app.module.ts file and add “Firebase” module into providers array.

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { Firebase } from '@ionic-native/firebase';
@NgModule({  
declarations: [ 
  MyApp, 
  HomePage
],  
imports: [    
  BrowserModule,    
  IonicModule.forRoot(MyApp)
],  
bootstrap: [ IonicApp ],  
entryComponents: [   
  MyApp,    
  HomePage  ],  
providers: [
  StatusBar,    
  SplashScreen,    
  {provide: ErrorHandler, useClass: IonicErrorHandler},    
  Firebase  
]})
export class AppModule {}

Implement firebase initialisation and other callback methods inside app.component.ts file.

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { Firebase } from '@ionic-native/firebase';
import { AlertController } from 'ionic-angular'; 
import { HomePage } from '../pages/home/home';
@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = HomePage;
constructor(
    platform: Platform,
    statusBar: StatusBar,
    splashScreen: SplashScreen,
    private firebase: Firebase,
    private alertCtrl: AlertController) {
platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();      
      this.initPushNotifications(); 
      this.firebase.onNotificationOpen()
          .subscribe(pushData => {        
 
let alert = this.alertCtrl.create({
          title: 'New Notification',
          subTitle: pushData.body,
          buttons: ['Dismiss']
        });
        alert.present();
      });
    });
  }
    
/**   
* Get push device token   
*    
*  @description :: save this device token to server-side database    *  and use this token to sending push messages to this device   
**/
  initPushNotifications() {
     this.firebase.getToken()
      .then(token => {
         // save the token server-side and use it to push 
         // notifications to this device
        console.log(`The token is ${token}`);
      })
      .catch(error => {
        console.error('Error getting token', error);
      });
  }
}

YES! we added firebase push notifications to our Ionic 3 application.

Add ionic platforms using below commands.

ionic cordova platform add android
ionic cordova platform add ios

Build and run your ionic application using below commands.

ionic cordova build ios or ionic cordova build android
ionic cordova run ios or ionic cordova run android

You can test whether push notifications are working in our Ionic 3 app by sending push messages from firebase console. You can send a push message by selecting Cloud Messaging under Grow in navigation menu of firebase console.

Find complete project of this tutorial in this github link

Hey, I am Sudarshana. I am available for freelance work. Say Hi on LinkedIn