Trouble initialising Firebase

Ionic Framework Ionic Vue
1

I’m (pretty new to Vue & composition API and Ionic6 :grimacing:but I am …) trying to get Push notifications working (on Android initially) with Ionic & Vue, following Using Push Notifications with Firebase in an Ionic + Angular App - but trying to translate to work in Vue - but my app’s just crashing. I can see this in the Android Studio logs:

2022-04-07 22:58:16.218 5432-5657/uk.co.—.— E/AndroidRuntime: FATAL EXCEPTION: CapacitorPlugins
Process: uk.co.—.—, PID: 5432
java.lang.RuntimeException: java.lang.reflect.InvocationTargetException
at com.getcapacitor.Bridge.lambda$callPluginMethod$0$com-getcapacitor-Bridge(Bridge.java:601)
at com.getcapacitor.Bridge$$ExternalSyntheticLambda5.run(Unknown Source:8)
at android.os.Handler.handleCallback(Handler.java:883)
at android.os.Handler.dispatchMessage(Handler.java:100)
at android.os.Looper.loop(Looper.java:214)
at android.os.HandlerThread.run(HandlerThread.java:67)
Caused by: java.lang.reflect.InvocationTargetException
at java.lang.reflect.Method.invoke(Native Method)
at com.getcapacitor.PluginHandle.invoke(PluginHandle.java:121)
at com.getcapacitor.Bridge.lambda$callPluginMethod$0$com-getcapacitor-Bridge(Bridge.java:592)
at com.getcapacitor.Bridge$$ExternalSyntheticLambda5.run(Unknown Source:8)
at android.os.Handler.handleCallback(Handler.java:883)
at android.os.Handler.dispatchMessage(Handler.java:100)
at android.os.Looper.loop(Looper.java:214)
at android.os.HandlerThread.run(HandlerThread.java:67)
Caused by: java.lang.IllegalStateException: Default FirebaseApp is not initialized in this process uk.co.—.—. Make sure to call FirebaseApp.initializeApp(Context) first.
at com.google.firebase.FirebaseApp.getInstance(FirebaseApp.java:183)
at com.google.firebase.messaging.FirebaseMessaging.getInstance(com.google.firebase:firebase-messaging@@21.0.1:1)
at com.capacitorjs.plugins.pushnotifications.PushNotificationsPlugin.register(PushNotificationsPlugin.java:82)

I’ve installed @capacitor/push-notifications, ran npx cap sync

This is my App.vue:

<template>
  <ion-app>
    <ion-router-outlet />
  </ion-app>
</template>

<script lang="ts">
import { IonApp, IonRouterOutlet } from '@ionic/vue';
import { defineComponent } from 'vue';
import {
  ActionPerformed,
  PushNotificationSchema,
  PushNotifications,
  Token,
} from '@capacitor/push-notifications';

export default defineComponent({
  name: 'App',
  components: {
    IonApp,
    IonRouterOutlet
  },
  beforeMount() {
    // Request permission to use push notifications
    // iOS will prompt user and return if they granted permission or not
    // Android will just grant without prompting
    PushNotifications.requestPermissions().then(result => {
      if (result.receive === 'granted') {
        // Register with Apple / Google to receive push via APNS/FCM
        PushNotifications.register();
      } else {
        // Show some error
      }
    });

    // On success, we should be able to receive notifications
    PushNotifications.addListener('registration',
        (token: Token) => {
          alert('Push registration success, token: ' + token.value);
        }
    );

    // Some issue with our setup and push will not work
    PushNotifications.addListener('registrationError',
        (error: any) => {
          alert('Error on registration: ' + JSON.stringify(error));
        }
    );

    // Show us the notification payload if the app is open on our device
    PushNotifications.addListener('pushNotificationReceived',
        (notification: PushNotificationSchema) => {
          alert('Push received: ' + JSON.stringify(notification));
        }
    );

    // Method called when tapping on a notification
    PushNotifications.addListener('pushNotificationActionPerformed',
        (notification: ActionPerformed) => {
          alert('Push action performed: ' + JSON.stringify(notification));
        }
    );
  }
});
</script>

I guess from “Make sure to call FirebaseApp.initializeApp(Context) first” I am not initialising things correctly… but am stuck on how I should be doing it…

Any ideas please? Many thanks!

Using:
Ionic 6.18.1
node v17.4.0
npm 9.3.1

And from package.json dependencies:
“@capacitor-community/fcm”: “^2.0.2”,
“@capacitor/android”: “3.4.0”,
“@capacitor/app”: “^1.1.0”,
“@capacitor/browser”: “^1.0.7”,
“@capacitor/core”: “^3.4.0”,
“@capacitor/haptics”: “1.1.4”,
“@capacitor/keyboard”: “1.2.1”,
“@capacitor/push-notifications”: “^1.0.9”,
“@capacitor/status-bar”: “1.0.7”,
“@capacitor/storage”: “^1.2.5”,
“@ionic/vue”: “^6.0.0”,
“@ionic/vue-router”: “^6.0.0”,
“axios”: “^0.26.0”,
“core-js”: “^3.6.5”,
“vue”: “^3.2.21”,
“vue-router”: “^4.0.12”,
“vuex”: “^4.0.2”

2

Did you integrate Firebase with the Android app? It works for me…

3

I’ve got error “Make sure to call FirebaseApp.initializeApp(Context) first” because wrong appId in capacitor.config.json.

In order to operate with google services you need to include google-services.json which its tied to a package name (e.g. com.domain.myapp)

When started a new ionic app, I was asked for an App package ID but in capacitor.config.json appId was set to io.ionic.starter anyway

Now, for this problem the actual error message was “No matching client found for package name” but the way com.google.gms.google-services plugin is implemented in build.gradle (Module) is using a try/catch that hides the original exception. So the plugin is not applied and the app compiles successfully. Then in runtime the error is “Make sure to call FirebaseApp.initializeApp(Context) first”

Only for debugging this issue I removed the whole try/catch code block and put “apply plugin: ‘com.google.gms.google-services’” instead. This allowed me to see the original error during compilation time

4

This Error can happen, if you haven’t placed the google-services.json file in the correct folder in android/app/.. folder. This solve the problem:

google-services-file
google-services-file522×1024 27.2 KB