Search code examples
firebasecapacitor

Calling firebase.messaging() yields white screen in Capacitor build, but works in the browser

I'm building a web app and using Capacitor to build an Android version. Everything works until I add Firebase messaging in my app, which I import from the following firebase.js file:

import firebase from 'firebase/app'
import 'firebase/firebase-messaging'

const firebaseConfig = {
  // my details here
};

firebase.initializeApp(firebaseConfig);
export default firebase.messaging()

When I do this, the app works fine when I serve it up in the browser, but when I run it in Capacitor (with no errors) shown, the app shows only a "white screen of death" in my Android emulator. Prior to that the app worked fine in the Android emulator.

I've narrowed the problem down to running firebase.messaging(). The app runs fine in Capacitor when I replace the last line above with export default function dummy_function() { return true; }

Unfortunately the Android Studio event log says only "Failed to start monitoring emulator-5554". So that's not helpful!

How do I fix this? Here's my complete code.

Solution

  • You have to use a Capacitor plugin to integrate Firebase messaging. Among others the following plugins exist:

    Disclosure: I am the maintainer of @capacitor-firebase/messaging.