From 0cf67b8adef15ff56861d5426106612040647bdb Mon Sep 17 00:00:00 2001 From: MOZGIII Date: Thu, 21 Nov 2019 20:27:57 +0300 Subject: [PATCH 1/2] Switched to WorkboxWebpackPlugin.InjectManifest from WorkboxWebpackPlugin.GenerateSW --- packages/react-scripts/config/paths.js | 3 +++ .../react-scripts/config/webpack.config.js | 26 +++++++++---------- 2 files changed, 15 insertions(+), 14 deletions(-) diff --git a/packages/react-scripts/config/paths.js b/packages/react-scripts/config/paths.js index acaca7f4d48..cd32670fbc6 100644 --- a/packages/react-scripts/config/paths.js +++ b/packages/react-scripts/config/paths.js @@ -81,6 +81,7 @@ module.exports = { appPublic: resolveApp('public'), appHtml: resolveApp('public/index.html'), appIndexJs: resolveModule(resolveApp, 'src/index'), + appServiceWorkerJs: resolveModule(resolveApp, 'src/service-worker'), appPackageJson: resolveApp('package.json'), appSrc: resolveApp('src'), appTsConfig: resolveApp('tsconfig.json'), @@ -104,6 +105,7 @@ module.exports = { appPublic: resolveApp('public'), appHtml: resolveApp('public/index.html'), appIndexJs: resolveModule(resolveApp, 'src/index'), + appServiceWorkerJs: resolveModule(resolveApp, 'src/service-worker'), appPackageJson: resolveApp('package.json'), appSrc: resolveApp('src'), appTsConfig: resolveApp('tsconfig.json'), @@ -140,6 +142,7 @@ if ( appPublic: resolveOwn(`${templatePath}/public`), appHtml: resolveOwn(`${templatePath}/public/index.html`), appIndexJs: resolveModule(resolveOwn, `${templatePath}/src/index`), + appServiceWorkerJs: resolveModule(resolveOwn, `${templatePath}/src/service-worker`), appPackageJson: resolveOwn('package.json'), appSrc: resolveOwn(`${templatePath}/src`), appTsConfig: resolveOwn(`${templatePath}/tsconfig.json`), diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js index d34d06f1148..a7c74dd1288 100644 --- a/packages/react-scripts/config/webpack.config.js +++ b/packages/react-scripts/config/webpack.config.js @@ -50,6 +50,9 @@ const imageInlineSizeLimit = parseInt( process.env.IMAGE_INLINE_SIZE_LIMIT || '10000' ); +// Check if Service Worker is setup +const useServiceWorker = fs.existsSync(paths.appServiceWorkerJs); + // Check if TypeScript is setup const useTypeScript = fs.existsSync(paths.appTsConfig); @@ -170,6 +173,9 @@ module.exports = function(webpackEnv) { // require.resolve('webpack/hot/dev-server'), isEnvDevelopment && require.resolve('react-dev-utils/webpackHotDevClient'), + // Add service worker if it's available. + isEnvProduction && useServiceWorker && + paths.appServiceWorkerJs, // Finally, this is your app's code: paths.appIndexJs, // We include the app code last so that if there is a runtime error during @@ -674,23 +680,15 @@ module.exports = function(webpackEnv) { // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack // You can remove this if you don't use Moment.js: new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), - // Generate a service worker script that will precache, and keep up to date, - // the HTML & assets that are part of the Webpack build. + // Inject a manifest into a service worker script that would allow + // precaching, and keep up to date, the HTML & assets that are part of + // the Webpack build. isEnvProduction && - new WorkboxWebpackPlugin.GenerateSW({ - clientsClaim: true, + useServiceWorker && + new WorkboxWebpackPlugin.InjectManifest({ + swSrc: paths.appServiceWorkerJs, exclude: [/\.map$/, /asset-manifest\.json$/], importWorkboxFrom: 'cdn', - navigateFallback: publicUrl + '/index.html', - navigateFallbackBlacklist: [ - // Exclude URLs starting with /_, as they're likely an API call - new RegExp('^/_'), - // Exclude any URLs whose last part seems to be a file extension - // as they're likely a resource and not a SPA route. - // URLs containing a "?" character won't be blacklisted as they're likely - // a route with query params (e.g. auth callbacks). - new RegExp('/[^/?]+\\.[^/]+$'), - ], }), // TypeScript type checking useTypeScript && From 47468d65eb9785307f19afd4571f798570eab9e5 Mon Sep 17 00:00:00 2001 From: MOZGIII Date: Thu, 21 Nov 2019 21:41:09 +0300 Subject: [PATCH 2/2] Add service-worker.js to templates --- .../template/src/service-worker.js | 28 +++++++++++++++++++ .../template/src/service-worker.js | 28 +++++++++++++++++++ 2 files changed, 56 insertions(+) create mode 100644 packages/cra-template-typescript/template/src/service-worker.js create mode 100644 packages/cra-template/template/src/service-worker.js diff --git a/packages/cra-template-typescript/template/src/service-worker.js b/packages/cra-template-typescript/template/src/service-worker.js new file mode 100644 index 00000000000..8ae344c9783 --- /dev/null +++ b/packages/cra-template-typescript/template/src/service-worker.js @@ -0,0 +1,28 @@ +/* eslint-disable no-restricted-globals */ + +self.addEventListener("message", event => { + if (event.data && event.data.type === "SKIP_WAITING") { + self.skipWaiting(); + } +}); + +// eslint-disable-next-line no-undef +workbox.core.clientsClaim(); + +/** + * The workboxSW.precacheAndRoute() method efficiently caches and responds to + * requests for URLs in the manifest. + * See https://goo.gl/S9QRab + */ +self.__precacheManifest = [].concat(self.__precacheManifest || []); +// eslint-disable-next-line no-undef +workbox.precaching.precacheAndRoute(self.__precacheManifest, {}); + +// eslint-disable-next-line no-undef +workbox.routing.registerNavigationRoute( + // eslint-disable-next-line no-undef + workbox.precaching.getCacheKeyForURL("/index.html"), + { + blacklist: [/^\/_/, /\/[^/?]+\.[^/]+$/] + } +); diff --git a/packages/cra-template/template/src/service-worker.js b/packages/cra-template/template/src/service-worker.js new file mode 100644 index 00000000000..8ae344c9783 --- /dev/null +++ b/packages/cra-template/template/src/service-worker.js @@ -0,0 +1,28 @@ +/* eslint-disable no-restricted-globals */ + +self.addEventListener("message", event => { + if (event.data && event.data.type === "SKIP_WAITING") { + self.skipWaiting(); + } +}); + +// eslint-disable-next-line no-undef +workbox.core.clientsClaim(); + +/** + * The workboxSW.precacheAndRoute() method efficiently caches and responds to + * requests for URLs in the manifest. + * See https://goo.gl/S9QRab + */ +self.__precacheManifest = [].concat(self.__precacheManifest || []); +// eslint-disable-next-line no-undef +workbox.precaching.precacheAndRoute(self.__precacheManifest, {}); + +// eslint-disable-next-line no-undef +workbox.routing.registerNavigationRoute( + // eslint-disable-next-line no-undef + workbox.precaching.getCacheKeyForURL("/index.html"), + { + blacklist: [/^\/_/, /\/[^/?]+\.[^/]+$/] + } +);