Firebase Web 推送通知无法正常工作 messages.onMessage

Question

我已将网络推送通知配置到我的 PWA ionic 4 应用程序。当选项卡切换时，即在后台或我的应用程序之外，网络推送通知就像魅力一样工作。

问题是，当选项卡处于活动状态时，我会在 chrome 检查的应用程序部分收到推送消息，但没有触发任何通知。

下面是代码：

应用程序组件.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 版本 7.8.0firebase-messaging-sw.js。

Answer 1

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

所以你应该像这样订阅它

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