How to send Background notification to foreground in Angular Firebase to display notification in Angular 9 webapp?

Question

I am using Angular Firebase for push notifications. Everything is working fine with foreground messages but when i added a 'setBackgroundMessageHandler' call in firebasw-messaging-sw.js file to handle background message its getting triggered but I am not sure how to send the notification in app from there or to convert it foreground.

messaging.setBackgroundMessageHandler(function (payload) {

    console.log('[firebase-messaging-sw.js] Received background message ', payload);
    var data = payload.data;

});

Can someone help me with this?

I am using Angular 9.

Answer 1

setBackgroundMessageHandler is deprecated. Try it with onBackgroundMessage and in the ts file _messaging.onBackgroundMessage = _messaging.onBackgroundMessage.bind(_messaging);

works for me!

Answer 2

This might help you

    import { Inject, Injectable } from '@angular/core';
    import { FirebaseApp } from "angularfire2";
    import * as firebase from 'firebase/app';
    import 'firebase/messaging';  

    @Injectable()
    export class FirebaseService {

    private messaging: firebase.messaging.Messaging; 

    constructor(
    private angularFireMessaging: AngularFireMessaging,
    @Inject(FirebaseApp) private _firebaseApp: firebase.app.App) {
    this.messaging = firebase.messaging(this._firebaseApp);
    }

    
   receiveMessage(): void {
    this.messaging.onMessage(payload => {
      // console.error('new Notification received. ', payload); 
        this.currentMessage.next(payload);
        });
      }
    }

then declare FirebaseService in your component and you can handle notification event by invoking receiveMessage method.

Answer 3

This is what worked for me:

To show foreground notification website need SSL certificate. Test that in development run ng serve --ssl true then change http://localhost/4200 to https://localhost/4200.

Answer 4

if you're using the Admin SDK or

https://fcm.googleapis.com/fcm/send?=

you can handle this by simply changing the payload send to fcm.

the following code won't work as there is notification in payload. so remove the notification and will work. this worked for me without any changes in the code.

{
    "notification": {
        "title": "Hey there",
        "body": "Subscribe to AMAL MOHAN N youtube channel"
    },
    "to": "your-browser-token",
    "data": {
        "value1": "text",
        "value2": "",
        "value3": "sample3",
        "value4": "sample4"
    }
}

instead the following code will work fine,

{
    "to": "your-browser-token",
    "data": {
            "value1": "text",
            "value2": "",
            "value3": "sample3",
            "value4": "sample4"
          }
}