Service Worker registration error: Unsupported MIME type ('text/html')

Question

I\'m using create-react-app with an express server.

create-react-app has a pre-configured ServiceWorker that caches local assets (https://github.com/fac

Answer 1

React: public/index.html

<script> 
  if ('serviceWorker' in navigator) {
    window.addEventListener('sw-cached-site.js', function() {
      navigator.serviceWorker.register('service-worker.js', {
        scope: '/',
      });
    });
  } 
  window.process = { env: { NODE_ENV: 'production' } };
</script>

Note: Full app/site public/sw-cached-site.js

const cacheName = 'v1';
self.addEventListener('activate', (e) =>{
  e.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cache => {
          if(cache !== cacheName) { 
            return caches.delete(cache);
          }
        })
      )
    })
  )
});
self.addEventListener('fetch', e => { 
  e.respondWith(
      fetch(e.request)
        .then(res => {
            const resClone = res.clone();
            caches
                .open(cacheName)
                .then(cache => {
                    cache.put(e.request, resClone);
                }); 
                return res;
        }).catch(err => caches.match(e.request).then(res => res))
  );
});

Answer 2

In case, you're working on with NodeJS, serviceWorker file should place at public folder. If you're using Webpack to export serviceWorker to public, you need to use 'copy-webpack-plugin'.

Answer 3

I was facing the same issue and removing other firebase libraries from my config solve the issue for me Check this on Github

// Change this 
var firebaseConfig = {
    apiKey: "*********",
    authDomain: "**********",
    databaseURL: "*********",
    projectId: "***********",
    storageBucket: "************",
    messagingSenderId: "***********",
    appId: "************"
};

// To =>
var firebaseConfig = {
  apiKey: "*****************",
  projectId: "**********",
  messagingSenderId: "*******",
  appId: "***********"
};

Answer 4

ServiceWorker supported MIME type are 'text/javascript', application/javascript and application/x-javascript. go to your server file and set

    response.writeHead(201, {
        'Content-Type': 'application/javascript'
    });

Answer 5

Replacing:

'/service-worker.js'

with:

'./service-worker.js'

_{(in navigator.serviceWorker.register('/service-worker.js'))}

solved my similar issue.

Answer 6

I think that the service worker file is not present at http://localhost:3000/service-worker.js so the server is returning index.html instead. Then the registration function has no idea of what to do with a index.html file and tells you that the MIME-type is not correct.

A quick fix would be to copy the service-worker.js file to the public folder so that when you hit http://localhost:3000/service-worker.js you see the file in the browser.

Remember to go to ChromeDev > Applications > ServiceWorkers and hit Unsubscribe. in order to remove the errored one. Remember also disable cache