Allow runtimeCaching option without ejecting

[jliebrand]

This is more of a feature request than a bug. But I love the fact CRA comes with a working SW. However, I'd like like to add another domain to the things which our automatically cached. But I'd really like to not have to eject.

Is there anyway to make the runtimeCaching option available through the package json? Or perhaps a way to get to the SW at runtime to configure it with additional domains to cache?

[stereobooster]

One way to solve is in the same manner as c-r-a deals with sass, e.g. does not create built-in solution, but creates easy-to-integrate outside solution

yarn build && yarn regenerate-sw

where yarn regenerate-sw will read contents of manifest.json, add more resources (what ever you need) and generate new service-worker.js

[jliebrand]

ah great; i'll look in to that (although slightly unclear right now how i'd "add more resources" or indeed change the runtimeCaching option for specific domains)

[stereobooster]

I'm looking into this too (have similar issue). Custom SW is just a tip of the iceberg. There are also UI problems, and need to choose proper strategy.

This can be a starting point https://github.com/codebusking/next-hnpwa-guide-kit/blob/master/generate-sw.js

UPD:

package.json

"build": "react-scripts build && yarn run generate-sw",
"generate-sw": "sw-precache --root=build --config scripts/sw-precache-config.js && uglifyjs build/service-worker.js -o build/service-worker.js"

scripts/sw-precache-config.js

module.exports = {
  staticFileGlobs: [
    'build/static/css/*.css',
    'build/static/js/*.js',
    'build/index.html',
    // add more here
  ],
  stripPrefix: 'build',
  runtimeCaching: [{
    urlPattern: /images/,
    handler: 'cacheFirst'
  }]
};

[stereobooster]

@Swizec you might be interested in this issue too.

Also important bits:

• forbid http caching of service-worker.js with http headers Conflict between service worker and CloudFront? #3082
• it is important to show user notifications about new content (those that are logged to console). I find material instructions very useful for UX https://material.io/guidelines/components/snackbars-toasts.html#. Toast for Service Worker #2426

I'm using events to pass infor about service worker to UI

console.log('New content is available; please refresh.');
let event = new CustomEvent("serviceNotification", {
  detail: {
    state: 'newContent'
  }
});
window.document.dispatchEvent(event);

Other interesting thought: if you use redux you can refresh UI without user action (theoretically, like HMR #2304).

[Timer]

Dupe of #4169