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] },
    // Keep this to enable Ionic's runtime error handling during 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}')) // save the token server-side and use it to push notifications to this device
  .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.

2
Leave a Reply

avatar
2 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
CicciokrJaylton Alencar Pereira Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Jaylton Alencar Pereira
Guest
Jaylton Alencar Pereira

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

can you help me?