Stuck with modular implementation of Angular/fire messaging: How to make onMessage function...

I hope you are well, I would like to ask for help from the community as I have been stuck with the modular implementation of @angular/fire messaging for a few days now.

First of all, there is no official documentation to follow, as the page where there should be documentation seems to be just an empty skeleton: https://github.com/angular/angularfire/blob/master/docs/messaging.md

I've tried to build on their examples, which appear in the same repository:

https://github.com/angular/angularf...ular/src/app/messaging/messaging.component.ts

And based on its "documentation" parent firebase,

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();
}

}


And so far I have only been able to register the service worker in the app and request the token,

This works if it returns me a correct token for the device,

But the one I can't get to work at all is the onMessage function, I don't get any notification.

I have tried it as a listener only for javascript, nothing.

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


I changed it to subscriber rxjs, just like the example, and neither

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}));


And I send notifications to this token in 2 ways:

Through the firebase cloud messaging console where it says to send a test message and I put the token received and nothing.

I've also done it via the fcm API using postman. Screenshot

Please community, can you help me with any way that you have made Angular/fire's onMessage function work as I feel totally lost and I don't see where to keep trying.

Continue reading...