CODEWITHSUNDEEP
javascriptangularfirebasefirebase-cloud-messaging
user2750473
user2750473

Reputation: 69

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

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.

Upvotes: 5

Views: 4946

Answers (5)

G Vin ił
G Vin ił

Reputation: 1

In file Firebase.sw.js:

const messaging = firebase.messaging();

messaging.onBackgroundMessage((payload) => {
  const channel = new BroadcastChannel('bg-notification');
  channel.postMessage(payload);
});

In file Angular's Component.ts:

ngOnInit() {
    this.channel = new window.BroadcastChannel("bg-notification");
    this.channel.addEventListener('message', this.handleMessage);
}

Upvotes: 0

AMAL MOHAN N
AMAL MOHAN N

Reputation: 1632

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 a notification in the payload. So remove the notification, and it 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"
          }
}

Upvotes: 1

Rahul Raveendran
Rahul Raveendran

Reputation: 153

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.

Upvotes: 0

barsawi13
barsawi13

Reputation: 167

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.

Upvotes: 0

Facundo Miño
Facundo Miño

Reputation: 81

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

works for me!

Upvotes: 4

Related Questions