Hey @markgoho!

You can do that, but I'm not certain it's a good idea. The ngsw is not meant to work with other SW libraries and it also works differently than your typical Service Worker. Trying to munge the two together could result in unpredictable results and that's not really good with something as powerful as a Service Worker.

Before we could recommend it we would need to see if it is a good idea, and at my early research suggests that it is not.

The long term solution is to have the ngsw use Firebase Messaging for push notifications. This is something I've spoken with the Angular team about and they are supportive of doing it.

In the meantime I recommend using Workboxjs with Firebase Messaging. It's really easy and it's a proven path.

Thank you for this input @davideast!

I'm not sure if your recommendation against the concatenation method includes the second option as well to use firebase.messaging().useServiceWorker(ngsw). Have you tried that at all?

For a current workaround are you suggesting to scrap the ngsw (via ng add @angular/pwa) altogether in favor of a pure workbox.js implementation? If that's the case, documentation on how to do that would be great to have.

Finally, I haven't seen an issue filed in the Angular repo for this specific issue (although this issue seems very similar). I'm not 100% sure what the actual issue is that prevents us from using FCM. Since you mentioned speaking to the core team about the issue, what do you suggest as far as creating an issue to track this need for a better FCM service worker integration?

I greatly appreciate the guidance here - and I'm more than willing to do the work to create the documentation for whatever solution we gather around. I just want to make sure I'm not spending hours researching a solution that someone already has in production.

🤯 to my amazement, firebase.messaging().useServiceWorker(ngsw) actually works. I never considered doing it this way, but was able to confirm that messages are handled by the SwPush service and caching still works as expected. This seems like an ideal solution at first glance, so thanks for putting it out there @markgoho.

This is much better than just concatenating files and also preserves the angular worker - are there issues I'm not aware of @davideast ?

It looks like you have to import * as firebase from firebase in the app.module.ts to get call the firebase.messaging() is that right?

That seems....sub-optimal, but maybe I'm missing something.

Can you use import { messaging } from 'firebase/app' ? Here's what I did for now to validate that it works with vanilla firebase. One issue I've noticed is that messages seem to be shown on the browser while the app is in the foreground.

import * as firebase from 'firebase/app';
import 'firebase/messaging';
firebase.initializeApp({...})
import { SwPush } from '@angular/service-worker';
@Component(...)
export class AppComponent {
 constructor(private sw: SwPush) {
 sw.messages.subscribe(console.log);
 const messaging = firebase.messaging();
 navigator.serviceWorker.getRegistration().then(registration => {
 console.log(registration);
 messaging.useServiceWorker(registration);
 messaging.requestPermission();
 messaging.getToken();
 });
}

I am able to use the way @codediodeio did to hook up firebase and default angular ngsw-worker by do following. The foreground also receive notifications like @codediodeio point out, haven't test the background app yet. I thought the SwPush might caused the alerts on foreground app so commented out and using my own service to do logging, but it looks like not related.

app.module.ts:

 imports: [
 ...
 AngularFireModule.initializeApp(environment.firebase),
 AngularFireMessagingModule,
 ...
 ],

app.component.ts:

import { Component } from '@angular/core';
import { SwPush } from '@angular/service-worker';
import { FirebaseApp } from '@angular/fire';
import { MessagingService } from 'services/firebase';
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.scss']
})
export class AppComponent {
 title = '...';
 constructor(
 private sw: SwPush,
 private firebase: FirebaseApp,
 private messagingSvc: MessagingService
 ) {
 // this.sw.messages.subscribe(console.log);
 const messaging = this.firebase.messaging();
 navigator.serviceWorker.getRegistration().then(registration => {
 if (!!registration && registration.active && registration.active.state && registration.active.state === 'activated') {
 messaging.useServiceWorker(registration);
 this.messagingSvc.requestPermission('');
 this.messagingSvc.receiveMessage();
 } else {
 console.warn('No active service worker found, not able to get firebase messaging');
 }
 });
 }
}

messaging.service.ts:

 requestPermission(userId: string) {
 this.angularFireMessaging.requestToken.subscribe(
 (token) => {
 console.log(token);
 },
 (err) => {
 console.error('Unable to get permission to notify.', err);
 }
 );
 }
 receiveMessage() {
 this.angularFireMessaging.messages.subscribe(
 (payload) => {
 console.log('new message received: ', payload);
 // We decide not to do anything yet.
 });
 }

@zhangxin511
It seems to fail on the line const messaging = this.firebase.messaging(); with the error that firebase.messaging is not a function.

Is there something missing perhaps?

@SauceCode84 I think it may because you didn't initialize the firebase app properly in your module. Can you show how you initialize it? I think you might miss the messaging module?

