From 82893863d019b631c88d13af0d3fcc67441db546 Mon Sep 17 00:00:00 2001 From: Jeff Posnick Date: Sat, 11 Feb 2017 16:35:50 -0500 Subject: [PATCH 01/18] sw-precache-webpack-plugin, SW registration, manifest.json --- .../react-scripts/config/webpack.config.prod.js | 6 ++++++ packages/react-scripts/package.json | 1 + packages/react-scripts/template/public/index.html | 8 ++++++++ .../react-scripts/template/public/manifest.json | 13 +++++++++++++ 4 files changed, 28 insertions(+) create mode 100644 packages/react-scripts/template/public/manifest.json diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 86d87d39211..a091f4bcb09 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -18,6 +18,7 @@ var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin'); 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 @@ -273,6 +274,11 @@ module.exports = { // having to parse `index.html`. new ManifestPlugin({ fileName: 'asset-manifest.json' + }), + new SWPrecacheWebpackPlugin({ + dontCacheBustUrlsMatching: /\.\w{8}\./, + filename: 'service-worker.js', + staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/] }) ], // Some libraries import Node modules but don't use them in the browser. diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 371b952c8c5..040ad859351 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -59,6 +59,7 @@ "recursive-readdir": "2.1.0", "strip-ansi": "3.0.1", "style-loader": "0.13.1", + "sw-precache-webpack-plugin": "^0.9.0", "url-loader": "0.5.7", "webpack": "2.2.1", "webpack-dev-server": "2.3.0", diff --git a/packages/react-scripts/template/public/index.html b/packages/react-scripts/template/public/index.html index aab5e3b00ce..05ab1feb693 100644 --- a/packages/react-scripts/template/public/index.html +++ b/packages/react-scripts/template/public/index.html @@ -3,6 +3,7 @@ + + diff --git a/packages/react-scripts/template/public/manifest.json b/packages/react-scripts/template/public/manifest.json new file mode 100644 index 00000000000..919f85c9d30 --- /dev/null +++ b/packages/react-scripts/template/public/manifest.json @@ -0,0 +1,13 @@ +{ + "short_name": "React App", + "name": "React App", + "icons": [ + { + "src": "favicon.ico", + "sizes": "192x192", + "type": "image/png" + } + ], + "start_url": "./", + "display": "standalone" +} From 75088abdea6da9190b90a1719586678f5576e2a4 Mon Sep 17 00:00:00 2001 From: Jeff Posnick Date: Sat, 11 Feb 2017 22:02:43 -0500 Subject: [PATCH 02/18] Documentation + a few SW tweaks. --- README.md | 1 + .../config/webpack.config.prod.js | 1 + packages/react-scripts/template/README.md | 64 ++++++++++++++++++- .../react-scripts/template/public/index.html | 7 -- packages/react-scripts/template/src/index.js | 3 + .../template/src/register-service-worker.js | 30 +++++++++ 6 files changed, 98 insertions(+), 8 deletions(-) create mode 100644 packages/react-scripts/template/src/register-service-worker.js diff --git a/README.md b/README.md index 52843b572ed..5f8b3b042b2 100644 --- a/README.md +++ b/README.md @@ -151,6 +151,7 @@ Please refer to the [User Guide](https://github.com/facebookincubator/create-rea * Import CSS and image files directly from JavaScript. * Autoprefixed CSS, so you don’t need `-webkit` or other prefixes. * A `build` script to bundle JS, CSS, and images for production, with sourcemaps. +* An offline-first [service worker](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers) and a [web app manifest](https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/), meeting all the [Progressive Web App](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#making-a-progressive-web-app) criteria. **The feature set is intentionally limited**. It doesn’t support advanced features such as server rendering or CSS modules. The tool is also **non-configurable** because it is hard to provide a cohesive experience and easy updates across a set of tools when the user can tweak anything. diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index a091f4bcb09..6882ffbeb73 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -278,6 +278,7 @@ module.exports = { new SWPrecacheWebpackPlugin({ dontCacheBustUrlsMatching: /\.\w{8}\./, filename: 'service-worker.js', + navigateFallback: publicUrl + '/index.html', staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/] }) ], diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index c49da3e8d34..1bbf508d53d 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -1048,7 +1048,60 @@ Learn more about React Storybook: ## Making a Progressive Web App -You can turn your React app into a [Progressive Web App](https://developers.google.com/web/progressive-web-apps/) by following the steps in [this repository](https://github.com/jeffposnick/create-react-pwa). +By default, the production build is a fully functional, offline-first +[Progressive Web App](https://developers.google.com/web/progressive-web-apps/). + +The [`sw-precache-webpack-plugin`](https://github.com/goldhand/sw-precache-webpack-plugin) +is integrated into [`webpack.config.prod.js`](../config/webpack.config.prod.js), +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 you web app is reliably fast, even on a slow or unreliable network. + +It includes a [web app manifest](https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/), +located at [`public/manifest.json`](public/manifest.json), that you might want +to customize with metadata specific to your web application, such as its name +and branding colors. + +### Offline-First Considerations + +1. The service worker is only enabled in the production environment. 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 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 +allow you to change the default 10 minute HTTP cache lifetime—then be aware +that if you visit your production site, and then revisit again before +`service-worker.js` has expired from your HTTP cache, you'll continue to get +the previously cached assets from the service worker. If you have an immediate +need to view your updated production deployment, performing a shift-refresh +will temporarily disable the service worker and retrieve all assets from the +network. + +1. Users aren't always familiar with offline-first web apps. It can be useful to +let the user know when the service worker has finished populating your caches +(showing a "This web 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 +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. + +1. By default, the generated service worker file will not intercept or cache any +cross-origin traffic, like HTTP [API requests](#integrating-with-an-api-backend), +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 +[`webpack.config.prod.js`](../config/webpack.config.prod.js). ## Deployment @@ -1096,6 +1149,15 @@ This is because when there is a fresh page load for a `/todos/42`, the server lo 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). + ### Building for Relative Paths By default, Create React App produces a build assuming your app is hosted at the server root.
diff --git a/packages/react-scripts/template/public/index.html b/packages/react-scripts/template/public/index.html index 05ab1feb693..0772b123925 100644 --- a/packages/react-scripts/template/public/index.html +++ b/packages/react-scripts/template/public/index.html @@ -28,12 +28,5 @@ To begin the development, run `npm start`. To create a production bundle, use `npm run build`. --> - diff --git a/packages/react-scripts/template/src/index.js b/packages/react-scripts/template/src/index.js index 54c5ef1a427..c1648d8ec58 100644 --- a/packages/react-scripts/template/src/index.js +++ b/packages/react-scripts/template/src/index.js @@ -1,9 +1,12 @@ import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; +import registerServiceWorker from './register-service-worker'; import './index.css'; ReactDOM.render( , document.getElementById('root') ); + +registerServiceWorker(); diff --git a/packages/react-scripts/template/src/register-service-worker.js b/packages/react-scripts/template/src/register-service-worker.js new file mode 100644 index 00000000000..ec2a1b185df --- /dev/null +++ b/packages/react-scripts/template/src/register-service-worker.js @@ -0,0 +1,30 @@ +export default () => { + if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { + window.addEventListener('load', () => { + const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; + navigator.serviceWorker.register(swUrl).then(registration => { + registration.onupdatefound = () => { + const installingWorker = registration.installing; + installingWorker.onstatechange = () => { + if (installingWorker.state === 'installed') { + if (navigator.serviceWorker.controller) { + // At this point, the old content will have been purged and + // the fresh content will have been added to the cache. + // It's the perfect time to display a "New content is + // available; please refresh." message in your web app. + console.log('New content is available; please refresh.'); + } else { + // At this point, everything has been precached. + // It's the perfect time to display a + // "Content is cached for offline use." message. + console.log('Content is cached for offline use.'); + } + } + }; + }; + }).catch(error => { + console.error('Error during service worker registration:', error); + }); + }); + } +}; From bfed2152be5bfa0e32eed95195a181ad9be20243 Mon Sep 17 00:00:00 2001 From: Jeff Posnick Date: Thu, 16 Feb 2017 14:57:21 -0500 Subject: [PATCH 03/18] Added an unregister method, too, just in case. --- packages/react-scripts/template/src/index.js | 4 ++-- ...vice-worker.js => service-worker-registration.js} | 12 ++++++++++-- 2 files changed, 12 insertions(+), 4 deletions(-) rename packages/react-scripts/template/src/{register-service-worker.js => service-worker-registration.js} (86%) diff --git a/packages/react-scripts/template/src/index.js b/packages/react-scripts/template/src/index.js index c1648d8ec58..ad4bdab3956 100644 --- a/packages/react-scripts/template/src/index.js +++ b/packages/react-scripts/template/src/index.js @@ -1,7 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; -import registerServiceWorker from './register-service-worker'; +import * as serviceWorkerRegistration from './service-worker-registration'; import './index.css'; ReactDOM.render( @@ -9,4 +9,4 @@ ReactDOM.render( document.getElementById('root') ); -registerServiceWorker(); +serviceWorkerRegistration.register(); diff --git a/packages/react-scripts/template/src/register-service-worker.js b/packages/react-scripts/template/src/service-worker-registration.js similarity index 86% rename from packages/react-scripts/template/src/register-service-worker.js rename to packages/react-scripts/template/src/service-worker-registration.js index ec2a1b185df..7da9b9faefc 100644 --- a/packages/react-scripts/template/src/register-service-worker.js +++ b/packages/react-scripts/template/src/service-worker-registration.js @@ -1,4 +1,4 @@ -export default () => { +export function register() { if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { window.addEventListener('load', () => { const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; @@ -27,4 +27,12 @@ export default () => { }); }); } -}; +} + +export function unregister() { + if ('serviceWorker' in navigator) { + navigator.serviceWorker.ready.then(function(registration) { + registration.unregister(); + }); + } +} From 28351056c0da2caa1fad3f8c4940aec259104d23 Mon Sep 17 00:00:00 2001 From: Jeff Posnick Date: Thu, 16 Feb 2017 14:57:46 -0500 Subject: [PATCH 04/18] More info for the READMEs. --- README.md | 3 +- packages/react-scripts/template/README.md | 44 +++++++++++++++++------ 2 files changed, 35 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index 5f8b3b042b2..9ce68be4887 100644 --- a/README.md +++ b/README.md @@ -93,7 +93,8 @@ Builds the app for production to the `build` folder.
It correctly bundles React in production mode and optimizes the build for the best performance. The build is minified and the filenames include the hashes.
-Your app is ready to be deployed! +A [service worker](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers) using an [offline-first caching strategy](https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/#cache-falling-back-to-network) is automatically generated.
+Your ([progressive web](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#making-a-progressive-web-app)) app is ready to be deployed! ## User Guide diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 1bbf508d53d..bd82ef34fc7 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -1064,12 +1064,34 @@ located at [`public/manifest.json`](public/manifest.json), that you might want to customize with metadata specific to your web application, such as its name and branding colors. +If you would prefer not to enable service workers prior to your initial +production deployment, then remove the call to `serviceWorkerRegistration.register()` +from [`src/index.js`](src/index.js). + +If you had previously enabled service workers in your production deployment and +have decided that you would like to disable them for all your existing users, +you can swap out the call to `serviceWorkerRegistration.register()` in +[`src/index.js`](src/index.js) with a call to `serviceWorkerRegistration.unregister()`. +After the user visits a page that has `serviceWorkerRegistration.unregister()`, +the service worker will be uninstalled. + ### Offline-First Considerations -1. The service worker is only enabled in the production environment. 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. Service workers [require HTTPS](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers#you_need_https), +although to facilitate local testing, that policy +[does not apply to `localhost`](http://stackoverflow.com/questions/34160509/options-for-testing-service-workers-via-http/34161385#34161385). +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) +on browsers that lack support. + +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 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). @@ -1083,13 +1105,13 @@ will temporarily disable the service worker and retrieve all assets from the network. 1. Users aren't always familiar with offline-first web apps. It can be useful to -let the user know when the service worker has finished populating your caches -(showing a "This web 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 +[let the user know](https://developers.google.com/web/fundamentals/instant-and-offline/offline-ux#inform_the_user_when_the_app_is_ready_for_offline_consumption) +when the service worker has finished populating your caches (showing a "This web +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 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 2dc418b7b2b0eb95dabb02833f93ec1325c6778c Mon Sep 17 00:00:00 2001 From: Will Farley Date: Thu, 16 Feb 2017 21:41:41 -0800 Subject: [PATCH 05/18] 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 06/18] 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 07/18] 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 08/18] 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 From 4e3ede4c57f45eabbe2c465a49ed162220dc0ade Mon Sep 17 00:00:00 2001 From: Jeff Posnick Date: Thu, 2 Mar 2017 23:59:05 -0500 Subject: [PATCH 09/18] Review feedback --- packages/react-scripts/template/src/index.js | 4 ++-- .../react-scripts/template/src/service-worker-registration.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react-scripts/template/src/index.js b/packages/react-scripts/template/src/index.js index ad4bdab3956..88e2c4ef3cb 100644 --- a/packages/react-scripts/template/src/index.js +++ b/packages/react-scripts/template/src/index.js @@ -1,7 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; -import * as serviceWorkerRegistration from './service-worker-registration'; +import registerServiceWorker from './service-worker-registration'; import './index.css'; ReactDOM.render( @@ -9,4 +9,4 @@ ReactDOM.render( document.getElementById('root') ); -serviceWorkerRegistration.register(); +registerServiceWorker(); diff --git a/packages/react-scripts/template/src/service-worker-registration.js b/packages/react-scripts/template/src/service-worker-registration.js index 7da9b9faefc..c3a5d878c64 100644 --- a/packages/react-scripts/template/src/service-worker-registration.js +++ b/packages/react-scripts/template/src/service-worker-registration.js @@ -1,4 +1,4 @@ -export function register() { +export default function register() { if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { window.addEventListener('load', () => { const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; @@ -31,7 +31,7 @@ export function register() { export function unregister() { if ('serviceWorker' in navigator) { - navigator.serviceWorker.ready.then(function(registration) { + navigator.serviceWorker.ready.then(registration => { registration.unregister(); }); } From 86d590dbbeb70b3adddece1845918f97c1811739 Mon Sep 17 00:00:00 2001 From: Jeff Posnick Date: Sun, 5 Mar 2017 16:18:24 -0500 Subject: [PATCH 10/18] Some additional PWA metadata --- packages/react-scripts/template/public/index.html | 1 + packages/react-scripts/template/public/manifest.json | 4 +++- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/react-scripts/template/public/index.html b/packages/react-scripts/template/public/index.html index 0772b123925..d0da717c6cf 100644 --- a/packages/react-scripts/template/public/index.html +++ b/packages/react-scripts/template/public/index.html @@ -3,6 +3,7 @@ + ## User Guide @@ -163,7 +165,9 @@ Please refer to the [User Guide](https://github.com/facebookincubator/create-rea * Import CSS and image files directly from JavaScript. * Autoprefixed CSS, so you don’t need `-webkit` or other prefixes. * A `build` script to bundle JS, CSS, and images for production, with sourcemaps. + **The feature set is intentionally limited**. It doesn’t support advanced features such as server rendering or CSS modules. The tool is also **non-configurable** because it is hard to provide a cohesive experience and easy updates across a set of tools when the user can tweak anything. From f8f3e2046df82a48cc703c3a23758692fea44848 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Wed, 17 May 2017 19:25:34 +0100 Subject: [PATCH 17/18] Hide changes in User Guide until 1.0 --- packages/react-scripts/template/README.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 8aabdcff4b5..d6b1e5742a3 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -61,8 +61,10 @@ You can find the most recent version of this guide [here](https://github.com/fac - [Editor Integration](#editor-integration) - [Developing Components in Isolation](#developing-components-in-isolation) - [Making a Progressive Web App](#making-a-progressive-web-app) + - [Deployment](#deployment) - [Static Server](#static-server) - [Other Solutions](#other-solutions) @@ -1216,6 +1218,10 @@ Learn more about React Storybook: ## Making a Progressive Web App +You can turn your React app into a [Progressive Web App](https://developers.google.com/web/progressive-web-apps/) by following the steps in [this repository](https://github.com/jeffposnick/create-react-pwa). + + + ## Deployment `npm run build` creates a `build` directory with a production build of your app. Set up your favourite HTTP server so that a visitor to your site is served `index.html`, and requests to static paths like `/static/js/main..js` are served with the contents of the `/static/js/main..js` file. From 27424cef01518c5f85066f1e0cc22b2ecd599c3e Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Wed, 17 May 2017 19:26:58 +0100 Subject: [PATCH 18/18] Hide more docs --- packages/react-scripts/template/README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index d6b1e5742a3..50bbf7b694a 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -1392,6 +1392,9 @@ It will get copied to the `build` folder when you run `npm run build`. Now requests to `/todos/42` will be handled correctly both in development and in production. + ### Building for Relative Paths