STRWEB-99 bundle stripes-core's service-worker.js (#125)

Include `service-worker.js`, pulled from `@folio/stripes-core/src/service-worker.js`, in the output bundle so it can be registered via `navigator.serviceWorker.register(...)`. Handle the service-worker in a completely separate bundle (multi-compile). Refs STRWEB-99, FOLIO-3627 --------- Co-authored-by: Michał Kuklis <[email protected]>
folio-org · Oct 31, 2023 · 432e1c3 · 432e1c3
1 parent 5bbc58e
commit 432e1c3
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 13 deletions.
diff --git a/webpack.config.cli.dev.js b/webpack.config.cli.dev.js
@@ -22,6 +22,7 @@ const buildConfig = (stripesConfig) => {
 
   const base = buildBaseConfig(allModulePaths);
   const devConfig = Object.assign({}, base, cli, {
+    name: 'development',
     devtool: 'inline-source-map',
     mode: 'development',
     cache: {

diff --git a/webpack.config.cli.js b/webpack.config.cli.js
@@ -9,6 +9,5 @@ module.exports = {
     filename: 'bundle.[name][contenthash].js',
     chunkFilename: 'chunk.[name][chunkhash].js',
     publicPath: '/',
-    clean: true
   },
 };
diff --git a/webpack.config.service.worker.js b/webpack.config.service.worker.js
@@ -0,0 +1,31 @@
+const path = require('path');
+
+const config = {
+  name: 'service-worker',
+  mode: 'development',
+  target: 'web',
+  entry: {
+    'service-worker': {
+      import: '@folio/stripes-core/src/service-worker.js',
+      filename: 'service-worker.js',
+    }
+  },
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'service-worker.js',
+    publicPath: '/',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        loader: 'esbuild-loader',
+        options: {
+          target: 'es2015'
+        }
+      },
+    ]
+  }
+};
+
+module.exports = config;
diff --git a/webpack/build.js b/webpack/build.js
@@ -6,7 +6,7 @@ const applyWebpackOverrides = require('./apply-webpack-overrides');
 const logger = require('./logger')();
 const buildConfig = require('../webpack.config.cli.prod');
 const sharedStylesConfig = require('../webpack.config.cli.shared.styles');
-
+const serviceWorkerConfig = require('../webpack.config.service.worker');
 const platformModulePath = path.join(path.resolve(), 'node_modules');
 
 module.exports = function build(stripesConfig, options) {
@@ -73,9 +73,21 @@ module.exports = function build(stripesConfig, options) {
     config = applyWebpackOverrides(options.webpackOverrides, config);
 
     logger.log('assign final webpack config', config);
-    const compiler = webpack(config);
-    compiler.run((err, stats) => {
+
+    // repoint the service-worker's output.path value so it emits
+    // into options.outputPath
+    if (options.outputPath) {
+      serviceWorkerConfig.output.path = path.resolve(options.outputPath);
+    }
+    // override the default mode; given we are building, assume production
+    serviceWorkerConfig.mode = 'production';
+
+    webpack([config,serviceWorkerConfig], (err, stats) => {
       if (err) {
+        console.error(err.stack || err);
+        if (err.details) {
+          console.error(err.details);
+        }
         reject(err);
       } else {
         resolve(stats);

diff --git a/webpack/serve.js b/webpack/serve.js
@@ -9,6 +9,7 @@ const applyWebpackOverrides = require('./apply-webpack-overrides');
 const logger = require('./logger')();
 const buildConfig = require('../webpack.config.cli.dev');
 const sharedStylesConfig = require('../webpack.config.cli.shared.styles');
+const serviceWorkerConfig = require('../webpack.config.service.worker');
 
 const cwd = path.resolve();
 const platformModulePath = path.join(cwd, 'node_modules');
@@ -39,8 +40,10 @@ module.exports = function serve(stripesConfig, options) {
     config = applyWebpackOverrides(options.webpackOverrides, config);
 
     logger.log('assign final webpack config', config);
-    const compiler = webpack(config);
-    compiler.hooks.done.tap('StripesCoreServe', stats => resolve(stats));
+    const compiler = webpack([serviceWorkerConfig, config]);
+    const [swCompiler, stripesCompiler] = compiler.compilers;
+
+    stripesCompiler.hooks.done.tap('StripesCoreServe', stats => resolve(stats));
 
     const port = options.port || process.env.STRIPES_PORT || 3000;
     const host = options.host || process.env.STRIPES_HOST || 'localhost';
@@ -49,23 +52,28 @@ module.exports = function serve(stripesConfig, options) {
 
     app.use(staticFileMiddleware);
 
+    // To handle rewrites without the dot rule, we should include the static middleware twice
+    // https://github.com/bripkens/connect-history-api-fallback/blob/master/examples/static-files-and-index-rewrite
+    app.use(staticFileMiddleware);
+
+    app.use(webpackDevMiddleware(swCompiler, {
+      publicPath: serviceWorkerConfig.output.publicPath,
+    }));
+
     // Process index rewrite before webpack-dev-middleware
     // to respond with webpack's dist copy of index.html
     app.use(connectHistoryApiFallback({
       disableDotRule: true,
       htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'],
     }));
 
-    // To handle rewrites without the dot rule, we should include the static middleware twice
-    // https://github.com/bripkens/connect-history-api-fallback/blob/master/examples/static-files-and-index-rewrite
-    app.use(staticFileMiddleware);
-
-    app.use(webpackDevMiddleware(compiler, {
-      stats: 'errors-only',
+    app.use(webpackDevMiddleware(stripesCompiler, {
       publicPath: config.output.publicPath,
     }));
 
-    app.use(webpackHotMiddleware(compiler));
+
+
+    app.use(webpackHotMiddleware(stripesCompiler));
 
     app.listen(port, host, (err) => {
       if (err) {