Add package name to env vars so that registerServiceWorker can know projects package name

Author: ro-savage

packages/react-scripts/config/env.js

@@ -67,7 +67,7 @@ process.env.NODE_PATH = (process.env.NODE_PATH || '')
 // injected into the application via DefinePlugin in Webpack configuration.
 const REACT_APP = /^REACT_APP_/i;
 
-function getClientEnvironment(publicUrl) {
+function getClientEnvironment(publicUrl, packageName) {
   const raw = Object.keys(process.env)
     .filter(key => REACT_APP.test(key))
     .reduce(
@@ -84,6 +84,9 @@ function getClientEnvironment(publicUrl) {
         // This should only be used as an escape hatch. Normally you would put
         // images into the `src` and `import` them in code to get their paths.
         PUBLIC_URL: publicUrl,
+        // package.json name property.
+        // Used by service worker to know the name of the generated service worker.
+        PACKAGE_NAME: packageName,
       }
     );
   // Stringify all values so we can feed into Webpack DefinePlugin

packages/react-scripts/config/webpack.config.dev.js

@@ -29,8 +29,10 @@ const publicPath = '/';
 // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 // Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
 const publicUrl = '';
+// Get packageName from package.json
+const packageName = require(paths.appPackageJson).name;
 // Get environment variables to inject into our app.
-const env = getClientEnvironment(publicUrl);
+const env = getClientEnvironment(publicUrl, packageName);
 
 // This is the development configuration.
 // It is focused on developer experience and fast rebuilds.

packages/react-scripts/config/webpack.config.prod.js

@@ -33,11 +33,12 @@ const shouldUseRelativeAssetPaths = publicPath === './';
 // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
 const publicUrl = publicPath.slice(0, -1);
-// Get environment variables to inject into our app.
-const env = getClientEnvironment(publicUrl);
 // Get packageName from package.json
 const packageName = require(paths.appPackageJson).name;
 
+// Get environment variables to inject into our app.
+const env = getClientEnvironment(publicUrl, packageName);
+
 // Assert this just to be safe.
 // Development builds of React are slow and not intended for production.
 if (env.stringified['process.env'].NODE_ENV !== '"production"') {

packages/react-scripts/template/src/registerServiceWorker.js

@@ -12,7 +12,7 @@ export default function register() {
   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
     window.addEventListener('load', () => {
       // this would become service-work-hash.js
-      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker-${process.env.PACKAGE_NAME}.js`;
       if (!navigator.serviceWorker.controller) {
         // No service worker yet
         registerServiceWorker(swUrl);