如何订阅AngularFireMessaging消息？通知弹窗正常但无应用控制权

问题定位 #

当前场景下，通知弹窗可正常展示，但angularFireMessaging.messages的订阅回调无法触发，导致无法获取消息数据并更新应用状态。核心原因在于Firebase Messaging在不同应用状态下的消息处理机制存在差异，同时原代码存在订阅重复、变量错误等小问题。

解决方案 #

1. 统一处理前台/后台消息逻辑 #

Firebase Messaging在应用前台活跃时，消息会直接通过messages Observable传递；在后台/关闭状态下，通知由浏览器系统展示，点击后需通过onMessage或Service Worker事件捕获。修改PushNotificationService如下：

import { Injectable } from '@angular/core';
import { AngularFireMessaging } from '@angular/fire/compat/messaging';
import { BehaviorSubject } from 'rxjs';
import { NotificationService } from './notification.service';
import { first } from 'rxjs/operators';

@Injectable()
export class PushNotificationService {
  currentMessage = new BehaviorSubject(null);

  constructor(
    private angularFireMessaging: AngularFireMessaging,
    private notificationService: NotificationService
  ) {
    this.listenForMessages(); // 初始化时统一监听消息
  }

  requestPermission() {
    this.angularFireMessaging.requestToken.subscribe(
      (token: any) => {
        this.notificationService
          .subscribe(token)
          .pipe(first())
          .subscribe({
            next: data => console.log('Token已获取:', token),
            error: error => console.log('订阅Token失败:', error),
          });
      },
      (err: any) => console.log('请求推送权限失败:', err) // 修复原代码未定义变量问题
    );
  }

  private listenForMessages() {
    // 监听前台主动接收的消息
    this.angularFireMessaging.messages.subscribe((payload: any) => {
      console.log('前台收到消息:', payload);
      this.currentMessage.next(payload?.data);
    });

    // 监听后台点击通知后的消息传递
    this.angularFireMessaging.onMessage((payload: any) => {
      console.log('点击通知收到消息:', payload);
      this.currentMessage.next(payload?.data);
    });
  }
}

2. 修正组件订阅方式 #

原组件直接赋值currentMessage，需改为订阅Observable以实时获取消息变化：

ngOnInit() {
  this.pushNotificationService.requestPermission();
  // 订阅消息流，实时更新应用状态
  this.pushNotificationService.currentMessage.subscribe(message => {
    if (message) {
      this.message = message;
      // 在这里添加业务逻辑，比如更新UI、触发页面跳转等
      console.log('组件捕获到消息:', message);
    }
  });
}

3. 配置Service Worker处理后台消息 #

若需在应用后台/关闭状态下捕获消息，需在firebase-messaging-sw.js中添加处理逻辑：

importScripts('https://www.gstatic.com/firebasejs/9.22.0/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/9.22.0/firebase-messaging-compat.js');

// 替换为你的Firebase配置
firebase.initializeApp({
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID"
});

const messaging = firebase.messaging();

// 处理后台静默消息
messaging.onBackgroundMessage((payload) => {
  console.log('后台收到消息:', payload);
});

// 处理通知点击事件，唤醒应用并传递消息
self.addEventListener('notificationclick', (event) => {
  event.notification.close();
  event.waitUntil(
    clients.openWindow('/').then(windowClient => {
      if (windowClient) {
        windowClient.postMessage(payload);
      }
    })
  );
});

4. 检查消息Payload格式 #

确保发送的消息包含data字段（用于传递自定义业务数据），示例Payload：

{
  "data": {
    "title": "新通知",
    "content": "您有一条新消息",
    "pageUrl": "/notification/detail"
  },
  "notification": {
    "title": "新通知",
    "body": "您有一条新消息"
  },
  "to": "TARGET_DEVICE_TOKEN"
}

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