From 2dc418b7b2b0eb95dabb02833f93ec1325c6778c Mon Sep 17 00:00:00 2001 From: Will Farley Date: Thu, 16 Feb 2017 21:41:41 -0800 Subject: [PATCH 1/4] Add minify to SWPrecacheWebpackPlugin config --- packages/react-scripts/config/webpack.config.prod.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 6882ffbeb73..58b346f19a7 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -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 @@ -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$/] }) From 21d14bb0c56c19b45cda83576dff5645b2312a58 Mon Sep 17 00:00:00 2001 From: Will Farley Date: Thu, 16 Feb 2017 21:42:13 -0800 Subject: [PATCH 2/4] Fix SWPrecacheWebpackPlugin typo --- packages/react-scripts/template/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index bd82ef34fc7..474cf7d9679 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -1122,7 +1122,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 From a681e9110a11601d6d56ac9d687f20b89bb6547a Mon Sep 17 00:00:00 2001 From: Ian Schmitz Date: Thu, 16 Feb 2017 22:18:32 -0800 Subject: [PATCH 3/4] Fix file references in READMEmd --- packages/react-scripts/template/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 474cf7d9679..6296402603f 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -1084,7 +1084,7 @@ 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), @@ -1111,7 +1111,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. From a9fb90621651b1f2eb319918de6443f0cc94bfa0 Mon Sep 17 00:00:00 2001 From: Will Farley Date: Fri, 17 Feb 2017 08:29:28 -0800 Subject: [PATCH 4/4] Add instructions for testing service-worker locally --- packages/react-scripts/template/README.md | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 6296402603f..d5e19b3edfc 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -1087,12 +1087,20 @@ registration will fail, but the rest of your web app will remain functional. 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