Search code examples
angularfirebasefirebase-cloud-messagingservice-workerangular-service-worker

problem listening to firebase cloud messaging via angular app

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"
            ]

enter image description here

Solution

  • 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);
});