调用firebase.messaging()导致Capacitor构建的Android应用白屏，浏览器正常

问题分析 #

你的Web应用在浏览器中运行正常，但Capacitor构建的Android模拟器里调用firebase.messaging()就出现白屏，替换为dummy函数后恢复正常。核心原因是Web版Firebase Messaging无法直接在Capacitor原生环境中正常工作，同时可能存在配置缺失或adb连接异常的问题。

解决步骤 #

1. 安装Capacitor Firebase Messaging官方插件 #

原生环境不能直接复用Web版Firebase Messaging，必须安装适配Capacitor的专用插件：

npm install @capacitor-firebase/messaging
npx cap sync android

2. 配置Android端Firebase文件 #

• 从Firebase控制台下载google-services.json，将其放到Android项目的android/app目录下
• 确认Android项目根目录的build.gradle已添加Google Services插件依赖：

  dependencies {
    // 其他依赖项
    classpath 'com.google.gms:google-services:4.3.15'
  }
  

• 确认app/build.gradle末尾已添加插件引用：

  apply plugin: 'com.google.gms.google-services'
  

3. 修改Firebase初始化代码，适配跨平台 #

调整firebase.js，根据运行平台选择对应的Messaging实现：

import firebase from 'firebase/app'
import 'firebase/firebase-messaging'
import { Capacitor } from '@capacitor/core';
import { FirebaseMessaging } from '@capacitor-firebase/messaging';

const firebaseConfig = {
  // 你的Firebase配置信息
};

firebase.initializeApp(firebaseConfig);

// 根据平台选择Messaging实例
const messaging = Capacitor.isNativePlatform() 
  ? FirebaseMessaging 
  : firebase.messaging();

export default messaging;

4. 排查白屏的具体错误 #

模拟器白屏无日志时，用Chrome远程调试查看真实报错：

• 打开Chrome浏览器，输入chrome://inspect/#devices
• 在设备列表中找到模拟器中的应用，点击inspect，查看Console面板的报错信息，定位具体问题（如权限未配置、初始化失败等）

5. 解决模拟器连接问题 #

针对「Failed to start monitoring emulator-5554」错误：

• 重启adb服务：

  adb kill-server
  adb start-server
  

• 重启Android模拟器，或在Android Studio的Device Manager中重新连接模拟器

内容的提问来源于stack exchange，提问作者tog22