使用 FCM 的 Angular 推送通知

Question

我需要使用 FCM 在我的项目中实现推送通知。我已经实现了后端并按预期工作。在 Angular 方面，我能够实现这两个功能(后台和前台)，此时我唯一的问题是我从推送通知获得的有效负载没有显示在我的 html 文件中。
这是我用来用 Angular 实现 FCM 的文章 ( https://dev.to/mayurkadampro/angular-8-firebase-cloud-messaging-push-notifications-97a )。
这是我的消息服务文件:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { AngularFireMessaging } from '@angular/fire/messaging';

@Injectable({
  providedIn: 'root'
})

export class MessagingService {
  currentMessage = new BehaviorSubject(null);
 
  constructor(private angularFireMessaging: AngularFireMessaging) {
  }
 
  requestPermission() {
    this.angularFireMessaging.requestToken.subscribe((token) => {
      console.log('Permission granted! Save to the server!', token);
    }, (error) => {
      console.log(error);
    })
  }
 
  receiveMessage() {
    this.angularFireMessaging.onMessage((payload) => {
      console.log('Message received. ', payload);
      this.currentMessage.next(payload);
    });
  }
}

app.component.ts 文件

import { Component, OnInit } from '@angular/core';
import { MessagingService } from './services/messaging.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})
export class AppComponent implements OnInit {
  title = 'pn';
  message;

  constructor(private _messagingSrv: MessagingService ) {}

  ngOnInit() {
    this._messagingSrv.requestPermission();
    this._messagingSrv.receiveMessage();
    this.message = this._messagingSrv.currentMessage;
  }

}

最后，firebase-messaging-sw.js 文件:

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

firebase.initializeApp({
  apiKey: "XXXXXXXXXXXXXXXXX",
  authDomain: "XXXXXXXXXXXXXXXXX",
  databaseURL: "XXXXXXXXXXXXXXXXX",
  projectId: "XXXXXXXXXXXXXXXXX",
  storageBucket: "XXXXXXXXXXXXXXXXX",
  messagingSenderId: "XXXXXXXXXXXXXXXXX",
  appId: "XXXXXXXXXXXXXXXXX",
  measurementId: "XXXXXXXXXXXXXXXXX"
});

const messaging = firebase.messaging();

项目中安装的 firebase 版本与 service worker 中使用的相同。 (7.6.0)

Answer 1

我有一个类似的问题，并通过在 angular 上使用 ng serve -ssl true 标志来解决
你必须在 https 上才能显示前台通知