firebase-cloud-messaging - Angular 7 无法在前台接收 firebase 通知

Question

我正在设置我的网站以接收 firebase 通知。我可以在后台接收它。但是在前台时不能。我已按照本教程链接进行设置。 https://medium.com/@a.adendrata/push-notifications-with-angular-6-firebase-cloud-massaging-dbfb5fbc0eeb .

我已经在 app.module.ts 中初始化了它。

我已经尝试过其他类似的 stackoverflow 解决方案。但到目前为止，它们都不起作用。

我尝试过使用 AngularFireMessaging 和 FirebaseApp。但是发送后他们都收不到通知。

import { FirebaseApp } from '@angular/fire';
import '@firebase/messaging';
import { AngularFireMessaging } from '@angular/fire/messaging';

  setUpMessage() {
    this.messaging = this.firebaseApp.messaging();
  }

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

  requestPermission() {
    this.afMessaging.requestToken.subscribe(token => {
      console.log(token);
    }, error => {
      console.error(error);
    });
  }

  listenToNotifications() {
    return this.afMessaging.messages;
  }

  listenNotifications() {
    return this.messaging;
  }

在我的 component.ts 文件中，我对它们进行了初始化并从 firebase 获取了 token 。但无法在前台接收通知。

ngOnInit() {
    this.fcmTokenService.setUpMessage();
    this.fcmTokenService.setUpFCM();
    this.fcmTokenService.requestPermission();
    this.validation_messages = this.printFormService.printValidationMessage();
    this.listenNotification();
    this.listenNotification2();
  }

  private listenNotification() {
    this.fcmTokenService.listenToNotifications().subscribe(msg => {
      // msg.content = JSON.parse(msg.data.content);
      console.log(msg);
    });
  }

  private listenNotification2() {
    this.fcmTokenService.listenNotifications().onMessage(msg => {
      console.log(msg);
    });
  }

我希望收到通知并在控制台记录它，但在数小时后或使用不同方法重试后没有结果。

Answer 1

在您的 firebase-messaging-sw.js 或您的 service worker 文件上？

importScripts('https://www.gstatic.com/firebasejs/7.6.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/7.6.0/firebase-messaging.js');

package.json 上的 firebase 应该有相同的版本

"dependencies": {
...
"firebase": "^7.6.0",
...
}

此处有更多详细信息:https://github.com/angular/angularfire/issues/1904#issuecomment-543506629