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.

Solution 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);
          });
  });

Solution 2

put your firebase-messaging-sw.js in the root directory same folder where index.html exist and make sure your ``firebase-messaging-sw.js is empty it does not contain any code this worked on firestore v9

Solution 3

As Firebase documentation says:

FCM requires a firebase-messaging-sw.js file. Unless you already have a firebase-messaging-sw.js file, create an empty file with that name and place it in the root of your domain before retrieving a token. You can add meaningful content to the file later in the client setup process.

So basically you need to create an empty "firebase-messaging-sw.js" file in the react public folder and it should work as expected

Comments

[Iducool]

In index.html inside body -> script tag.

[Joseph Owigo]

where do i put this code?