Create-react-app: Failed to register a ServiceWorker -- serving CRA through Node / Express

[lightninglu10]

Is this a bug report?

Yes

Can you also reproduce the problem with npm 4.x?

Yes

Which terms did you search for in User Guide?

Error during service worker registration: DOMException: Failed to register a ServiceWorker: The script has an unsupported MIME type ('text/html').

register service worker

service worker

Environment

1. node -v: v8.1.2
2. npm -v: 4.6.1
3. yarn --version (if you use Yarn): 1.0.2
4. npm ls react-scripts (if you haven’t ejected): 1.0.13

Then, specify:

1. Operating system: MacOS Sierra
2. Browser and version (if relevant): Google Chrome

Steps to Reproduce

(Write your steps here:)

1. go here: https://swtest.quantfive.org/
2. Inspect element
3. View error

Expected Behavior

Register a service worker

Actual Behavior

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

/service-worker.js Failed to load resource: net::ERR_INSECURE_RESPONSE

Error during service worker registration: DOMException: Failed to register a ServiceWorker: The script has an unsupported MIME type ('text/html').

Reproducible Demo

Go here to this website: https://swtest.quantfive.org/

Repo Here: https://github.com/lightninglu10/react-sw-test

I'm serving create-react-app through express. I'm forwarding all requests to Index.html and I'm deploying this via Docker & AWS Elastic Beanstalk. Not sure what the error is but I'd like to have a service worker running.

It's not a front end issue as I'm running the bare bones CRA. I think it may have something to do with serving through express.

[ztanner]

https://swtest.quantfive.org/service-worker.js needs to resolve the file built by sw-precache. Instead, express is redirecting it to your app index.html.

[lightninglu10]

Oh, is it the service-worker.js in the build dir?

[knipferrc]

Yeah, the service worker is in the build dir. I serve my app with Koa and have no issues with server worker.

[lightninglu10]

Alright, thanks guys, this worked!

for reference, I added

app.get('/service-worker.js', (req, res) => {
    res.sendFile(path.resolve(__dirname, '..', 'build', 'service-worker.js'));
});

In my express server.

[barbalex]

This issue has plagued me for a while on several apps. When building a spa usually you implement a catch-all route like this (hapijs example):

server.route({
    method: 'GET',
    path: '/{path*}',
    handler: {
      file: 'index.html',
    },
  })

Which means that index.js takes over the service-worker.js route.

So I can imagine that this happens to more people than just me. And the resulting error does not help to find the real reason. Or so it seems to me.

It might help a lot of people to mention the need to explicitely route service-worker.js in the readme, maybe here: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#offline-first-considerations