From 1539ba50f1801e22ea6d1ee80018db4b69735357 Mon Sep 17 00:00:00 2001 From: Jeff Posnick Date: Mon, 6 Nov 2017 16:42:32 -0500 Subject: [PATCH 1/3] Disables navigateFallback and updates the README --- .../config/webpack.config.prod.js | 10 ++-- packages/react-scripts/template/README.md | 47 ++++++++++++++----- 2 files changed, 40 insertions(+), 17 deletions(-) diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 457a9672892..0484c157f87 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -342,13 +342,13 @@ module.exports = { console.log(message); }, minify: true, - // For unknown URLs, fallback to the index page - navigateFallback: publicUrl + '/index.html', - // Ignores URLs starting from /__ (useful for Firebase): - // https://github.com/facebookincubator/create-react-app/issues/2237#issuecomment-302693219 - navigateFallbackWhitelist: [/^(?!\/__).*/], // Don't precache sourcemaps (they're large) and build asset manifest: staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/], + // `navigateFallback` and `navigateFallbackWhitelist` are disabled by default; + // see https://github.com/facebookincubator/create-react-app/issues/3248 and + // https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#serving-apps-with-client-side-routing + // navigateFallback: publicUrl + '/index.html', + // navigateFallbackWhitelist: [/^(?!\/__).*/], }), // Moment.js is an extremely popular library that bundles large locale files // by default due to how Webpack interprets its code. This is a practical diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index b8c0b74df39..3e838a0e260 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -76,6 +76,7 @@ You can find the most recent version of this guide [here](https://github.com/fac - [Static Server](#static-server) - [Other Solutions](#other-solutions) - [Serving Apps with Client-Side Routing](#serving-apps-with-client-side-routing) + - [Service Worker Considerations](#service-worker-considerations) - [Building for Relative Paths](#building-for-relative-paths) - [Azure](#azure) - [Firebase](#firebase) @@ -1624,8 +1625,14 @@ is integrated into production configuration, and it will take care of generating a service worker file that will automatically precache all of your local assets and keep them up to date as you deploy updates. The service worker will use a [cache-first strategy](https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/#cache-falling-back-to-network) -for handling all requests for local assets, including the initial HTML, ensuring -that your web app is reliably fast, even on a slow or unreliable network. +for handling all requests for local assets, including +[navigation requests](https://developers.google.com/web/fundamentals/primers/service-workers/high-performance-loading#first_what_are_navigation_requests) +for `/` and `/index.html`, ensuring that your web app is consistently fast, even +on a slow or unreliable network. + +>Note: If you are using the `pushState` history API and want to enable +cache-first navigations for URLs other than `/` and `/index.html`, please +[follow these steps](#service-worker-considerations). ### Opting Out of Caching @@ -1828,21 +1835,37 @@ If you’re using [Apache Tomcat](http://tomcat.apache.org/), you need to follow Now requests to `/todos/42` will be handled correctly both in development and in production. -On a production build, and in a browser that supports [service workers](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers), -the service worker will automatically handle all navigation requests, like for -`/todos/42`, by serving the cached copy of your `index.html`. This -service worker navigation routing can be configured or disabled by -[`eject`ing](#npm-run-eject) and then modifying the -[`navigateFallback`](https://github.com/GoogleChrome/sw-precache#navigatefallback-string) -and [`navigateFallbackWhitelist`](https://github.com/GoogleChrome/sw-precache#navigatefallbackwhitelist-arrayregexp) -options of the `SWPreachePlugin` [configuration](../config/webpack.config.prod.js). - -When users install your app to the homescreen of their device the default configuration will make a shortcut to `/index.html`. This may not work for client-side routers which expect the app to be served from `/`. Edit the web app manifest at [`public/manifest.json`](public/manifest.json) and change `start_url` to match the required URL scheme, for example: +When users install your app to the homescreen of their device the default +configuration will make a shortcut to `/index.html`. This may not work for +client-side routers which expect the app to be served from `/`. Edit the web app +manifest at [`public/manifest.json`](public/manifest.json) and change +`start_url` to match the required URL scheme, for example: ```js "start_url": ".", ``` +### Service Worker Considerations + +[Navigation requests](https://developers.google.com/web/fundamentals/primers/service-workers/high-performance-loading#first_what_are_navigation_requests) +for URLs like `/todos/42` will not be intercepted by the generated +[service worker](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers), +that's created by the production build. Navigations for those URLs will always +require a network connection, as opposed to navigations for `/` and +`/index.html`, both of which will be served from the cache by the service worker +and continue to work while offline. + +If you are using the `pushState` history API and would like to enable service +worker support for navigations to URLs like `/todos/42`, you need to +[`npm eject`](#npm-run-eject) and enable the +[`navigateFallback`](https://github.com/GoogleChrome/sw-precache#navigatefallback-string) +and [`navigateFallbackWhitelist`](https://github.com/GoogleChrome/sw-precache#navigatefallbackwhitelist-arrayregexp) +options of the `SWPreachePlugin` [configuration](../config/webpack.config.prod.js). + +>Note: This is a [change in default behavior](https://github.com/facebookincubator/create-react-app/issues/3248), +as earlier versions of `create-react-app` shipping with `navigateFallback` +enabled by default. + ### Building for Relative Paths By default, Create React App produces a build assuming your app is hosted at the server root.
From 4c1c89edf9c914feff32fb5f1f438d031bc5b827 Mon Sep 17 00:00:00 2001 From: Jeff Posnick Date: Mon, 6 Nov 2017 16:46:03 -0500 Subject: [PATCH 2/3] Typos --- packages/react-scripts/template/README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 3e838a0e260..4205c7a69de 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -1848,12 +1848,12 @@ manifest at [`public/manifest.json`](public/manifest.json) and change ### Service Worker Considerations [Navigation requests](https://developers.google.com/web/fundamentals/primers/service-workers/high-performance-loading#first_what_are_navigation_requests) -for URLs like `/todos/42` will not be intercepted by the generated -[service worker](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers), -that's created by the production build. Navigations for those URLs will always +for URLs like `/todos/42` will not be intercepted by the +[service worker](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers) +created by the production build. Navigations for those URLs will always require a network connection, as opposed to navigations for `/` and `/index.html`, both of which will be served from the cache by the service worker -and continue to work while offline. +and work without requiring a network connection. If you are using the `pushState` history API and would like to enable service worker support for navigations to URLs like `/todos/42`, you need to From 318e8d9bf9670fc13e8df7c805a79aa553fec8ce Mon Sep 17 00:00:00 2001 From: Jeff Posnick Date: Mon, 6 Nov 2017 16:47:30 -0500 Subject: [PATCH 3/3] Updated a URL in a comment. --- packages/react-scripts/config/webpack.config.prod.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 0484c157f87..cc8a086d811 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -344,9 +344,8 @@ module.exports = { minify: true, // Don't precache sourcemaps (they're large) and build asset manifest: staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/], - // `navigateFallback` and `navigateFallbackWhitelist` are disabled by default; - // see https://github.com/facebookincubator/create-react-app/issues/3248 and - // https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#serving-apps-with-client-side-routing + // `navigateFallback` and `navigateFallbackWhitelist` are disabled by default; see + // https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#service-worker-considerations // navigateFallback: publicUrl + '/index.html', // navigateFallbackWhitelist: [/^(?!\/__).*/], }),