Service Worker breaks the app in Firefox

[ketysek]

Is this a bug report?

Yes

Did you try recovering your dependencies?

Yes, I've tried it on fresh installed app

Which terms did you search for in User Guide?

service worker, progressive web app

Environment

macOS Mojave (10.14.3), Firefox 66.0 (65.0 worked same), current 2.1.8 react-scripts

Steps to Reproduce

1. create an app (npx create-react-app my-app)
2. update index.js - instead of serviceWorker.unregister() call serviceWorker.register()
3. yarn run build
4. run server with production app code: serve -s -l 3000 build
5. open localhost:3000 in Firefox
6. verify that service worker is activated
7. stop serve server
8. change something (for example text) in App.js
9. yarn run build again
10. run server again
11. refresh the firefox tab with opened app

Expected Behavior

New service worker should be installed and in waiting state

Actual Behavior

It throws error in console and service worker isn't updated:

Failed to register/update a ServiceWorker for scope ‘http://localhost:3000/’: Bad Content-Type of ‘text/html’ received for script ‘http://localhost:3000/precache-manifest.5df49f687d80bec80e0acf86555252db.js’. Must be a JavaScript MIME type.

When I unregister service worker from Firefox and refresh the tab, it's again working for first time - then you refresh the tab (immediately) for the second time and it again throws the same error in console and also crashes (doesn't display the app) with another error in console:

SyntaxError: expected expression, got '<'[Learn More] main.5f3bc8a8.chunk.js:1

[heyimalex]

I managed to repro, though it took modifying-building-serving a few times. I think the issue is workbox trying to load old resources. serve returns a 404 page when you request something that doesn't exist, which is why you get a SyntaxError: expected expression, got '<'.

There are some other old issues in the tracker about similar things. I'm honestly not sure, but it may be fixed if #6725 lands. If I have time this weekend I'll try to repro on a branch with that pr to definitively say.

[r0ughnex]

@heyimalex: I had a similar issue with v3! When the resources change, workbox deletes the older resources from it's cache. So on the rare occasions where it tries to load the old resource (which does happen now and then), it crashes, because that resource does not exist.

There is an option to skip the clean up in v4 using the flag cleanupOutdatedCaches (can be added to the webpack.config.js file). So far though, I haven't encountered workbox trying to load the older resource with v4 and the flag set to true.

I suggest making a copy of your app with the issues, temporarily ejecting the copy, then changing the version of the workbox-webpack-plugin to 4.1.1, and try building your app again, to see if the updated plugin resolves your issues.

[ketysek]

It's fine in CRA 3.0.1, I've implemented service worker and it's working as expected in Firefox and other browsers too. Closing the issue :-)