带有 FCM 的角度推送通知

Question

我需要使用 FCM 在我的项目中实现推送通知。我已经实现了后端并按预期工作。在 Angular 方面，我能够实现两种功能(背景和前景(，此时我唯一的问题是我从推送通知中获得的有效负载没有显示在我的 html 文件中。

这是我用来用 Angular (https://dev.to/mayurkadampro/angular-8-firebase-cloud-messaging-push-notifications-97a( 实现 FCM 的文章。

这是我的消息服务文件：

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 版本与服务辅助角色中使用的版本相同。(7.6.0(

Answer 1

我遇到了类似的问题，并通过在角度上使用ng serve -ssl true标志来修复 您必须在HTTPS上才能显示前台通知