Angular 角度Firebase FCM发送成功，但不可见

我已将angular 5（jhipster）web应用程序设置为接收FCM消息。当我发送FCM消息时，我在POST man中获得了成功，但我的浏览器或receiveMessage（）函数中没有显示任何内容

以下是我的设置：

我的项目：

信息服务

@Injectable()
export class MessagingService {

  messaging = firebase.messaging()

  constructor() { }

  updateToken(token) {
    console.log("to update : {}", token)
  }

  getPermission() {
      this.messaging.requestPermission()
      .then(() => {
        console.log('Notification permission granted.');
        return this.messaging.getToken()
      })
      .then(token => {
        console.log(token)
        this.updateToken(token)
      })
      .catch((err) => {
        console.log('Unable to get permission to notify.', err);
      });
    }

    receiveMessage() {
       this.messaging.onMessage((payload) => {
        console.log("Message received. ", payload);
      });

    }
}

MessageService在main.component.ts中初始化：

main.component.ts

@Component({
    selector: 'jhi-main',
    templateUrl: './main.component.html'
})
export class JhiMainComponent implements OnInit {
    constructor(
        private msgService: MessagingService
    ) {
        this.msgService.getPermission()
        this.msgService.receiveMessage()
    }

}

import { AngularFireModule } from 'angularfire2';
import { environment } from './environment';
import * as firebase from 'firebase';
firebase.initializeApp(environment.firebase);
@NgModule({
    imports: [
        BrowserModule,
        AngularFireModule.initializeApp(environment.firebase),
        ...
     ],
     ...
     bootstrap: [JhiMainComponent]
})

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

firebase.initializeApp({
    apiKey: <apiKey>,
    authDomain: <authDomain>,
    databaseURL: <databaseURL>,
    projectId: <projectId>,
    storageBucket: <storageBucket>,
    messagingSenderId: <messagingSenderId>
});

const messaging = firebase.messaging();

这是我的app.module.ts

应用程序模块.ts

@Component({
    selector: 'jhi-main',
    templateUrl: './main.component.html'
})
export class JhiMainComponent implements OnInit {
    constructor(
        private msgService: MessagingService
    ) {
        this.msgService.getPermission()
        this.msgService.receiveMessage()
    }

}

import { AngularFireModule } from 'angularfire2';
import { environment } from './environment';
import * as firebase from 'firebase';
firebase.initializeApp(environment.firebase);
@NgModule({
    imports: [
        BrowserModule,
        AngularFireModule.initializeApp(environment.firebase),
        ...
     ],
     ...
     bootstrap: [JhiMainComponent]
})

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

firebase.initializeApp({
    apiKey: <apiKey>,
    authDomain: <authDomain>,
    databaseURL: <databaseURL>,
    projectId: <projectId>,
    storageBucket: <storageBucket>,
    messagingSenderId: <messagingSenderId>
});

const messaging = firebase.messaging();

我还有一个网络工作者：

firebase消息软件js

@Component({
    selector: 'jhi-main',
    templateUrl: './main.component.html'
})
export class JhiMainComponent implements OnInit {
    constructor(
        private msgService: MessagingService
    ) {
        this.msgService.getPermission()
        this.msgService.receiveMessage()
    }

}

import { AngularFireModule } from 'angularfire2';
import { environment } from './environment';
import * as firebase from 'firebase';
firebase.initializeApp(environment.firebase);
@NgModule({
    imports: [
        BrowserModule,
        AngularFireModule.initializeApp(environment.firebase),
        ...
     ],
     ...
     bootstrap: [JhiMainComponent]
})

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

firebase.initializeApp({
    apiKey: <apiKey>,
    authDomain: <authDomain>,
    databaseURL: <databaseURL>,
    projectId: <projectId>,
    storageBucket: <storageBucket>,
    messagingSenderId: <messagingSenderId>
});

const messaging = firebase.messaging();

.angular cli.json

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "project": {
        "name": "project"
    },
    "apps": [{
        "root": "src/main/webapp",
        "outDir": "build/www/app",
        "assets": [
            "content",
            "favicon.ico",
            "firebase-messaging-sw.js",
            "manifest.webapp"
            ]
            ....

我如何发送notif:

邮递员：

{
    "to" : "enxeahE8....ETux", // token from console.log of MessageService.getPermission() 
    "data" : {
        "body" : "First Notification",
        "title": "ALT App Testing"
    }
}

然后我获得了这样的成功：

{
    "multicast_id": <multicast_id>,
    "success": 1,
    "failure": 0,
    "canonical_ids": 0,
    "results": [
        {
            "message_id": <message_id>
        }
    ]
}

{
“多播_id”：，
"成功":一,，
“失败”：0，
“规范的_id”：0，
“结果”：[
{
“消息id”：
}
]
}

但MessageService的receiveMessage（）中没有输入任何内容，也没有显示在屏幕上

---

请提供帮助：（

您似乎不在活动选项卡上。只有在活动选项卡上，才会调用receiveMessage（）函数。否则将调用后台消息。

---

希望它会有帮助

在https中工作，而不是http，这就是它不工作的原因=>