add PWA plugin

package.json

@@ -8,7 +8,7 @@
     "client": "pnpm client:dev",
     "client:build": "vite build",
     "server:build": "WRANGLER_LOG=info wrangler build",
-    "deploy": "CI=true vite build && wrangler deploy --minify",
+    "deploy": "CI=true; NODE_ENV=production vite build && NODE_ENV=production wrangler deploy --minify",
     "deploy:secrets": "wrangler secret bulk secrets.json",
     "deploy:email-service": "wrangler deploy --cwd workers/email",
     "deploy:analytics-service": "wrangler deploy --cwd workers/analytics",
@@ -54,6 +54,7 @@
     "typescript": "^5.7.2",
     "vike": "0.4.193",
     "vite": "^5.4.11",
+    "vite-plugin-pwa": "^1.0.0",
     "wrangler": "^4.18.0",
     "zod": "^3.23.8"
   },

vite.config.ts

@@ -1,79 +1,62 @@
 import react from "@vitejs/plugin-react";
 import vike from "vike/plugin";
-import { defineConfig } from "vite";
+import {defineConfig} from "vite";
 import * as child_process from "node:child_process";
+import {VitePWA} from 'vite-plugin-pwa';
 
 const APP_FQDN = "open-gsio.seemueller.workers.dev";
 
-export default defineConfig(({ command }) => {
+export default defineConfig(({command}) => {
-  const customPlugins = [
+    const customPlugins = [
-    {
+        {
-      name: "sitemap-generator",
+            name: "sitemap-generator",
-      buildStart(options) {
+            buildStart(options) {
-        if (command === "build") {
+                if (command === "build") {
-          child_process.execSync("./scripts/generate_sitemap.js " + APP_FQDN);
+                    child_process.execSync("./scripts/generate_sitemap.js " + APP_FQDN);
-          console.log("Generated Sitemap -> public/sitemap.xml");
+                    console.log("Generated Sitemap -> public/sitemap.xml");
-          child_process.execSync("./scripts/generate_robots_txt.js " + APP_FQDN);
+                    child_process.execSync("./scripts/generate_robots_txt.js " + APP_FQDN);
-          console.log("Generated robots.txt -> public/robots.txt");
+                    console.log("Generated robots.txt -> public/robots.txt");
-        }
+                }
-      },
+            },
-    },
-  ];
-  return {
-    mode: "production",
-    plugins: [
-      ...customPlugins,
-      vike({
-        prerender: true,
-      }),
-      react(),
-
-    ],
-    server: {
-      port: 3000,
-      proxy: {
-        // proxies requests to worker backend
-        "/api": {
-          target: "http://localhost:3001",
         },
-        "/fonts": {
+    ];
-          target: "http://localhost:3001/fonts",
+    return {
+        mode: "production",
+        plugins: [
+            ...customPlugins,
+            vike({
+                prerender: true,
+            }),
+            react(),
+            // PWA plugin saves money on data transfer by caching assets on the client
+            VitePWA({
+                registerType: 'autoUpdate',
+                workbox: {
+                    globPatterns: ['**/*.{js,css,html,ico,png,svg}']
+                }
+            })
+        ],
+        server: {
+            port: 3000,
+            proxy: {
+                // proxies requests to worker backend
+                "/api": {
+                    target: "http://localhost:3001",
+                },
+                "/fonts": {
+                    target: "http://localhost:3001/fonts",
+                },
+            },
         },
-      },
+        esbuild: {
-    },
+            drop: ["console"]
-    build: {
+        },
-      emitAssets: false,
+        build: {
-      sourcemap: false,
+            emitAssets: false,
-      minify: true,
+            sourcemap: false,
-      target: ["es2020", "edge88", "firefox78", "chrome87", "safari13"],
+            minify: "esbuild",
-      rollupOptions: {
+            target: ["es2020", "edge88", "firefox78", "chrome87", "safari13"],
-        output: {
+            cssMinify: true
-          manualChunks(id: string) {
+        },
-            if (id.includes('node_modules')) {
+    };
-              // creating a chunk to react routes deps. Reducing the vendor chunk size
-              if (id.includes('shiki/dist/wasm')) {
-                return '@wasm-bundle';
-              }
-
-              if (id.includes('katex') || id.includes('marked') || id.includes('shiki')) {
-                return '@resources-bundle';
-              }
-
-
-              if (id.includes('chakra') || id.includes('emotion-react')) {
-                return '@gui-bundle';
-              }
-
-
-              if (id.includes('react-dom') || id.includes('vike') || id.includes('mobx') || id.includes('framer-motion')) {
-                return '@logic-bundle';
-              }
-              return 'vendor';
-            }
-          }
-        }
-      },
-      cssMinify: true
-    },
-  };
 });