[firebase_messaging]: Error: failed-service-worker-registration

[deepak786]

Bug report

With Firebase JS v9, getting an error when registering the firebase messaging service worker.

Error: [firebase_messaging/failed-service-worker-registration] Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker for scope ('http://localhost:49412/firebase-cloud-messaging-push-scope') with script ('http://localhost:49412/firebase-messaging-sw.js'): ServiceWorker script evaluation failed .


    at Object.createErrorWithStack (http://localhost:49412/dart_sdk.js:5093:12)
    at Error._throw (http://localhost:49412/dart_sdk.js:20399:18)
    at Error.throwWithStackTrace (http://localhost:49412/dart_sdk.js:20396:18)
    at async._AsyncCallbackEntry.new.callback (http://localhost:49412/dart_sdk.js:40921:18)
    at Object._microtaskLoop (http://localhost:49412/dart_sdk.js:40778:13)
    at _startMicrotaskLoop (http://localhost:49412/dart_sdk.js:40784:13)
    at http://localhost:49412/dart_sdk.js:36261:9

Steps to reproduce

Steps to reproduce the behavior:

1. Clone this example app https://github.com/firebase/flutterfire/tree/master/packages/firebase_messaging/firebase_messaging/example
2. Change this line https://github.com/firebase/flutterfire/blob/82941a9d281c50bf2b5de532319f2fc401f94d15/packages/firebase_messaging/firebase_messaging/example/lib/main.dart#L40 to await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);. Otherwise you will get the error.
3. In the file, web/firebase-messaging-sw.js change the firebase version from 8.10.0 to 9.9.0.
4. Run the example app on the web.
5. See the console for errors.

Expected behavior

It should work fine with v9.

Additional context

With JS v8, firebase_messaging_sw.js is working fine, even if you have used the v9 for the web.

[darshankawar]

Thanks for the report. Using steps to replicate and JS v9, I am seeing same error as reported:

The Flutter DevTools debugger and profiler on Chrome is available at: http://127.0.0.1:9100?uri=http://127.0.0.1:50193/_vZf6uXj_9k=
Error: [firebase_messaging/failed-service-worker-registration] Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker for scope
('http://localhost:50167/firebase-cloud-messaging-push-scope') with script ('http://localhost:50167/firebase-messaging-sw.js'): ServiceWorker script evaluation failed .


    at Object.createErrorWithStack (http://localhost:50167/dart_sdk.js:5419:12)
    at Error._throw (http://localhost:50167/dart_sdk.js:21341:18)
    at Error.throwWithStackTrace (http://localhost:50167/dart_sdk.js:21335:18)
    at async._AsyncCallbackEntry.new.callback (http://localhost:50167/dart_sdk.js:43396:18)
    at Object._microtaskLoop (http://localhost:50167/dart_sdk.js:43223:13)
    at _startMicrotaskLoop (http://localhost:50167/dart_sdk.js:43229:13)
    at http://localhost:50167/dart_sdk.js:38359:9

With JS v 8.x, it compiles properly as below:

The Flutter DevTools debugger and profiler on Chrome is available at: http://127.0.0.1:9100?uri=http://127.0.0.1:50235/hyK5vHDzE7o=
FCM Token: eSNegif_kconqEcw7ZtZ5Y:APA91bG4zJBYrlY0XxiwhT1xhM3Dor0c6dk6AkVR92VEnB8erjod4biA1_hR_CHeD-hJ460v_9vxbNULJURcR-2T8Fx7HZT8E05udLzMQJwvBkBYmMWOypILV7gGEVv2hX5ABM1RZlGO
Token monitor set null

[AhmedElhenidy]

I'm new to flutter web and I’m facing the same problem how to change JS version ?

[deepak786]

@russellwheatley any update on this? should we keep using the v8 in the service worker?

[funmi-cod]

I'm facing the same issue with v9.x

[Lyokone]

Hello, In order to keep using the current syntax with v9, you need to use the compat version. It changes the URLs to

importScripts('https://www.gstatic.com/firebasejs/9.9.0/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/9.9.0/firebase-messaging-compat.js');

We are working on a guide using the new v9 version without compat, but it requires JS Bundling, so we're taking extra care to keep it simple.

[deepak786]

I have used the bundled approach based on https://github.com/firebase/flutterfire/tree/master/packages/firebase_messaging/firebase_messaging/example/bundled-service-worker. It works.

But I had to remove the code to manually display the notification because Firebase automatically handles that. https://firebase.google.com/docs/cloud-messaging/js/receive

[beriaanirudh]

@deepak786 @Lyokone @darshankawar I am facing the same issue for the last 2 days, have tried almost all stackoverflow answers, and also including the bundled-service-worker directory as @deepak786 suggested. My android and iOS setup has been working for quite sometime. I am also able to run the flutterfire's firebase_messaging example notification on my system. I have copied every step from the project into mine, but still facing the same error: Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker for scope ('http://localhost:44055/firebase-cloud-messaging-push-scope') with script ('http://localhost:44055/firebase-messaging-sw.js'): A bad HTTP response code (404) was received when fetching the script.

This error is thrown when I do a getToken like this

    if (kIsWeb) {
      token = (await FirebaseMessaging.instance.getToken(
        vapidKey: "BLn...pH8",
      ))!;
    } else {
      token = (await FirebaseMessaging.instance.getToken())!;
    }

I also generated new configs on firebase-console for web, but the newly created configs were exactly the same except for the measurementId field. Any suggestions on what I can try to debug this?

[deepak786]

@beriaanirudh Test it on https instead of http. And for that you have to host it somewhere like Firebase hosting, etc.

[beriaanirudh]

Thanks @deepak786 for looking. That didn't work, but I took the flutterfire example project, and started adding my code to it in parts to see where it stopped working, and I found that by using localhost:<port>/web to open the App, it doesn't work; but it works when localhost:<port> is used, without the "/web". Finally able to generate Token on Web.

Now I am stuck at the next part. FirebaseMessaging.onMessage is being called in the example project, but not being called in mine. I am trying the same technique to find why. Please do let me know if you have any ideas in this also. Thanks!

Update : I was able to resolve this. I had an incorrect firebase-messaging-sw.js (I must have been trying that from some StackoverFlow answer). Once fixed as per docs , I started receiving notifications.