For me, I end up not using angular dependency injection since I used dynamic firebase configurations that got from api, this is what the partial code looks like:
The module doing nothing for me now:
image

The component using the firebase messaging:

1. import
   image

2. defining as a class property:
   image

3. initialize app and messaging object, note, the configs for the app is dynamic I don't know the proper way to include in module.ts therefore I get ride of the DI system of angular:
   image

I'm trying to call a Firebase Function and I'm getting this error:

An unknown error occurred when fetching the script.
Failed to load resource: net::ERR_FILE_NOT_FOUND

searching about this Error Message it seems related to the Service Worker
so I wonder if AngularFireFunctions relies on this firebase-messaging-sw
or if it's my function that needs to be deployed properly :-?

BTW, a smooth integration with the ngsw would be ideal

This may be a dumb question, but can we use the method described here to implement FCM with the Angular Service Worker?

@wooldridgetm That if app active, this thread is mainly talk about notifications working with ngsw, service worker, so the app can get notifications when it is not active or closed.

@zhangxin511 Just so I understand you...you're saying this method doesn't allow notifications when the app is closed or isn't active?

@wooldridgetm Sorry I may miss understand your question. If you are asking if we can not use FCM but use the method you mentioned, yes you can.
If you are asking if we can receive notification when app is off-load in any means, no we won't. I barely remember I do tried the method you mentioned for the project I worked on using angular 7, where the service worker doesn't not handle notifications when app offload. I think I also checked angular 8 source one day for this and it was still not supported by then.
The problem is, the following code only works when your app is active loaded by browser:

subscribeToNotifications() {
 this.swPush.requestSubscription({
 serverPublicKey: this.VAPID_PUBLIC_KEY
 })
 .then(sub => this.newsletterService.addPushSubscriber(sub).subscribe())
 .catch(err => console.error("Could not subscribe to notifications", err));
 }

I end up using some customized logic to overwrites the default angular service worker js file and made the the off-load notification works (not for safari, nor ios, which is another story).

Ah, yes, I understand now. Thanks!

@SauceCode84 @wooldridgetm @matheo

I created a post about this if you are still interested. Along with the demo repo here

This issue in the Angular repo requested by the documentation appears to have been created here: angular/angular#34352

@zhangxin511 I have been looking at implementing your method and fired up your demo. it all works except for subscribing to messages and notificationClicks from SwPush. Did you manage to get these two working?

@bevbomb I am not sure what exactly you did, but if you follow the post, should have worked for subscribing to messages and notificationClicks from SwPush. Did you check your angular versions? There is a picture for the app there:
https://miro.medium.com/max/1400/0*iV5jSHBYBpR5m0fS

@zhangxin511 I have been looking at implementing your method and fired up your demo. it all works except for subscribing to messages and notificationClicks from SwPush. Did you manage to get these two working?

@zhangxin511 i managed to get it working. I declared a local variable of firebase.messaging() to use In place of calling the instance each time and it worked after that. I’m not sure how that would have affected it.

FYI we now support VAPID_KEY and SERVICE_WORKER DI tokens, the latter where you can inject a factory that looks up a service worker registration. I'm hoping to standardize ngsw compatibility after I do some more testing.

Very pleased with @zhangxin511 's solution as he published under Kabbage Engineering blog.

Using the new getToken API, things went perfectly smooth. Not forgetting to amend manifest.json..

Snippets of code:

import { FirebaseApp } from '@angular/fire';
....
 constructor(
 private swUpdate: SwUpdate,
 private swPush: SwPush,
 private firebase: FirebaseApp,
 ) { }
....
 const serviceWorkerRegistration = await navigator.serviceWorker.getRegistration();
 const messaging = this.firebase.messaging();
 console.log('MESSAGING SW', serviceWorkerRegistration);
 messaging.getToken({
 vapidKey:
 'BEYQVzBmAoN4......X0mpSy9sHSinAHyhBT534cwwrkr49A1qqNg-M',
 serviceWorkerRegistration // this should be the fix for angularfire not working with ngsw
 }
 ....

Hello all, can anyone tell me why AngularFireMessaging is not compatible with the Angular Service Worker and what's the impact of having both working simultaneously?

Hi all,

Are there any news regarding documentation for FCM with ngsw. I feel a bit lost as I see a lot of scattered information about what needs to be done to implement FCM, and was hoping someone could point me to a stackblitz or an article explaining all the steps in detail?

P.S. Sorry if this is too random, I am not a very experienced developer :/

Hey just wondering has there been any updates on this? Above, on Aug 30th 2021 jamesdanies says to just use v7 compat, is it ok to use the new non compat version now?

Hey, do we have any news on this?