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

In my Express server application, I have one wildcard (asterisk / *) route that redirects to index.html:

// Load React App// Serve HTML file for productionif (env.name === "production") {  app.get("*", function response(req, res) {    res.sendFile(path.join(__dirname, "public", "index.html"));  });}

This is a very common design pattern. However, it means that any requests for unknown text files initially get redirected to index.html, and therefore return with the MIME type of "text/html", even if it's actually a JavaScript or SVG or some other kind of plaintext file.

The solution I found was to add a specific route for service-worker.js before the wildcard route:

app.get("/service-worker.js", (req, res) => {  res.sendFile(path.resolve(__dirname, "public", "service-worker.js"));});app.get("*", function response(req, res) {  res.sendFile(path.join(__dirname, "public", "index.html"));});

Now, when the browser looks for service-worker.js, Express will return it with the correct MIME type.

(Note that if you try adding the service-worker.js route after the wildcard, it won't work because the wildcard route will override.)

Replacing:

'/service-worker.js'

with:

'./service-worker.js'  // Add a dot before slash.

solved my similar issue.

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

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