Angular/fire消息模块实现困境：onMessage函数如何正常工作？

我在@angular/fire消息功能的模块化实现上卡壳数日。官方文档页面仅为空白框架，无可用参考。我基于同仓库示例及Firebase官方文档开发，已成功注册service worker并获取到设备有效FCM token，但onMessage函数完全无法工作，接收不到任何通知。

核心代码 #

import { Component, OnInit, Optional } from '@angular/core';
import { Messaging, getToken, onMessage } from '@angular/fire/messaging';
import { EMPTY, from, Observable } from 'rxjs';
import { share, tap } from 'rxjs/operators';
import { environment } from 'src/environments/environment';

@Component({
  selector: 'app-messaging',
  template: `
    <p>
      Messaging!
      <code>{{ token$ | async | slice:0:12 }}<ng-container *ngIf="(token$ | async) !== null">&hellip;</ng-container></code>
      &nbsp;<code>{{ message$ | async | json }}</code>
      <button (click)="request()" *ngIf="showRequest">Request FCM token</button>
    </p>
  `,
  styles: []
})
export class MessagingComponent implements OnInit {

  token$: Observable<any> = EMPTY;
  message$: Observable<any> = EMPTY;
  showRequest = false;

  constructor(@Optional() messaging: Messaging) {
    console.log('messaging', messaging);
    if (messaging) {
      this.token$ = from(
        navigator.serviceWorker.register('firebase-messaging-sw.js', { type: 'module', scope: '__' }).
          then(serviceWorkerRegistration =>
            getToken(messaging, {
              serviceWorkerRegistration,
              vapidKey: environment.vapidKey,
            })
          )).pipe(
            tap(token => console.log('FCM', {token})),
            share(),
          );
      this.message$ = new Observable(sub => onMessage(messaging, it => sub.next(it))).pipe(
        tap(token => console.log('FCM', {token})),
      );
    }
  }

  ngOnInit(): void {
  }

  request() {
    Notification.requestPermission();
  }

}

已尝试的解决方法 #

• 纯JavaScript监听方式：

listen() {
    const messaging = getMessaging();
    onMessage(messaging, (payload) => {
      console.log('Message received. ', payload);
      this.message=payload;
    });
  }

• RxJS订阅方式：

this.message$ = new Observable(sub => onMessage(messaging, it => sub.next(it))).pipe(
        tap(token => console.log('FCM', {token})),
      );

this.message$.subscribe(msg=>console.log('msg', {msg}));

测试方式 #

通过两种方式发送测试消息均无响应：

• Firebase Cloud Messaging控制台发送测试消息
• Postman调用FCM API

恳请提供可行解决方法。

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