Use workbox-webpack-plugin

package.json

@@ -24,10 +24,9 @@
     "react-widgets": "^5.8.4"
   },
   "scripts": {
-    "start": "concurrently 'npm run generateSW' 'npx webpack serve --mode=development' 'NODE_ENV=development npx rollup --config openscad-worker.rollup.config.js --watch'",
+    "start": "concurrently 'npx webpack serve --mode=development' 'NODE_ENV=development npx rollup --config openscad-worker.rollup.config.js --watch'",
     "start:prod": "PUBLIC_URL=http://localhost:3000/dist/ npm run build && npx serve",
-    "generateSW": "workbox generateSW workbox-config.js",
+    "build": "NODE_ENV=production npx rollup --config openscad-worker.rollup.config.js && webpack --mode=production"
-    "build": "NODE_ENV=production npx rollup --config openscad-worker.rollup.config.js && webpack --mode=production && npm run generateSW"
   },
   "eslintConfig": {
     "extends": [
@@ -73,6 +72,6 @@
     "webpack": "^5.76.3",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.2",
-    "workbox-cli": "^7.1.0"
+    "workbox-webpack-plugin": "^7.1.0"
   }
 }

webpack.config.js

@@ -1,8 +1,9 @@
 const CopyPlugin = require("copy-webpack-plugin");
+const WorkboxPlugin = require('workbox-webpack-plugin');
 
 const path = require('path');
 
-module.exports = {
+module.exports = [{
   entry: './src/index.tsx',
   // devtool: 'inline-source-map',
   module: {
@@ -41,6 +42,25 @@ module.exports = {
     port: 4000,
   },
   plugins: [
+    new WorkboxPlugin.GenerateSW({ 
+        // these options encourage the ServiceWorkers to get in there fast     
+        // and not allow any straggling "old" SWs to hang around     
+        swDest: path.join(__dirname, "dist", 'sw.js'),
+        maximumFileSizeToCacheInBytes: 200 * 1024 * 1024,
+        clientsClaim: true,
+        skipWaiting: true,
+        runtimeCaching: [{
+          urlPattern: ({request, url}) => true,
+          handler: 'StaleWhileRevalidate',
+          options: {
+            cacheName: 'all',
+            expiration: {
+              maxEntries: 1000,
+              purgeOnQuotaError: true,
+            },
+          },
+        }],
+    }),
     new CopyPlugin({
       patterns: [
         { 
@@ -59,4 +79,22 @@ module.exports = {
       ],
     }),
   ],
-};
+}/*, {
+  entry: './src/sw.ts',
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.ts', '.js'],
+  },
+  output: {
+    filename: 'sw.js',
+    path: path.resolve(__dirname, 'dist'),
+  },
+}*/];

workbox-config.js

@@ -1,11 +0,0 @@
-module.exports = {
-	globDirectory: 'dist/',
-	globPatterns: [
-		'**/*.{js,txt,wav,ico,eot,svg,ttf,woff,woff2,css,html,zip,png,json,wasm,jpg}'
-	],
-	swDest: 'dist/sw.js',
-	ignoreURLParametersMatching: [
-		/^utm_/,
-		/^fbclid$/
-	]
-};