Messaging: We are unable to register the default service worker error, firebase-messaging-sw.js, but I did not create any #5514

KissBalazs · 2021-03-30T09:14:59Z

KissBalazs
Mar 30, 2021

I have a simple Flutter app, which uses FlutterFire Firestore and Functions, Messaging.

The android bundle works without any errors, but the web client gives me quite a headache.

Initially I have stumbled upon this issue: #4837
I do not want to include any messaging in the web bundle, and still not sure why I should, but imported the said scripts in the index.html and the problem went away.

Now I face a different problem: upon starting the web app, I receive the following error:

:1337/dart_sdk.js:7025 Uncaught (in promise) 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:1337/firebase-cloud-messaging-push-scope') with script ('http://localhost:1337/firebase-messaging-sw.js'): The script has an unsupported MIME type ('text/html'). .
    at Object.throw_ [as throw] (:1337/dart_sdk.js:5334)
    at firebase_messaging_web.FirebaseMessagingWeb.new.getToken (:1337/packages/firebase_messaging_web/firebase_messaging_web.dart.lib.js:112)
    at getToken.throw (<anonymous>)
    at :1337/dart_sdk.js:39038
    at _RootZone.runBinary (:1337/dart_sdk.js:38894)
    at _FutureListener.thenAwait.handleError (:1337/dart_sdk.js:33887)
    at handleError (:1337/dart_sdk.js:34451)
    at Function._propagateToListeners (:1337/dart_sdk.js:34477)
    at _Future.new.[_completeError] (:1337/dart_sdk.js:34323)
    at async._AsyncCallbackEntry.new.callback (:1337/dart_sdk.js:34362)
    at Object._microtaskLoop (:1337/dart_sdk.js:39176)
    at _startMicrotaskLoop (:1337/dart_sdk.js:39182)
    at :1337/dart_sdk.js:34689

The app seems to be working, but calling FirebaseFunctions.instance.httpsCallabe('...: throws the same error and won't send the request to the Firebase application.

I did not create this firebase-messaging-sw.js, nor do I find any tutorial for creating this in https://firebase.flutter.dev/docs/messaging/overview/#5-web-only-add-the-sdk

Any ideas what can be wrong?
Index.html:

<!DOCTYPE html>
<html>
<head>
 ****
  <script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-firestore.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-functions.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-messaging.js"></script>


  <script>
    var firebaseConfig = {
      apiKey: "*******",
      authDomain: "*******",
      databaseURL: "*******",
      projectId: "*******",
      storageBucket: "*******",
      messagingSenderId: "*******",
      appId: "*******"
    };

    firebase.initializeApp(firebaseConfig);
  </script>
</head>
<body>
<script >
  if ('serviceWorker' in navigator) {
    window.addEventListener('flutter-first-frame', function () {
      navigator.serviceWorker.register('flutter_service_worker.js');
    });
  }
</script>
  <script src="main.dart.js" type="application/javascript"></script>
</body>
</html>

Flutter doctor:

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.0.3, on Linux, locale en_US.UTF-8)

Pubspec.yaml:

...
dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  flutter_spinkit: "^4.1.2"
  cloud_firestore: ^1.0.1
  cloud_functions: "^1.0.2"
  provider: ^5.0.0
  google_sign_in: ^5.0.0
  firebase_core: ^1.0.1
  firebase_messaging: ^9.0.0
  firebase_auth: ^1.0.1
  intl: ^0.17.0
  animations: ^2.0.0
  dropdown_search: ^0.4.6
  cupertino_icons: ^1.0.2
  auto_size_text: ^3.0.0-nullsafety.0
  carousel_slider: ^3.0.0

Answered by dopecoder

Apr 22, 2021

Hi, Please take a look at https://firebase.flutter.dev/docs/messaging/usage#handling-messages for documentation.

You have to provide a vapidKey when getToken is called through flutter web.
The firebase-service-worker.js in not needed unless you want to receive notifications in the background.

This issue can be closed.

View full answer

KissBalazs · 2021-03-30T09:37:24Z

KissBalazs
Mar 30, 2021
Author

I have found a working StackOverflow guide, it seems that I need to register a default service worker. As there were no mentions about this in the documentation, I created an issue about it there: #5515

0 replies

dopecoder · 2021-04-22T11:11:58Z

dopecoder
Apr 22, 2021

Hi, Please take a look at https://firebase.flutter.dev/docs/messaging/usage#handling-messages for documentation.

You have to provide a vapidKey when getToken is called through flutter web.
The firebase-service-worker.js in not needed unless you want to receive notifications in the background.

This issue can be closed.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Messaging: We are unable to register the default service worker error, firebase-messaging-sw.js, but I did not create any #5514

{{title}}

Replies: 2 comments

{{title}}

{{title}}

Select a reply

Messaging: We are unable to register the default service worker error, firebase-messaging-sw.js, but I did not create any #5514

KissBalazs Mar 30, 2021

Replies: 2 comments

KissBalazs Mar 30, 2021 Author

dopecoder Apr 22, 2021

KissBalazs
Mar 30, 2021

KissBalazs
Mar 30, 2021
Author

dopecoder
Apr 22, 2021