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'; 
@NgModule({ 
declarations: [ MyApp ], 
imports: [ BrowserModule, HttpClientModule, 
TranslateModule.forRoot({ 
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 {
    Firebase
} from '@ionic-native/firebase';
constructor(platform: Platform, private statusBar: StatusBar, private splashScreen: SplashScreen, private firebase: Firebase) {
    platform.ready().then(() => {
        this.statusBar.styleDefault();
        this.splashScreen.hide();
        this.firebase.grantPermission();
        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: https://engineering.hexacta.com/managing-push-notifications-with-ionic2-3698249c07a

Remember, is very important that you upload you APN CERTIFICATE IOS, if you not load it the notifications not work.
This guide: https://firebase.google.com/docs/cloud-messaging/ios/certs

If you have some question write me.