Setting serviceWorkerRegistration and vapidKey after initialisation of AngularFireMessaging

[kromakollision]

Version info

Angular: 12.2.12

Firebase: 9.6.5

AngularFire: 7.2.0

Background: Messaging.useServiceWorker() and Messaging.useVapidKey() have been deprecated in Firebase 7 and were moved to Messaging.getToken({serviceWorkerRegistration, vapidKey}) (https://firebase.google.com/support/release-notes/js#cloud-messaging_8)

Problem: AngularFireMessaging.getToken is an obervable and the serviceWorkerRegistration and vapid can only be set in the constructor.

Is there a way to set these values after AngularFireMessaging is initialized?

Or is it an option to rewrite AngularFireMessaging.getToken so that it accepts these parameters?

Or can serviceWorkerRegistration and vapidKey be exposed as setters? (see this sample code: https://github.com/kromakollision/angularfire/commit/4f1f7ec4a6a7e854151d29f75970cb260c6752e1)

The use case is registering a custom service worker depending on the app context.

[google-oss-bot]

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

[mario-linkapital]

I have the same issue, how can I pass the vapidKey parameter?

[mario-linkapital]

I may have a solution, at least worked for me. Just provide VAPID_KEY as a token in the providers. I came to this because I saw the injection token in the library. @NgModule({ declarations: [ MessagingComponent ], imports: [ RouterModule.forChild([ { path: '', component: MessagingComponent }, ]), AngularFireModule.initializeApp(environment.firebaseConfig), AngularFireMessagingModule ], providers: [ { provide: 'VAPID_KEY', useValue: environment.firebaseConfig.vapid }, MessagingService] }) export class MessagingModule { }

[Sapython]

It is very easy to see this services file Warning I am not giving you the toast notification code of angular material because it is irrelevant here. So remove those present toast functions.

And please install angular/PWA first here Initialize in app.module.ts

imports[
     provideMessaging(() => getMessaging()),
]

navigator.serviceWorker.getRegistration().then(reg => {
      getToken(this.messaging, {
        vapidKey:
          'BLIMFSWgXuuWE7r2LDUGDXDI6GvKd6Hgl-TXiiDpVNCH3q_2Ia1bsg6sDaKc_Rs_YF5DoRGeqEQoFlRAqBQn358',
          serviceWorkerRegistration:reg
      }).then((token) => {
        console.log(token);
        if(token){
          console.log('Token available')
          onMessage(this.messaging,(payload)=>{
            console.log('Messaging ',payload);
          });
        } else {
          Notification.requestPermission().then((permission) => {
            console.log(permission);  
            if (permission === 'granted') {
              console.log('Permission granted');
            } else {
              console.log('Permission denied');
            }
          })
        }
      }).catch((err) => {
        console.log(err);
      });

[kartercs]

Up on this one the given responses doesn't fix the problem.

Why do we now need @angular/pwa for this?

the "provideMessaging(() => getMessaging())," in the import section of app.module gives only errors

and the code provided above doesn't work either because it can't find neither getToken nor onMessage.

The deprecation of the "useServiceWorker" is more than 2 years old now, how can we do this please?