Flutter Failed to register a ServiceWorker for scope with script, The script has an unsupported MIME type

6,048

Found solution: https://stackoverflow.com/a/63800226/3486691

I had to create the file and provide the default settings so the app can work without throwing errors.

Share:
6,048
ForestG
Author by

ForestG

Hungarian Frontend developer, currently working in Angular on multiple projects. Has some experience with Datamining, backend Java, cross-platform and JS based full stack. While not debugging buttons, I love to jog, hike, and videogames (told you mom it would stick).

Updated on December 28, 2022

Comments

  • ForestG
    ForestG over 1 year

    I have a fully functioning Flutter app with FlutterFire, where the android bundle works just fine, but the web client gives a strange error upon start. I cannot call any firebase function with flutterfire with it either. (simple firebase queries works just fine)

    The error message upon startup or when I try to call FirebaseFunctions.instance.httpsCallabe('...:

    :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
    

    I don't have a firebase-messaging-sw.js file. I only did what the documentation recommended https://firebase.flutter.dev/docs/messaging/overview/#5-web-only-add-the-sdk.

    My index.html:

    <!DOCTYPE html>
    <html>
    <head>
    ...
    
      <!-- The core Firebase JS SDK is always required and must be listed first -->
      <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-messaging.js"></script>
      <script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-functions.js"></script>
    
    
      <script>
        // Your web app's Firebase configuration
        var firebaseConfig = {
          apiKey: "****",
          authDomain: "*****",
          databaseURL: "*****",
          projectId: "*****",
          storageBucket: "*****",
          messagingSenderId: "*****",
          appId: "*****"
        };
        // Initialize Firebase
        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)