通过 angular 应用收听 firebase 云消息时出现问题

Question

I am able to get the token on angular and successfully sent a message via node.js local server but I cannot receive a message on angular app.我能够在 angular 上获取令牌并通过 node.js 本地服务器成功发送消息，但我无法在 angular 应用程序上收到消息。

Versions: -Angular 14 -Firebase Cloud Messaging API (V1) not Cloud Messaging API (Legacy)版本：-Angular 14 -Firebase Cloud Messaging API (V1) 不是 Cloud Messaging API (Legacy)

instructions followed: https://github.com/angular/angularfire/blob/master/docs/messaging/messaging.md说明如下： 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应用程序组件.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 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 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清单.json

{
    "gcm_sender_id": "10****************"
}

angular.json angular.json

            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/firebase-messaging-sw.js",
              "src/manifest.json"
            ]

Answer 1

https://firebase.google.com/docs/cloud-messaging/js/send-multiple#receive_and_handle_topic_messages https://firebase.google.com/docs/cloud-messaging/js/send-multiple#receive_and_handle_topic_messages

Receive and handle topic messages接收和处理主题消息

The behavior of messages differs depending on whether the page is in the foreground (has focus), or in the background, hidden behind other tabs, or completely closed.消息的行为取决于页面是在前台（有焦点），还是在后台，隐藏在其他选项卡后面，或者完全关闭。 In all cases the page must handle the onMessage callback, but in background cases you may also need to handle onBackgroundMessage or configure the display notification to allow the user to bring your web app into the foreground.在所有情况下，页面都必须处理 onMessage 回调，但在后台情况下，您可能还需要处理 onBackgroundMessage 或配置显示通知以允许用户将您的 web 应用程序带到前台。

messaging.onBackgroundMessage(function (payload) {
    console.log('Received background message ', payload);
});

通过 angular 应用收听 firebase 云消息时出现问题

问题描述

1 个解决方案

解决方案1
0 已采纳 2023-01-12 02:38:54

通过 angular 应用收听 firebase 云消息时出现问题

问题描述

1 个解决方案

解决方案1 0 已采纳 2023-01-12 02:38:54

解决方案1
0 已采纳 2023-01-12 02:38:54