diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index ec3c19c36c1..2f45d47cf7c 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -40,6 +40,9 @@ const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false'; // Some apps do not need the benefits of saving a web request, so not inlining the chunk // makes for a smoother build process. const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false'; +// Some app prefer to host everything themselves and not rely on the Google +// Cloud Storage CDN to host workbox. +const shouldUseWorkboxFromLocal = process.env.LOCAL_WORKBOX === 'true'; // `publicUrl` is just like `publicPath`, but we will provide it to our app // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript. // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz. @@ -515,7 +518,7 @@ module.exports = { new WorkboxWebpackPlugin.GenerateSW({ clientsClaim: true, exclude: [/\.map$/, /asset-manifest\.json$/], - importWorkboxFrom: 'cdn', + importWorkboxFrom: shouldUseWorkboxFromLocal ? 'local' : 'cdn', navigateFallback: publicUrl + '/index.html', navigateFallbackBlacklist: [ // Exclude URLs starting with /_, as they're likely an API call diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index c591bbf0d00..8782f72fb36 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -2460,6 +2460,7 @@ You can adjust various development and production settings by setting environmen | GENERATE_SOURCEMAP | :x: | :white_check_mark: | When set to `false`, source maps are not generated for a production build. This solves OOM issues on some smaller machines. | | NODE_PATH | :white_check_mark: | :white_check_mark: | Same as [`NODE_PATH` in Node.js](https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders), but only relative folders are allowed. Can be handy for emulating a monorepo setup by setting `NODE_PATH=src`. | | INLINE_RUNTIME_CHUNK | :x: | :white_check_mark: | By default, Create React App will embed the runtime script into `index.html` during the production build. When set to `false`, the script will not be embedded and will be imported as usual. This is normally required when dealing with CSP. | +| LOCAL_WORKBOX | :x: | :white_check_mark: | By default, the service worker created by Create React App will load the Workbox runtime libraries from Google Cloud Storage. When set to `true`, the script will use a local copy alongside the service worker. This is normally required when dealing with CSP or when it is prefered to host everything locally. | ## Troubleshooting