fix(webpack-config): use custom register-service-worker.js if availab…

…le (#1159)

* fix(webpack-config): use custom register-service-worker.js if available

* Prevent register-service-worker from being copied twice

packages/webpack-config/src/types.ts

@@ -63,6 +63,7 @@ export interface FilePathsFolder {
   serveJson: string;
   favicon: string;
   serviceWorker: string;
+  registerServiceWorker: string;
 }
 export interface FilePaths {
   absolute: PathResolver;

packages/webpack-config/src/utils/paths.ts

@@ -106,6 +106,7 @@ function parsePaths(projectRoot: string, nativeAppManifest?: ExpoConfig): FilePa
       serveJson: templatePath('serve.json'),
       favicon: templatePath('favicon.ico'),
       serviceWorker: templatePath('expo-service-worker.js'),
+      registerServiceWorker: templatePath('register-service-worker.js'),
     },
     production: {
       get: getProductionPath,
@@ -115,6 +116,7 @@ function parsePaths(projectRoot: string, nativeAppManifest?: ExpoConfig): FilePa
       serveJson: getProductionPath('serve.json'),
       favicon: getProductionPath('favicon.ico'),
       serviceWorker: getProductionPath('expo-service-worker.js'),
+      registerServiceWorker: getProductionPath('register-service-worker.js'),
     },
   };
 }

packages/webpack-config/src/webpack.config.ts

@@ -16,6 +16,8 @@ import WatchMissingNodeModulesPlugin from 'react-dev-utils/WatchMissingNodeModul
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import CopyWebpackPlugin from 'copy-webpack-plugin';
 import { boolish } from 'getenv';
+import path from 'path';
+import webpack from 'webpack';
 import { getPathsAsync, getPublicPaths } from './utils/paths';
 import createAllLoaders from './loaders/createAllLoaders';
 import { ExpoDefinePlugin, ExpoProgressBarPlugin, ExpoHtmlWebpackPlugin } from './plugins';
@@ -24,16 +26,10 @@ import withOptimizations from './withOptimizations';
 import withReporting from './withReporting';
 import withCompression from './withCompression';
 
-import path from 'path';
-import webpack from 'webpack';
-
 import createDevServerConfigAsync from './createDevServerConfigAsync';
 import { Arguments, DevConfiguration, FilePaths, Mode } from './types';
 
-import {
-  DEFAULT_ALIAS,
-  overrideWithPropertyOrConfig,
-} from './utils/config';
+import { DEFAULT_ALIAS, overrideWithPropertyOrConfig } from './utils/config';
 import getMode from './utils/getMode';
 import getConfig from './utils/getConfig';
 import { Environment } from './types';
@@ -63,21 +59,22 @@ function getDevtool(
 
 function getOutput(locations: FilePaths, mode: Mode, publicPath: string): Output {
   const commonOutput: Output = {
-      sourceMapFilename: '[chunkhash].map',
-      // We inferred the "public path" (such as / or /my-project) from homepage.
-      // We use "/" in development.
-      publicPath,
-      // Build folder (default `web-build`)
-      path: locations.production.folder,
-  }
+    sourceMapFilename: '[chunkhash].map',
+    // We inferred the "public path" (such as / or /my-project) from homepage.
+    // We use "/" in development.
+    publicPath,
+    // Build folder (default `web-build`)
+    path: locations.production.folder,
+  };
 
   if (mode === 'production') {
     commonOutput.filename = 'static/js/[name].[contenthash:8].js';
     // There are also additional JS chunk files if you use code splitting.
     commonOutput.chunkFilename = 'static/js/[name].[contenthash:8].chunk.js';
     // Point sourcemap entries to original disk location (format as URL on Windows)
-    commonOutput.devtoolModuleFilenameTemplate = (info: webpack.DevtoolModuleFilenameTemplateInfo): string =>
-      locations.absolute(info.absoluteResourcePath).replace(/\\/g, '/');
+    commonOutput.devtoolModuleFilenameTemplate = (
+      info: webpack.DevtoolModuleFilenameTemplateInfo
+    ): string => locations.absolute(info.absoluteResourcePath).replace(/\\/g, '/');
   } else {
     // Add comments that describe the file import/exports.
     // This will make it easier to debug.
@@ -88,15 +85,18 @@ function getOutput(locations: FilePaths, mode: Mode, publicPath: string): Output
     // There are also additional JS chunk files if you use code splitting.
     commonOutput.chunkFilename = 'static/js/[name].chunk.js';
     // Point sourcemap entries to original disk location (format as URL on Windows)
-    commonOutput.devtoolModuleFilenameTemplate = (info: webpack.DevtoolModuleFilenameTemplateInfo): string =>
-      path.resolve(info.absoluteResourcePath).replace(/\\/g, '/');
+    commonOutput.devtoolModuleFilenameTemplate = (
+      info: webpack.DevtoolModuleFilenameTemplateInfo
+    ): string => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/');
   }
 
   return commonOutput;
 }
 
-
-export default async function(env: Environment, argv: Arguments = {}): Promise<Configuration | DevConfiguration> {
+export default async function(
+  env: Environment,
+  argv: Arguments = {}
+): Promise<Configuration | DevConfiguration> {
   const config = getConfig(env);
   const mode = getMode(env);
   const isDev = mode === 'development';
@@ -177,7 +177,15 @@ export default async function(env: Environment, argv: Arguments = {}): Promise<C
             from: locations.template.folder,
             to: locations.production.folder,
             // We generate new versions of these based on the templates
-            ignore: ['expo-service-worker.js', 'favicon.ico', 'serve.json', 'index.html', 'icon.png'],
+            ignore: [
+              'expo-service-worker.js',
+              'favicon.ico',
+              'serve.json',
+              'index.html',
+              'icon.png',
+              // We copy this over in `withWorkbox` as it must be part of the Webpack `entry` and have templates replaced.
+              'register-service-worker.js',
+            ],
           },
           {
             from: locations.template.serveJson,
@@ -303,7 +311,9 @@ export default async function(env: Environment, argv: Arguments = {}): Promise<C
 
 // Some libraries import Node modules but don't use them in the browser.
 // Tell Webpack to provide empty mocks for them so importing them works.
-function withNodeMocks(webpackConfig: Configuration | DevConfiguration): Configuration | DevConfiguration {
+function withNodeMocks(
+  webpackConfig: Configuration | DevConfiguration
+): Configuration | DevConfiguration {
   webpackConfig.node = {
     ...(webpackConfig.node || {}),
     module: 'empty',
@@ -314,6 +324,6 @@ function withNodeMocks(webpackConfig: Configuration | DevConfiguration): Configu
     net: 'empty',
     tls: 'empty',
     child_process: 'empty',
-  }
+  };
   return webpackConfig;
 }

packages/webpack-config/src/withWorkbox.ts

@@ -133,10 +133,10 @@ export default function withWorkbox(
   const expoEntry = config.entry;
   config.entry = async () => {
     const entries = await ensureEntryAsync(expoEntry);
-    const swPath = join(locations.production.folder, 'register-service-worker.js');
+    const swPath = join(locations.production.registerServiceWorker);
     if (entries.app && !entries.app.includes(swPath) && autoRegister) {
       const content = (await readFile(
-        require.resolve('../web-default/register-service-worker.js'),
+        require.resolve(locations.template.registerServiceWorker),
         'utf8'
       ))
         .replace('SW_PUBLIC_URL', publicUrl)