Supports PWA.

PWA is supported using vite-plugin-pwa.

client/package.json

@@ -52,8 +52,9 @@
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
     "typescript": "^5.8.3",
-    "vite": "^6.4.1",
-    "vite-plugin-mkcert": "^1.17.8"
+    "vite": "^6.3.5",
+    "vite-plugin-mkcert": "^1.17.8",
+    "vite-plugin-pwa": "^1.0.3"
   },
   "scripts": {
     "dev": "refine dev",

client/vite.config.ts

@@ -1,8 +1,43 @@
 import react from "@vitejs/plugin-react";
 import { defineConfig } from "vite";
+import { VitePWA } from 'vite-plugin-pwa'
 import svgr from "vite-plugin-svgr";
 
 export default defineConfig({
   base: "",
-  plugins: [react(), svgr()],
+  plugins: [react(), svgr(),
+  VitePWA({
+    registerType: 'autoUpdate',
+    devOptions: {
+      enabled: true,
+    },
+    includeAssets: ['favicon.ico', 'robots.txt'],
+    manifest: {
+      name: "Spoolman",
+      short_name: "Spoolman",
+      description: "Keep track of your inventory of 3D-printer filament spools.",
+      "icons": [
+        {
+          "purpose": "maskable",
+          "sizes": "512x512",
+          "src": "icon512_maskable.png",
+          "type": "image/png"
+        },
+        {
+          "purpose": "any",
+          "sizes": "512x512",
+          "src": "icon512_rounded.png",
+          "type": "image/png"
+        }
+      ],
+      background_color: "#1F1F1F",
+      theme_color: "#DC7734",
+      display: "standalone",
+      start_url: "/",
+      scope: "/"
+    },
+    workbox: {
+      maximumFileSizeToCacheInBytes: 10 * 1024 * 1024,
+    }
+  })],
 });