Firebase web push notification not working messaging.onMessage

Question

I have configured web push notifications to my PWA ionic 4 app. The web push notifications are working like a charm when the tab is switched i.e in background or other than my app.

The issue is when the tab is active I get the push messaging inside application section of chrome inspection but there is no notification fired.

Below is the code:

app.component.ts

async ngOnInit() {
firebase.initializeApp(environment.firebase);
}

ngAfterViewInit() {
   this.platform.ready().then(async () => {
   await this.notificationsService.requestPermission();
   });
}

notifications.service.ts

export class NotificationsService {
  init(): Promise<void> {
    return new Promise<void>((resolve, reject) => {
      navigator.serviceWorker.ready.then(
    registration => {
      // Don't crash an error if messaging not supported
      if (!firebase.messaging.isSupported()) {
        resolve();
        return;
      }

      const messaging = firebase.messaging();

      // Register the Service Worker
      messaging.useServiceWorker(registration);

      // Initialize your VAPI key
      messaging.usePublicVapidKey(environment.firebase.vapidKey);


      // Listen to messages when your app is in the foreground
      messaging.onMessage(payload => {
        console.log("Payload is here", payload);
      });
      // Optional and not covered in the article
      // Handle token refresh
      messaging.onTokenRefresh(() => {
        messaging
          .getToken()
          .then((refreshedToken: string) => {
            console.log(refreshedToken);
          })
          .catch(err => {
            console.error(err);
          });
      });

      resolve();
    },
    err => {
      reject(err);
    }
  );
});
}

So when notificatoin is triggered if the application tab is open in chrome is should call console.log inside messaging.onMessage but it doesn't get executed. I am using firebase version of 7.8.0 in firebase-messaging-sw.js.

Might want to checkout https://github.com/angular/angularfire/issues/2181 — Swoox, Mar 03 '20 at 12:52

score -1 · Answer 1 · answered Mar 06 '20 at 12:03

When your application in Foreground, your app will not going to receive notification with messaging observable but it will be emitted on messages observable.

So you should subscribe it like this

firebase.messages.subscribe((message: any) => {
        if (message.notification) {
          // Show your notification from here
        }
      });

Firebase web push notification not working messaging.onMessage

1 Answers1