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.

On Android, you have to use the Firebase Android SDK. There are already several Capacitor plugins for this:

  1. @capacitor/push-notifications with @capacitor-community/fcm (Supports Android and iOS)
  2. @capacitor-firebase/messaging (Supports Android, iOS and Web)

There are also several guides to help with integration: