Your fire massaging (modular) documentation is out of date

[IngAjVillalon]

Hi, I am gradually moving an application that I have had for years, this application works fine in compact mode, but it is made with angular 8, I am moving it to a newer version of angular and angular fire, But I'm having quite a few problems getting cloud messaging up and running, because in your documentation it looks like a skeleton or something, because in that section it says YADA YADA YADA: https://github.com/angular/angularfire/blob/master/docs/messaging.md#cloud-messaging

I tried to get it to work with your modular or advance examples, but your examples have bugs and don't work correctly, so I based your code on mine to get it to work and all I get is a response that the token was successfully generated, I get the token, but the onMessage function, never works,

I send a test notification to the generated token, from https://fcm.googleapis.com/fcm/send, I get the response that the message was sent correctly, but nothing that I received a response, I already uploaded the project to a firebase hosting preview channel, and not even there, I don't see the way to get it to run, not even following the pure javascript of firebase

https://firebase.google.com/docs/cloud-messaging/js/receive

Do you have an active and functional guide to start angular fire messaging in a modular way?

[google-oss-bot]

This issue does not seem to follow the issue template. Make sure you provide all the required information.

[Promter]

I totally agree, the examples are quite rare, on the one hand, they refer to the worker: ngsw-worker.js

but where as I understand the @angular/service-worker is not compatible with firebase-messaging-sw.js, but then...?

Your examples work with both, or how?

[ClubDelTaxi]

I support the request for documentation that at least tells us what are the basic elements needed to make firebase messaging work in a modular way, Because I also remember that in the previous documentation there was a warning that the firebase messaging service worker (firebase-messaging-sw.js) was not compatible with @angular/service-worker and that using the published angular option to integrate @angular/pwa was not the way to go.

Could we get some simple documentation on how to make cloud messaging work in a modular way? Please

[FrutasLuna]

I'm stuck on the same thing, I haven't been able to get the import onMessage function to work either, and I'm actually getting other alerts:

register.ts:83 Event handler of 'pushsubscriptionchange' event must be added on the initial evaluation of worker script.

register.ts:81 Event handler of 'push' event must be added on the initial evaluation of worker script.

register.ts:87 Event handler of 'notificationclick' event must be added on the initial evaluation of worker script.

[jjricaurtem]

I also wish to have this ducmentation updated I tried to copy the code from the sample project but I'm getting this error:

FirebaseError: Messaging: A problem occurred while subscribing the user to FCM: Request is missing required authentication credential. Expected OAuth 2 access token, login cookie or other valid authentication credential. See https://developers.google.com/identity/sign-in/web/devconsole-project. (messaging/token-subscribe-failed).

and I'm not sure about how to handle this error.

[davideast]

@IngAjVillalon I'll look into this.

[DamianRuczynski]

Hi, when the docs will be updated? Is there anyone who can share how to correctyle use messaging with angular fire?

[jjricaurtem]

I used this link here https://github.com/angular/angularfire/blob/master/docs/compat/messaging/messaging.md fo implement mine messaging client, but it can be tricky.

[DamianRuczynski]

thank you but is it still compatible with angular v14 and firebase 9?

[jjricaurtem]

I'm usign the following dependencies, but definitve will not work for PWA, only for Web Browsers (Desktop and Mobile)

"dependencies": { "@angular/animations": "^14.2.10", "@angular/cdk": "^14.2.7", "@angular/common": "^14.2.10", "@angular/compiler": "^14.2.10", "@angular/core": "^14.2.10", "@angular/fire": "^7.6.1", "@angular/forms": "^14.2.10", "@angular/material": "^14.2.7", "@angular/platform-browser": "^14.2.10", "@angular/platform-browser-dynamic": "^14.2.10", "@angular/router": "^14.2.10", "@angular/service-worker": "^14.2.10", "firebase": "^9.23.0", "firebase-functions": "^4.3.0", "rxjs": "~7.5.0", "tslib": "^2.3.0", "zone.js": "~0.11.4" },

[DamianRuczynski]

@Tucaen are you using angular fire 7+:?

[Tucaen]

Yes, I am. I think I've managed to get it together.

package.json

  "dependencies": {
    "@angular/animations": "^16.0.0",
    "@angular/common": "^16.0.0",
    "@angular/compiler": "^16.0.0",
    "@angular/core": "^16.0.0",
    "@angular/fire": "^7.6.1",
    "@angular/forms": "^16.0.0",
    "@angular/platform-browser": "^16.0.0",
    "@angular/platform-browser-dynamic": "^16.0.0",
    "@angular/router": "^16.0.0",
    "@angular/service-worker": "^16.0.0",
    "firebase": "^9.23.0",
    "primeicons": "^6.0.1",
    "primeng": "^16.3.1",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "uuid": "^9.0.1",
    "zone.js": "~0.13.0"
  },
  "devDependencies": {
    "@angular-builders/jest": "^16.0.1",
    "@angular-devkit/build-angular": "^16.0.0",
    "@angular/cli": "~16.2.0",
    "@angular/compiler-cli": "^16.0.0",
    "@types/jest": "^29.5.4",
    "@types/uuid": "^9.0.4",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "jest-preset-angular": "^13.1.1",
    "ng-mocks": "^14.11.0",
    "rxfire": "6.0.3",
    "typescript": "~5.1.3"
  }

src/firebase-messaging-sw.js

// /** Taken from: https://github.com/angular/angularfire/blob/master/samples/advanced/src/firebase-messaging-sw.js */
import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js';
import {
  getMessaging,
  isSupported,
  onBackgroundMessage,
} from 'https://www.gstatic.com/firebasejs/9.23.0/firebase-messaging-sw.js';

const app = initializeApp({
  // taken from firebase project
});

isSupported().then((isSupported) => {
  if (isSupported) {
    const messaging = getMessaging(app);

    onBackgroundMessage(messaging, ({ notification: { title, body, image } }) => {
      console.log('background message', title, body); // is called when tab is inactive
      self.registration.showNotification(title, { body, icon: image || '/assets/icons/icon-72x72.png' }); // this is not working, while "Do not disturbe" mode is active on windows"
    });
  }
});

push-notification.service.ts

import { Injectable, Optional } from '@angular/core';
import { Messaging, getToken, onMessage } from '@angular/fire/messaging';
import { EMPTY, Observable, from, share, tap } from 'rxjs';
import { environment } from 'src/environments/environment';

@Injectable({ providedIn: 'root' })
export class PushNotificationService {
  token$: Observable<any> = EMPTY;
  message$: Observable<any> = EMPTY;

  constructor(@Optional() messaging: Messaging) {
    // Request permission to receive notifications
    Notification.requestPermission().then((permission) => {
      if (permission === 'granted') console.log('Permission granted');
      else if (permission === 'denied') console.log('Permission denied');
    });

    if (messaging) {
      this.token$ = from(
        navigator.serviceWorker
          .register('firebase-messaging-sw.js', { type: 'module', scope: '__' })
          .then((serviceWorkerRegistration) =>
            getToken(messaging, {
              serviceWorkerRegistration,
              vapidKey: environment.firebase.vapidKey,
            })
          )
      ).pipe(
        tap((token) => console.log('FCM', { token })),
        share()
      );
      this.message$ = new Observable((sub) => onMessage(messaging, (it) => sub.next(it))).pipe(
        tap((it) => console.log('FCM', it))
      );

      this.message$.subscribe((x) => console.log('new foreground message', x));
    }
}

This works for me in Chrome on localhost and my PWA on android.

EDIT: I am testing via postman now instead of the Firebase "Send test message" feature.

[DamianRuczynski]

thank you :) thats look good i've got stuck on getting token while i've got an error that service messaging is unavailable but maybe it is because i did not use @Optional() decorator, thank you

[DamianRuczynski]

maybe try to recieve message apart from constructor? I have created methods like getToken or recieveMessage and used them int providers with APP_INITIALAZER in app.module.ts and useFactory where i call methods from firebase messaging service, sth like this: app.module.ts providers: [ { provide: APP_INITIALIZER, useFactory: listenFirebaseNotifications, deps: [MessagingService], multi: true, }, ],

app.iniit.providers.ts

export const listenFirebaseNotifications = (msgService: MessagingService) => () => [ msgService.requestPermission(), msgService.receiveMessage(), msgService.receiveOnBackgroundMessage(), ];

[Tucaen]

I've noticed that on mobile the first received message is always missed. Anyone else has this problem and in the best case already a solution for it?