La notification push web de Firebase ne fonctionne pas messaging.onMessage

Question

J'ai configuré des notifications push web pour mon application PWA ionic 4. Les notifications push web fonctionnent comme un charme lorsque l'onglet est changé, c'est-à-dire en arrière-plan ou en dehors de mon application.

Le problème est que lorsque l'onglet est actif, je reçois le message push dans la section application de l'inspection de chrome mais aucune notification n'est envoyée.

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

Ainsi, lorsque la notification est déclenchée, si l'onglet de l'application est ouvert dans Chrome, elle doit appeler console.log à l'intérieur de messaging.onMessage mais il n'est pas exécuté. J'utilise version de firebase de 7.8.0 en firebase-messaging-sw.js .

Answer 1

J'ai eu exactement le même problème, j'ai en fait trouvé la réponse dans ceci poste . PWA ont encore quelques limitations, lorsqu'il s'agit de notifications push.

Answer 2

Lorsque votre application est à l'avant-plan, elle ne recevra pas de notification avec la mention messaging observable mais elle sera émise sur messages observable.

Vous devez donc l'abonner comme suit

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