Why does an FCM error appear when calling a firebase function

user_9150652 0
Viewed 522

So I am calling a firebase function through AngularFire like so:

const response = await this.aFunctions.httpsCallable<void, ResponseType>('funcName')().toPromise();

This works when deployed to firebase (hosting), but in the local environment (using ionic serve), it throws this error:

ERROR Error: Uncaught (in promise): FirebaseError: Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker for scope ('http://localhost:8100/firebase-cloud-messaging-push-scope') with script ('http://localhost:8100/firebase-messaging-sw.js'): A bad HTTP response code (404) was received when fetching the script. (messaging/failed-service-worker-registration).
FirebaseError: Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker for scope ('http://localhost:8100/firebase-cloud-messaging-push-scope') with script ('http://localhost:8100/firebase-messaging-sw.js'): A bad HTTP response code (404) was received when fetching the script. (messaging/failed-service-worker-registration).

I am not using FCM in any way in this project. Do you have any clue why this happens?

angularfire google-cloud-functions ionic-framework angular firebase
3 Answers

Ok, I fixed it by addressing the importing of Firebase throughout my app.

// This import loads the firebase namespace along with all its type information. import firebase from 'firebase/app';

// These imports load individual services into the firebase namespace. import 'firebase/auth'; import 'firebase/database';

I was able to remove the firebase-messaging-sw.js file and all onCall functions are working properly.

I previously had a mix of:

import firebase from 'firebase;

import * as firebase from 'firebase'

Standardizing everything to import firebase from 'firebase/app' + the subsequent packages you need import 'firebase/functions'

Everything works now.

user_107458860

In my case, I solved it by commenting out the messagingSenderId.

firebase: {
  apiKey: 'XXXXX',
  authDomain: 'XXXXX',
  databaseURL: 'XXXXX',
  projectId: 'XXXXX',
  storageBucket: 'XXXXX',
  // messagingSenderId: 'XXXXX',   **<== comment out this**
  appId: 'XXXXX'
}

My case is a bit different and strange. I need to deploy an Angular project to firebase hosting.

Code:

const ob = this.functions.httpsCallable('api-name')({});
ob.subscribe((data)=>{
  //do something here
});

Error:

FirebaseError: Messaging: We are unable to register the default service worker.......

Environment:

  • Local: OK
  • firebase hosting default Domain(projectName.web.app): Error
  • firebase hosting default Domain(projectName.firebaseapp.com): OK

I don't know the reason, but hope it can help you and others who have the similar problem.

user_122321280

I wish I had a better answer but in my case I support FCM so I need to supply the messagingSenderId (though commenting out did fix the issue w/ calling my cloud func).

It seems if you support FCM & want to use htttpsCallable you NEED to get your FCM token first ‍♂️

In my case moving this before my cloud func call fixed my issue:

    const vapidKey = 'yourkey'
    const token = await firebase.messaging().getToken({ vapidKey })
    const result = await firebase.functions().httpsCallable('updateEventReaction');
    ...
user_4804150
Related