Angular 15中基于@angular/fire ^7.5.0实现FCM权限请求与Token获取

从Angular Fire 7.x版本开始，API改为模块化风格，不再使用AngularFireMessaging这类封装服务，而是直接对接Firebase官方的Messaging模块化API。以下是适配@angular/fire ^7.5.0的实现方案：

步骤1：组件中导入必要依赖 #

在目标组件（如AppComponent）中导入所需模块与方法：

import { Component, inject, OnInit } from '@angular/core';
import { Messaging, getMessaging } from '@angular/fire/messaging';
import { requestPermission, getToken, onMessage, onTokenRefresh } from 'firebase/messaging';

步骤2：实现权限请求、Token获取与消息监听 #

通过Angular依赖注入获取Messaging实例，完成核心逻辑：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  title = 'fcm-angular-demo';
  private messaging: Messaging = inject(Messaging);

  ngOnInit(): void {
    this.requestNotificationPermission();
    this.listenForForegroundMessages();
    this.listenForTokenRefresh();
  }

  private requestNotificationPermission(): void {
    const messagingInstance = getMessaging();
    // 请求浏览器通知权限
    requestPermission(messagingInstance)
      .then(() => {
        console.log('通知权限已授予');
        // 权限通过后立即获取FCM Token
        this.getFCMToken(messagingInstance);
      })
      .catch((error) => {
        console.error('通知权限被拒绝', error);
      });
  }

  private getFCMToken(messagingInstance: Messaging): void {
    getToken(messagingInstance, { vapidKey: '你的VAPID密钥' }) // 替换为Firebase控制台生成的VAPID密钥
      .then((token) => {
        if (token) {
          console.log('FCM Token:', token);
          // 将Token发送至后端存储，用于后续推送
        } else {
          console.log('未获取到Token，请检查权限与配置');
        }
      })
      .catch((error) => {
        console.error('获取Token失败', error);
      });
  }

  private listenForForegroundMessages(): void {
    const messagingInstance = getMessaging();
    onMessage(messagingInstance, (payload) => {
      console.log('收到前台推送消息:', payload);
      // 此处可添加消息弹窗、页面提示等展示逻辑
    });
  }

  private listenForTokenRefresh(): void {
    const messagingInstance = getMessaging();
    onTokenRefresh(() => {
      console.log('Token已刷新，重新获取新Token');
      this.getFCMToken(messagingInstance);
    });
  }
}

关键说明 #

• VAPID密钥：需从Firebase控制台获取（项目设置 → 云消息传递 → Web配置 → 生成密钥对），是Web平台获取FCM Token的必填项。
• 生命周期选择：建议在ngOnInit中执行异步逻辑，而非构造函数，确保组件初始化完成后再调用API。
• Token刷新处理：FCM Token可能因过期、设备变更等原因刷新，通过onTokenRefresh监听并重新获取新Token，保证后端存储的Token有效性。

额外配置 #

确保项目已启用Service Worker以支持后台推送：

1. 在angular.json中开启生产环境Service Worker："serviceWorker": true
2. 项目根目录添加firebase-messaging-sw.js文件，用于处理后台消息接收逻辑

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