Complete Guide Ionic 3 Firebase with cordova plugin firebase

Okay let’s start to integrate in our Ionic 3 app the Firebase Google Cloud Message with the cordova plugin firebase.
In the Ionic 3 we can found the native integration with this plugin. For the documentation click here.
It work with IOS 10 and IOS 11 and latest version of Android, i have tested it.

In this guide we can see:
Install cordova plugin firebase on Ionic app
Setting cordova plugin firebase on Ionic app
Setting Firebase Cloud Message

Install the Ionic Firebase module

We must to install the npm library and the cordova plugin so let’s start to execute this command:

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

Then we must to use it on our app, so let’s start to include it in our app.module.ts, import it and then add into “providers” section.

import { Firebase } from '@ionic-native/firebase'; 
declarations: [ MyApp ], 
imports: [ BrowserModule, HttpClientModule, 
loader: { provide: TranslateLoader, useFactory: (createTranslateLoader), deps: [HttpClient] } 
IonicModule.forRoot(MyApp,{ menuType: 'push' }),IonicStorageModule.forRoot()], 
bootstrap: [IonicApp], 
entryComponents: [ MyApp ], 
providers: [ Api, Items, User, Camera, SplashScreen, StatusBar, Firebase, IonicErrorHandler, { provide: Settings, useFactory: provideSettings, deps: [Storage] },
development { provide: ErrorHandler, useClass: MyErrorHandler } ] })

Setting cordova plugin firebase on Ionic app

Now we can use it in our app.component.ts, for the grant permission, registration of token.
This is a simplest installation, import it, add in the constructor, and then use this.firebase to attach at the event.

For IOS is very important the method “grantPermission”

import {
} from '@ionic-native/firebase';
constructor(platform: Platform, private statusBar: StatusBar, private splashScreen: SplashScreen, private firebase: Firebase) {
    platform.ready().then(() => {
        this.firebase.getToken().then(token => console.log('The token is ${token}')).catch(error => console.error('Error getting token', error));
        this.firebase.onTokenRefresh().subscribe((token: string) => console.log('Got a new token ${token}'));

Now we must to setting up the account on the firebase cloud messaage, so we can generate two files:
google-services.json (Android)
GoogleService-Info.plist (IOS)

We can add this file in the root directory, with the config.xml and package.json file.

Setting Firebase Cloud Message

To setting up the firebase account remind to this guide:

Remember, is very important that you upload you APN CERTIFICATE IOS, if you not load it the notifications not work.
This guide:


If you have some question write me.


"Javascript is to Java as hamburger is to ham; both are delicious, but they don't have much in common except a name" I'm javascript lovers and this is my site on witch sometimes write about my experience, when i have some free time, and remember: "Homo faber fortunae suae"

  1. Jaylton Alencar Pereira

    When I test on the android device it results in error saying that the plugin_not_installed

    can you help me?

Write a Comment

Your email address will not be published.