ANGULAR Firebase FCM 发送成功但不可见答案

【问题标题】：ANGULAR Firebase FCM send are success but not visibleANGULAR Firebase FCM 发送成功但不可见
【发布时间】：2018-02-22 16:42:30
【问题描述】：

我已经设置了我的 angular 5 (jhipster) 网络应用程序来接收 FCM 消息。当我发送 FCM 消息时，我在 POST 中获得了成功，但在我的浏览器或 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()
    }

}

这是我的 app.module.ts

app.module.ts

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]
})

我还有一个网络工作者：

firebase-messaging-sw.js

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();

最后，我的 manifest.webapp 和 .angular-cli.json

manifest.webapp

{
  "name": "project",
  "short_name": "project",
  "gcm_sender_id": "103953800507",
   ...
}

.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"
            ]
            ....

我如何发送通知：

邮递员：

{
    "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>
        }
    ]
}

但是MessageService的receiveMessage()中没有任何输入或出现在屏幕上。

请帮忙:(

【问题讨论】：

在 https 而不是 http 中工作，这就是为什么它不起作用 => stackoverflow.com/a/46546288/5193930

标签： angular firebase push-notification firebase-cloud-messaging

【解决方案1】：

您似乎不在活动标签上。只有当您在活动选项卡上时，才会调用 receiveMessage() 函数。否则将调用后台消息。希望对你有帮助

【讨论】：