CODEWITHSUNDEEP
angularfirebase-cloud-messaging
user2609021
user2609021

Reputation: 713

Angular 8 firebase push notification is not working when application is in foreground

I'm following this document to implement the FCM on my Angular web application. When I send the notification it receives successfully when the application is not active. ( Recieve background notifications ). But if the application is active, I'm not getting the notification.

Following these steps: https://dev.to/mayurkadampro/angular-8-firebase-cloud-messaging-push-notifications-97a

basically this is not triggering when there is a new message

this.angularFireMessaging.messages.subscribe(
(payload) => {
    console.log("new message received. ", payload);
    this.currentMessage.next(payload);})

What Am I missing?

Upvotes: 9

Views: 7789

Answers (3)

Mafei
Mafei

Reputation: 3819

https://github.com/mafei-dev/angular-fcm-notification-angular8-with-firebase-js-8.3

here is the updated example. please clone and run the project with your configuration details. specially care about the version of the firebase-app.js and firebase-messaging.js and @angular/fire version. as you pointed out example is used very old version of the libraries. in this example, the project has been updated with the new version of the libraries.

@angular/fire:^6.1.4 firebasejs/8.3.1

especially remove the all code from the constructor of MessagingService class.

this.angularFireMessaging.messaging.subscribe(
      (_messaging) => {
        _messaging.onMessage = _messaging.onMessage.bind(_messaging);
        _messaging.onTokenRefresh = _messaging.onTokenRefresh.bind(_messaging);
      }
    )

the constructor keeps alone.

constructor(){
}

it's working...

enter image description here

Upvotes: 0

Mukyuu
Mukyuu

Reputation: 6779

You need to trigger it manually.

When you receive you only logging it, and let the message go to the next one:

this.angularFireMessaging.messages.subscribe(
(payload) => {
    console.log("new message received. ", payload);
    this.currentMessage.next(payload);})

You need to trigger the notification from service worker:

this.angularFireMessaging.messages.subscribe(
(payload) => {
    console.log("new message received. ", payload);
    const NotificationOptions = {
            body: payload.notification.body,
            data: payload.data,
            icon: payload.notification.icon
          }
          navigator.serviceWorker.getRegistration('/firebase-cloud-messaging-push-scope').then(registration => {
            registration.showNotification(payload.notification.title, NotificationOptions);
          });
    this.currentMessage.next(payload);})

Then add in firebase-messaging-sw.js:

self.addEventListener('notificationclick', function(event) {
    event.notification.close();
    event.waitUntil(self.clients.openWindow(event.notification.data.url));
});

Upvotes: 4

matteogll
matteogll

Reputation: 951

I've the same problem with my Vue.js application. It's still not clear to me how messaging service works but try to change the input payload. I suppose you are testing notifications using Postman.

Payload for foreground notifications:

{    
  "data":{ ..  },
  "to": "....",
}

Payload for background notifications:

{
  "notification": { ... },
  "to": ""
}

Upvotes: 1

Related Questions