我能够在 Angular 上获取 token 并成功通过 Node.js 本地服务器发送消息，但我无法在 Angular 应用程序上接收消息。
版本: - Angular 14 -Firebase Cloud Messaging API (V1) 而非 Cloud Messaging API(旧版)
遵循说明:https://github.com/angular/angularfire/blob/master/docs/messaging/messaging.md
app.module
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireMessagingModule } from '@angular/fire/compat/messaging';
import { environment } from 'src/environments/environment';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFireMessagingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts
import { Component, OnInit } from '@angular/core';
import { AngularFireMessaging } from '@angular/fire/compat/messaging';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'notif-boilerplate-web';
constructor(private afMessaging: AngularFireMessaging) { }
ngOnInit() {
this.requestPermission()
this.listen()
}
requestPermission() {
this.afMessaging.requestToken.subscribe({
next: token => {
console.log(token)
}
})
}
listen() {
this.afMessaging.messages
.subscribe((message) => { console.log(message); });
}
}
index.html
<!doctype html>
<html lang="en">
<head>
<link rel="manifest" href="./manifest.json">
<meta charset="utf-8">
<title>NotifBoilerplateWeb</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
firebase-messaging-sw.js
importScripts("https://www.gstatic.com/firebasejs/9.15.0/firebase-app-compat.js");
importScripts("https://www.gstatic.com/firebasejs/9.15.0/firebase-messaging-compat.js");
firebase.initializeApp({
apiKey: "***************",
authDomain: "*********.firebaseapp.com",
projectId: "**************",
storageBucket: "***********.appspot.com",
messagingSenderId: "*************",
appId: "*************",
measurementId: "*****************",
vapidKey: "******************-vzYU5mGBnfis-ADYy7k9V88yTg"
})
const messaging = firebase.messaging();
console.log(messaging)
messaging.onMessage((payload) => {
console.log('Message received. ', payload);
// ...
});
manifest.json
{
"gcm_sender_id": "10****************"
}
Angular.json
"assets": [
"src/favicon.ico",
"src/assets",
"src/firebase-messaging-sw.js",
"src/manifest.json"
]
最佳答案
https://firebase.google.com/docs/cloud-messaging/js/send-multiple#receive_and_handle_topic_messages
接收并处理主题消息
消息的行为有所不同，具体取决于页面是在前台(具有焦点)、还是在后台、隐藏在其他选项卡后面或完全关闭。在所有情况下，页面都必须处理 onMessage 回调，但在后台情况下，您可能还需要处理 onBackgroundMessage 或配置显示通知以允许用户将您的 Web 应用程序带入前台。
messaging.onBackgroundMessage(function (payload) {
console.log('Received background message ', payload);
});
关于angular - 通过 Angular 应用程序收听 Firebase 云消息传递时出现问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/74884378/