Fix service workers not working after upgrading to rsbuild (#3143)

* add @aaroon/workbox-rspack-plugin to generate service worker for workbox

* generate service worker file

* fix undefined env var in service worker

* deduplicate packages

* update extension for service worker file (although does not seem to affect build)

Author: sayomaki

package.json

@@ -108,6 +108,7 @@
     "yareco": "^0.1.5"
   },
   "devDependencies": {
+    "@aaroon/workbox-rspack-plugin": "^0.3.2",
     "@babel/core": "^7.24.5",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/preset-typescript": "^7.24.1",

rsbuild.config.ts

@@ -4,6 +4,7 @@ import { pluginNodePolyfill } from '@rsbuild/plugin-node-polyfill';
 import { pluginReact } from '@rsbuild/plugin-react';
 import { pluginSass } from '@rsbuild/plugin-sass';
 import { pluginSvgr } from '@rsbuild/plugin-svgr';
+import { InjectManifest } from '@aaroon/workbox-rspack-plugin';
 
 const { publicVars, rawPublicVars } = loadEnv({ prefixes: ['REACT_APP_'] });
 
@@ -118,6 +119,15 @@ export default defineConfig({
       //   })
       // ];
 
+      config.plugins = [
+        ...config.plugins,
+        new InjectManifest({
+          swSrc: './src/service-worker.ts',
+          swDest: 'service-worker.js',
+          maximumFileSizeToCacheInBytes: 20 * 1024 * 1024,
+        })
+      ];
+
       // Workaround to suppress warnings caused by ts-morph in js-slang
       // if (config.module) {
       //   config.module.noParse = /node_modules\/@ts-morph\/common\/dist\/typescript\.js$/;

src/service-worker.ts

@@ -50,7 +50,7 @@ registerRoute(
     // Return true to signal that we want to use the handler.
     return true;
   },
-  createHandlerBoundToURL(process.env.PUBLIC_URL + '/index.html')
+  createHandlerBoundToURL((process.env.PUBLIC_URL || '') + '/index.html')
 );
 
 // This allows the web app to trigger skipWaiting via