How to add Firebase into a brand new project?

Ionic Framework ionic-v3
1

Hello hackers. Can someone help me to add firebase plugin to a brand new IONIC 4 project? I feel like it is a version mess happening in this area now, nothing I try compiles and everything I try causes another error. Simple task: brand new project, add firebase to it - I struggle with this for quite a while.

//1) Create new ionic app
ionic start myApp tabs
//Success

//2) Add latest android platform
cd myApp
ionic cordova platform add android@latest
//success. 8.0.0 added

//3) add firebase plugin
ionic cordova plugin add cordova-plugin-firebase --save
//successfully added plugin

//4)add google-services.json and GoogleService-Info.plist files to a project root

//5) try compile it now
ionic cordova build android
//FAIL. The library com.google.android.gms:play-services-measurement-base is being requested by various other libraries at [[16.5.0,16.5.0], [16.4.0,16.4.0]], but resolves to 16.5.0.

//I tried to install recommended plugins to fix this issue:
ionic cordova plugin add cordova-android-play-services-gradle-release --variable PLAY_SERVICES_VERSION=+

ionic cordova plugin add cordova-android-firebase-gradle-release --variable FIREBASE_VERSION=+

ionic cordova build android
//fails with different error: Crashlytics found an invalid API key: null.

To fix that one I change platforms/android/build.gradle
from:
classpath ‘com.google.gms:google-services:4.1.0’
to:
classpath ‘com.google.gms:google-services:4.2.0’

COntinue following google and fixes people put in place I got this one:
platforms\android\app\src\main\java\com\gae\scaffolder\plugin\MyFirebaseInstanceIDService.java:6: error: cannot find symbol
import com.google.firebase.iid.FirebaseInstanceIdService;

I am going a rabbit hole - can someone help me add Firebase to a brand new Ionic project?

Thank you in advance!

2

See: AngularFire

3

AngularFire is not a cordova plugin, correct? The main use of Firebase in my Ionic project is: push notifications, analytics, event tracking, crash reporting for Android and iOS supported builds. Can AngularFire do that?

4

AngularFire is the official library for Firebase and Angular

What is AngularFire?

  • Observable based - Use the power of RxJS, Angular, and Firebase.
  • Realtime bindings - Synchronize data in realtime.
  • Authentication - Log users in with a variety of providers and monitor authentication state.
  • Offline Data - Store data offline automatically with AngularFirestore.
  • Server-side Render - Generate static HTML to boost perceived performance or create static sites.
  • ngrx friendly - Integrate with ngrx using AngularFire’s action based APIs.
  • Manage binary data - Upload, download, and delete binary files like images, videos, and other blobs.
  • Call server code - Directly call serverless Cloud Functions with user context automatically passed.
  • Push notifications - Register and listen for push notifications
  • Modular - Include only what’s needed. No AngularFire package is above 3kb with most under 2kb (gzipped).

Sentry: Open-source error tracking that helps developers monitor and fix crashes in real time.

Ref: sentry-error-handler.ts

5

Thanks for the info, good to know, but unfortunately it does not answer the need.
AngularFireMeassaging is (from the doc):

The FCM JavaScript API lets you receive notification messages in web apps running in browsers that support the Push API.

As per my understanding AngularFire will work well for web apps running in supportign browsers. I need a solution for native notifications for a hybrid iOS and Android app, not just webapp. Unless I am misunderstanding something and AngularFire will help me to deliver native notifications to iOS/Android app?

p.S. exploring this: GitHub - chemerisuk/cordova-plugin-firebase-messaging: Cordova plugin for Firebase Cloud Messaging

6

Robin’s response wasn’t too helpful haha, so to actually answer your question, AngularFire is not a native plugin for Ionic, so that would be of no use for you. (Just to note, I use AngularFire for everything except native push notifications).

Apparently google depreciated some methods (or whatever) and it broke Firebase plugins for android. Arnesson’s plugin (the one you’re trying to use) seems to not be supported anymore unfortunately. There’s numerous pull requests waiting to be implemented. Luckily, someone has shared their fork, so in the mean time you should use this fork mentioned in the comment here: https://github.com/arnesson/cordova-plugin-firebase/pull/1058#issuecomment-490025293

It sorta blows, as I personally would rather not use a workaround, but, so is the nature of community supported plugins…good luck!

7

Thank you for clarification! It makes sense now. Community will never die as long as people like you keep clarifying stands to newcomers like me :slight_smile:

I am trying to make this one work:

Seems to be actively supported right now!