Ionic Capacitor中Firebase通知监听器无法触发日志与Alert弹窗

问题场景 #

在Ionic Capacitor项目中配置了FirebaseMessaging的notificationReceived监听器，期望前台收到通知时触发日志打印、Alert弹窗、本地通知，但仅本地通知正常执行，日志语句和Alert弹窗在iOS、Android端均无响应。

用户代码实现如下：

监听器代码 #

FirebaseMessaging.addListener('notificationReceived', async (event: NotificationReceivedEvent) => {
  console.log('Received foreground notification:', event);
  await this.presentAlert(event.notification.body || '', event.notification.title || 'Notification');
  await this.showLocalNotification({
    title: event.notification.title || '',
    body: event.notification.body || '',
    data: event.notification.data
  });
});

本地通知实现 #

private async showLocalNotification(notification: {
  title: string;
  body: string;
  data?: any;
}) {
  try {
    await LocalNotifications.schedule({ 
      notifications: [{
        title: notification.title,
        body: notification.body,
        id: Math.floor(Math.random() * 100),
        extra: notification.data,
        sound: 'default',
        smallIcon: 'icon',
        largeIcon: 'icon',
        iconColor: '#58B941'
      }]
    });
  } catch (error) {
    console.error('Error showing notification:', error);
  }
}

Alert弹窗实现 #

async presentAlert(message: string, header?: string) {
    const alert = await this.alertController.create({
      header,
      message,
      buttons: [{
        text: 'OK',
        cssClass: 'alert-button-green', handler: () => console.log('OK clicked')
      }],
      cssClass: 'custom-alert'
    });

    await alert.present();
    return alert;
}

核心原因与修复方案 #

1. Angular Zone上下文丢失（最可能原因） #

Capacitor插件的回调默认运行在Angular Zone之外，Angular的UI操作（如Alert弹窗）依赖Zone上下文触发变更检测，日志输出也可能因上下文问题无法被捕获。

修复代码：

// 引入NgZone
import { NgZone } from '@angular/core';

// 构造函数注入NgZone
constructor(private ngZone: NgZone, private alertController: AlertController) {}

// 修改监听器，将逻辑包裹在Zone内执行
FirebaseMessaging.addListener('notificationReceived', async (event: NotificationReceivedEvent) => {
  this.ngZone.run(async () => {
    console.log('Received foreground notification:', event);
    await this.presentAlert(event.notification.body || '', event.notification.title || 'Notification');
    await this.showLocalNotification({
      title: event.notification.title || '',
      body: event.notification.body || '',
      data: event.notification.data
    });
  });
});

2. 验证通知Payload格式 #

若发送的是纯数据消息（无title/body字段），event.notification会为空，导致后续逻辑无法触发。可先打印完整event结构排查：

console.log('Full notification event:', JSON.stringify(event));

如果event.notification为空，需调整推送逻辑添加显示字段，或修改代码从event.data中提取内容。

3. 平台权限与配置检查 #

iOS端

• 在Info.plist中添加权限配置：

<key>UIBackgroundModes</key>
<array>
  <string>remote-notification</string>
</array>
<key>NSUserNotificationUsageDescription</key>
<string>需要通知权限接收消息</string>
<key>NSAlertUsageDescription</key>
<string>需要弹窗权限显示通知提醒</string>

• 确保代码中请求了通知权限：

await FirebaseMessaging.requestPermissions();

Android端

• Android 8.0+需创建通知渠道：

async initializeNotifications() {
  await LocalNotifications.createChannel({
    id: 'default',
    name: 'Default Channel',
    importance: 5,
    sound: 'default'
  });
}

• 检查AndroidManifest.xml权限：

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.POST_NOTIFICATIONS" />

4. 调试日志输出 #

• Android用adb logcat查看系统日志，iOS用Xcode控制台捕获输出，避免依赖APP内置控制台的过滤机制。

验证步骤 #

1. 重新构建项目并部署到真机
2. 前台运行APP，发送测试通知
3. 检查控制台日志输出
4. 确认Alert弹窗正常显示
5. 验证本地通知功能正常

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