angular - Firebase 网络推送通知不起作用 messages.onMessage

Question

我已经为我的 PWA ionic 4 应用程序配置了网络推送通知。 Web推送通知正好在选项卡在后台或除我的应用程序中切换时工作。

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.

下面是代码:

app.component.ts

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

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

通知.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);
    }
  );
});
}

因此，如果应用程序选项卡在 chrome 中打开，则触发通知时应调用 console.log内 messaging.onMessage但它没有被执行。
我在 firebase-messaging-sw.js 中使用了 7.8.0 的 firebase 版本.

Answer 1

当您的应用程序在前台时，您的应用程序将不会收到通知 messaging可观察的，但它会在 messages 上发出可观察的。

所以你应该像这样订阅它

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