Angular 14集成Firebase Cloud Messaging无法接收消息问题求助

我在Angular 14项目中集成了Firebase Cloud Messaging（FCM）V1 API，已成功获取设备令牌，且能通过本地Node.js服务器发送消息，但Angular应用始终无法接收消息。我按照AngularFire官方文档配置，相关代码与配置如下：

app.module.ts #

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireMessagingModule } from '@angular/fire/compat/messaging';

import { environment } from 'src/environments/environment';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireMessagingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts #

import { Component, OnInit } from '@angular/core';
import { AngularFireMessaging } from '@angular/fire/compat/messaging';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'notif-boilerplate-web';

  constructor(private afMessaging: AngularFireMessaging) { }


  ngOnInit() {
    this.requestPermission()
    this.listen()
  }

  requestPermission() {
    this.afMessaging.requestToken.subscribe({
      next: token => {
        console.log(token)
      }
    })
  }

  listen() {
    this.afMessaging.messages
      .subscribe((message) => { console.log(message); });
  }
}

index.html #

<!doctype html>
<html lang="en">
<head>
  <link rel="manifest" href="./manifest.json">
  <meta charset="utf-8">
  <title>NotifBoilerplateWeb</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

firebase-messaging-sw.js #

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

firebase.initializeApp({
    apiKey: "***************",
    authDomain: "*********.firebaseapp.com",
    projectId: "**************",
    storageBucket: "***********.appspot.com",
    messagingSenderId: "*************",
    appId: "*************",
    measurementId: "*****************",
    vapidKey: "******************-vzYU5mGBnfis-ADYy7k9V88yTg"
})

const messaging = firebase.messaging();

console.log(messaging)

messaging.onMessage((payload) => {
    console.log('Message received. ', payload);
    // ...
});

manifest.json #

{
    "gcm_sender_id": "10****************"
}

angular.json（assets配置片段） #

"assets": [
  "src/favicon.ico",
  "src/assets",
  "src/firebase-messaging-sw.js",
  "src/manifest.json"
]

排查与修复方案 #

1. 修正Service Worker核心配置 #

FCM要求manifest.json中的gcm_sender_id必须是固定值"103953800507"，不能替换为自定义ID，修改后：

{
    "gcm_sender_id": "103953800507"
}

同时补充Service Worker的后台消息处理逻辑，确保后台消息能触发通知：

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

firebase.initializeApp({
    // 你的Firebase配置信息
});

const messaging = firebase.messaging();

// 前台消息处理：同步通知到Angular应用
messaging.onMessage((payload) => {
    console.log('前台消息（Service Worker）:', payload);
    self.clients.matchAll({ type: 'window' }).then(clients => {
        clients.forEach(client => client.postMessage(payload));
    });
});

// 后台消息处理：显示系统通知
messaging.onBackgroundMessage((payload) => {
    console.log('后台消息:', payload);
    const notificationOptions = {
        body: payload.notification.body,
        title: payload.notification.title,
        icon: payload.notification.icon
    };
    self.registration.showNotification(payload.notification.title, notificationOptions);
});

2. 完善Angular应用的消息监听逻辑 #

补充Service Worker注册与权限校验，同时处理前台消息的弹窗展示：

import { Component, OnInit } from '@angular/core';
import { AngularFireMessaging } from '@angular/fire/compat/messaging';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'notif-boilerplate-web';

  constructor(private afMessaging: AngularFireMessaging) { }

  ngOnInit() {
    this.registerServiceWorker();
    this.requestPermission();
    this.listenForMessages();
  }

  // 手动注册Service Worker
  registerServiceWorker() {
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/firebase-messaging-sw.js')
        .then(reg => console.log('Service Worker注册成功:', reg))
        .catch(err => console.error('Service Worker注册失败:', err));
    }
  }

  requestPermission() {
    this.afMessaging.requestToken.subscribe({
      next: token => console.log('设备令牌:', token),
      error: err => console.error('获取令牌失败:', err)
    });
  }

  listenForMessages() {
    // 监听前台消息
    this.afMessaging.messages.subscribe((message: any) => {
      console.log('前台收到消息:', message);
      // 手动触发浏览器通知
      if (Notification.permission === 'granted') {
        new Notification(message.notification.title, {
          body: message.notification.body,
          icon: message.notification.icon
        });
      }
    });

    // 监听Service Worker转发的消息
    navigator.serviceWorker.addEventListener('message', (event) => {
      console.log('收到Service Worker消息:', event.data);
    });
  }
}

3. 验证FCM V1 API的消息格式 #

发送消息时必须使用V1规范的Payload，确保包含notification字段（用于触发系统通知）和token字段（目标设备令牌），示例：

{
  "message": {
    "token": "你的设备令牌",
    "notification": {
      "title": "测试通知",
      "body": "这是一条FCM测试消息"
    },
    "data": {
      "customKey": "自定义数据"
    }
  }
}

4. 环境与权限校验 #

• 必须在HTTPS环境下测试（localhost可例外），生产环境强制HTTPS
• 确认浏览器已授予当前站点的通知权限
• 清除浏览器缓存与旧Service Worker，重新加载应用

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