Service Worker caches download links

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?

Service Worker and Caching

Environment

N/A

Steps to Reproduce

The default ServiceWorker appears to cache files that it has not seen or downloaded. I have an api call which basically generates a zip to download, and is accessible via a http link. When a user navigates to this download URL by clicking on a link, the service worker intercepts the request, and tries to service the default index page.

With the ServiceWorker active, it appears that it is trying to retrieve this file from cache rather than requesting it from the server.

1. (I think this is important) Have the homepage set to "." in the package.json config.
2. Have a link somewhere on your application that points to a file via an API call
3. Click on the think with the service worker active

Expected Behavior

The browser would download the file (as it does without the service worker active)

Actual Behavior

The service worker intercepts the download and serves the normal index.html file.

Suggested Behaviour

Have the whitelist exposed as a configuration so that a set of paths don’t invoke the service worker.

[chee]

my advice here (not affiliated with create-react-app) is to build the service-worker.js yourself.

you don’t need to eject to take hold of this part of your project, you can leave the registerServiceWorker.js exactly as it is and do the following:

create a sw-precache config file:

// config/sw.js
module.exports = {
  staticFileGlobs: [
    'build/**/*.js',
    'build/**/*.css',
    'build/index.html'
  ],
  navigateFallback: '/index.html',
  // something like this should allow everything but files ending with `.zip`
  navigateFallbackWhitelist: [/^(?!.*[.]zip$).*$/],
  cacheId: 'my-magical-cache-machine'
}

then install sw-precache:

npm i -D sw-precache

and add something like this as part of your build script:

sw-precache --root='build/' --config config/sw.js 

this is what i’ve been doing in a couple of production applications for a month or two now and it works very nicely.

[yegodz]

never mind - just figured out.

You can overwrite create-react-app’s default service worker by running sw-precache directly in package.json after react-scripts build like so:

"build": "react-scripts build && cd build && sw-precache --config ../sw-precache-config.js",

Then you can add a sw-precache-config.js file in the root folder where you can control the options for the serviceworker created by sw-precache