Angular 7 无法在前台接收火力基地通知

Question

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

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

我已经尝试了其他类似的堆栈溢出解决方案。但到目前为止，它们都没有奏效。

我尝试使用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 获取了令牌。 但无法在前台接收通知。

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或服务工作者文件上？

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上的火力基地具有相同的版本

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

更多详情请见：https://github.com/angular/angularfire/issues/1904#issuecomment-543506629

Answer 2

我发现service Worker 中的importScripts版本和package.json中的库版本必须相同。

Answer 3

导入脚本版本和node_modules中的库版本必须相同，前台消息订阅才能获取数据！

Answer 4

据我所知，这是一个版本兼容性问题。 只是尝试使用"Firebase"： "^5.0.0"， "@angular/火"： "^5.0.0">，

用这两个覆盖你的包.json，运行npm install，你会没事的