Skip to content

Add minify to SWPrecacheWebpackPlugin config / fix readme typos / add more instructions #2

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

Merged
merged 4 commits into from
Mar 3, 2017
Merged
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
3 changes: 2 additions & 1 deletion packages/react-scripts/config/webpack.config.prod.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,10 @@ var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var ManifestPlugin = require('webpack-manifest-plugin');
var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
var SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
var url = require('url');
var paths = require('./paths');
var getClientEnvironment = require('./env');
var SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');

// @remove-on-eject-begin
// `path` is not used after eject - see https://github.com/facebookincubator/create-react-app/issues/1174
Expand Down Expand Up @@ -278,6 +278,7 @@ module.exports = {
new SWPrecacheWebpackPlugin({
dontCacheBustUrlsMatching: /\.\w{8}\./,
filename: 'service-worker.js',
minify: true,
navigateFallback: publicUrl + '/index.html',
staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/]
})
Expand Down
16 changes: 12 additions & 4 deletions packages/react-scripts/template/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -1084,15 +1084,23 @@ If your production web server does not support HTTPS, then the service worker
registration will fail, but the rest of your web app will remain functional.

1. Service workers are [not currently supported](https://jakearchibald.github.io/isserviceworkerready/)
in all web browsers. Service worker registration [won't be attempted](src/register-service-worker.js)
in all web browsers. Service worker registration [won't be attempted](src/service-worker-registration.js)
on browsers that lack support.

1. The service worker is only enabled in the [production environment](#Deployment),
1. The service worker is only enabled in the [production environment](#deployment),
e.g. the output of `npm run build`. It's recommended that you do not enable an
offline-first service worker in a development environment, as it can lead to
frustration when previously cached assets are used and do not include the latest
changes you've made locally.

1. If you *need* to test your offline-first service worker locally, build
the application (using `npm run build`) and run a simple http server from your
build directory. After running the build script, `create-react-app` will give
instructions for one way to test your production build locally using
`pushstate-server` and the [deployment instructions](#deployment) have
instructions for using the python `SimpleHTTPServer`. *Be sure to always use an
incognito window to avoid complications with your browser cache.*

1. If possible,configure your production environment to serve the generated
`service-worker.js` [with HTTP caching disabled](http://stackoverflow.com/questions/38843970/service-worker-javascript-update-frequency-every-24-hours).
If that's not possible—[GitHub Pages](#github-pages), for instance, does not
Expand All @@ -1111,7 +1119,7 @@ app works offline!" message) and also let them know when the service worker has
fetched the latest updates that will be available the next time they load the
page (showing a "New content is available; please refresh." message). Showing
this messages is currently left as an exercise to the developer, but as a
starting point, you can make use of the logic included in [`src/register-service-worker.js`](src/register-service-worker.js), which
starting point, you can make use of the logic included in [`src/service-worker-registration.js`](src/service-worker-registration.js), which
demonstrates which service worker lifecycle events to listen for to detect each
scenario, and which as a default, just logs appropriate messages to the
JavaScript console.
Expand All @@ -1122,7 +1130,7 @@ images, or embeds loaded from a different domain. If you would like to use a
runtime caching strategy for those requests, you can [`eject`](#npm-run-eject)
and then configure the
[`runtimeCaching`](https://github.com/GoogleChrome/sw-precache#runtimecaching-arrayobject)
option in the `SWPrecachePlugin` section of
option in the `SWPrecacheWebpackPlugin` section of
[`webpack.config.prod.js`](../config/webpack.config.prod.js).

## Deployment
Expand Down