Fix site not loading after re-build (fixes #136)

The source of the error is that the service-worker is looking for the
front-end assets (the `.css` and `.js` files) but they're not to be
found in the browser cache (specifically in `CacheStorage`), and the
version of the files the service-worker is looking for is not to be
found on the server as well, as they've been replaced with the newer
build files. This bug was introduced when the migration from Webpack to
Vite happened, as then the public path of the build assets changed (from
`/app.[hash].js` to `/assets/index-[hash].js`, and likewise for the CSS
files); the service-worker was not updated to reflect this change.

The solution would be to fix the service-worker, and also, for the time
being, to not clear the `ui/dist` folder when re-building the front-end
so as to keep the old assets.

ui/package.json

@@ -12,7 +12,8 @@
     "preview": "vite preview",
     "format": "prettier . --write",
     "generate-yaml": "node scripts/generate-yaml.js",
-    "copy-sw": "node scripts/copy-sw.js"
+    "copy-sw": "node scripts/copy-sw.js",
+    "clean": "rm -rf dist/*"
   },
   "dependencies": {
     "clsx": "^2.1.1",

ui/service-worker.js

@@ -67,7 +67,7 @@ const shouldCache = (request) => {
   const url = new URL(request.url, `${self.location.protocol}//${self.location.host}`);
   const { pathname } = url;
 
-  if (pathname.startsWith('/app.') && endsWithOneOf(pathname, ['.js', '.css'])) {
+  if (pathname.startsWith('/assets/') && endsWithOneOf(pathname, ['.js', '.css'])) {
     return true;
   }
 

ui/vite.config.ts

@@ -23,6 +23,9 @@ export default defineConfig({
       },
     },
   },
+  build: {
+    emptyOutDir: false,
+  },
   define: yamlConfigDefine,
 });