The script has an unsupported MIME type ('text/html')

Question

I am trying to setup Firebase Push for the Flutter Web platform.

I have copied same setup as it is shown in the various tutorial and running into following error,

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:61027/firebase-cloud-messaging-push-scope') with script ('http://localhost:61027/firebase-messaging-sw.js'): The script has an unsupported MIME type ('text/html')

Here is an excerpt of my Index.html

<script>
    if ('serviceWorker' in navigator) {
      window.addEventListener('flutter-first-frame', function () {
        navigator.serviceWorker.register('/flutter_service_worker.js')
        .then(function(registration) {
      // Registration was successful
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function(err) {
      // registration failed :(
      console.log('ServiceWorker registration failed: ', err);
    })
      });
 }
</script>
<script src="main.dart.js" type="application/javascript"></script>

Index.html and flutter_service_worker.js are in the same folder.

I am getting a successful service registration message. After receiving push permission I am using the following code to get token using following code and then getting error.

getIt<FirebaseMessaging>().getToken(vapidKey:"xxx");

I am getting above mentioned error.

Any help or direction would be appreciated.

Answer 1

messaging.useServiceWorker(registration); is the only fix for this problem.

I found solution from Another Stackoverflow Question but there comments are saying that useServiceWorker is deprecated and that was the reason I was not incline to use it but I don't see any other option working at this momennt. Here is my full snippet of registration.

const messaging = firebase.messaging();
navigator.serviceWorker.register('/firebase-message-sw.js')
          .then(function (registration) {
            // Registration was successful
            console.log('firebase-message-sw :ServiceWorker registration successful with scope: ', registration.scope);
            messaging.useServiceWorker(registration);
          }, function (err) {
            // registration failed :(
            console.log('firebase-message-sw: ServiceWorker registration failed: ', err);
          });
  });