Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bring back navigateFallback behavior in service worker on next branch (Reverts #3419) #3870

Closed
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions packages/react-scripts/config/webpack.config.prod.js
Original file line number Diff line number Diff line change
Expand Up @@ -442,12 +442,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/blob/master/packages/react-scripts/template/README.md#service-worker-considerations
// 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
Expand Down
40 changes: 13 additions & 27 deletions packages/react-scripts/template/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,6 @@ 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)
Expand Down Expand Up @@ -1839,14 +1838,8 @@ 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
[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).
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.

### Opting Out of Caching

Expand Down Expand Up @@ -2049,27 +2042,20 @@ 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.

When users install your app to the homescreen of their device the default configuration will make a shortcut to `/`. This may not work if you don't use a client-side router and expect the app to be served from `/index.html`. In this case, the web app manifest at [`public/manifest.json`](public/manifest.json) and change `start_url` to `./index.html`.

### 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
[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 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
[`npm eject`](#npm-run-eject) and enable the [`navigateFallback`](https://github.com/GoogleChrome/sw-precache#navigatefallback-string)
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).

>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.
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": ".",
```

### Building for Relative Paths

Expand Down