problem listening to firebase cloud messaging via angular app

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.

Versions: -Angular 14 -Firebase Cloud Messaging API (V1) not Cloud Messaging API (Legacy)

instructions followed: 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"
            ]

Answer 1

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.

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

problem listening to firebase cloud messaging via angular app

Question

1 answers

solution1
0 ACCPTED 2023-01-12 02:38:54

problem listening to firebase cloud messaging via angular app

Question

1 answers

solution1 0 ACCPTED 2023-01-12 02:38:54

solution1
0 ACCPTED 2023-01-12 02:38:54