Workbox service worker

Created by: davejm

This PR relates to #2340 (closed) and depends on #4159.

• Switches the sw-precache-webpack-plugin for the Workbox webpack plugin
• Generates service worker with identical functionality to that of the current implementation by default
• Allows the user to customise the configuration of the service worker

Edit: I have removed the config/customisation behaviour as requested. The current behaviour is to use the GenerateSW method to precache app shell and assets.

Defaults (i.e. no config)

Generates a service worker that pre-caches app shell and assets, does navigateFallback and handles the Firebase whitelist scenario.

Customisation

You can do everything that you can normally do with the workbox webpack plugin by creating the file cra.config.js in the project route, and adding similar code to this:

module.exports = {
  workbox: {
    method: 'inject',
    config: {
      swSrc: 'src/my-custom-service-worker.js'
    }
  }
}

The method is 'generate' or 'inject' and corresponds to the two different usages of the workbox plugin. The config property is used for the actual plugin config.

See here for full configuration options.

Default configs (if not specified)

const defaultGenerateConfig = {
  exclude: [/\.map$/, /^(?:asset-)manifest.*\.js(?:on)?$/],
  navigateFallback: '/index.html',
  navigateFallbackWhitelist: [/^(?!\/__).*/], // fix for Firebase
};

const defaultInjectConfig = {
  exclude: defaultGenerateConfig.exclude,
  swSrc: path.join(paths.appSrc, 'sw.js'),
};

I haven't updated the documentation but I could help with that if necessary.