feat(pwa): implement PWA

package.json

@@ -39,6 +39,7 @@
     "react-masonry-css": "^1.0.16",
     "react-router-dom": "^6.27.0",
     "tailwind-lerp-colors": "^1.2.6",
+    "vite-plugin-pwa": "^0.20.5",
     "vite-plugin-svgr": "^4.3.0"
   },
   "devDependencies": {
@@ -59,6 +60,11 @@
     "typescript": "~5.6.3",
     "typescript-eslint": "^8.13.0",
     "vite": "^5.4.10",
-    "vite-svg-loader": "^5.1.0"
+    "vite-svg-loader": "^5.1.0",
+    "workbox-expiration": "^7.3.0",
+    "workbox-precaching": "^7.3.0",
+    "workbox-routing": "^7.3.0",
+    "workbox-strategies": "^7.3.0",
+    "workbox-window": "^7.3.0"
   }
 }

scripts/generate-pwa-icons.js

@@ -7,17 +7,62 @@ const inputSvg = readFileSync(join(process.cwd(), "src/assets/logo.svg"));
 
 async function generateIcons() {
   try {
-    // Generate PWA icons
     for (const size of sizes) {
-      await sharp(inputSvg)
-        .resize(size, size)
+      // Create a dark background with correct color #18181B
+      const background = await sharp({
+        create: {
+          width: size,
+          height: size,
+          channels: 4,
+          background: { r: 24, g: 24, b: 27, alpha: 1 }, // #18181B
+        },
+      })
+        .png()
+        .toBuffer();
+
+      // Resize the logo
+      const resizedLogo = await sharp(inputSvg)
+        .resize(Math.round(size * 0.7), Math.round(size * 0.7)) // Make logo slightly smaller than background
+        .toBuffer();
+
+      // Composite them together
+      await sharp(background)
+        .composite([
+          {
+            input: resizedLogo,
+            blend: "over",
+            gravity: "center",
+          },
+        ])
         .png()
         .toFile(join(process.cwd(), `public/pwa-${size}x${size}.png`));
     }
 
     // Generate apple-touch-icon (180x180 is standard for Apple)
-    await sharp(inputSvg)
-      .resize(180, 180)
+    const size = 180;
+    const background = await sharp({
+      create: {
+        width: size,
+        height: size,
+        channels: 4,
+        background: { r: 24, g: 24, b: 27, alpha: 1 }, // #18181B
+      },
+    })
+      .png()
+      .toBuffer();
+
+    const resizedLogo = await sharp(inputSvg)
+      .resize(Math.round(size * 0.7), Math.round(size * 0.7))
+      .toBuffer();
+
+    await sharp(background)
+      .composite([
+        {
+          input: resizedLogo,
+          blend: "over",
+          gravity: "center",
+        },
+      ])
       .png()
       .toFile(join(process.cwd(), "public/apple-touch-icon.png"));
 

src/main.tsx

@@ -7,10 +7,23 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App.tsx";
 import "./index.css";
+import { registerSW } from "virtual:pwa-register";
 
 // Force dark mode
 document.documentElement.classList.add("dark");
 
+// Register service worker with auto update handling
+const updateSW = registerSW({
+  onNeedRefresh() {
+    if (confirm("New version available! Click OK to update.")) {
+      updateSW(true);
+    }
+  },
+  onOfflineReady() {
+    console.log("App ready to work offline");
+  },
+});
+
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <App />

src/vite-pwa.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="vite-plugin-pwa/client" />
+
+declare module 'virtual:pwa-register' {
+  export interface RegisterSWOptions {
+    immediate?: boolean
+    onNeedRefresh?: () => void
+    onOfflineReady?: () => void
+    onRegistered?: (registration: ServiceWorkerRegistration | undefined) => void
+    onRegisterError?: (error: Error) => void
+  }
+
+  export function registerSW(options?: RegisterSWOptions): (reloadPage?: boolean) => Promise<void>
+}

vite.config.ts

@@ -1,72 +1,60 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import { VitePWA } from 'vite-plugin-pwa'
 
-// https://vite.dev/config/
 export default defineConfig({
+  base: "",
   plugins: [
-    react()
+    react(),
+    VitePWA({
+      injectRegister: null,
+      selfDestroying: true,
+      includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'masked-icon.svg'],
+      manifest: {
+        name: 'dashbrr',
+        short_name: 'dashbrr',
+        description: 'A dashboard for monitoring autobrr and related services',
+        theme_color: '#18181B',
+        background_color: '#18181B',
+        display: 'standalone',
+        icons: [
+          {
+            src: 'pwa-192x192.png',
+            sizes: '192x192',
+            type: 'image/png'
+          },
+          {
+            src: 'pwa-512x512.png',
+            sizes: '512x512',
+            type: 'image/png',
+            purpose: 'any maskable'
+          }
+        ],
+        start_url: '/',
+        scope: '/'
+      },
+      workbox: {
+        globPatterns: ['**/*.{js,css,html,ico,png,svg}'],
+        sourcemap: true,
+        navigateFallbackDenylist: [/^\/api/]
+      }
+    })
   ],
   build: {
-    outDir: 'dist',
-    assetsDir: 'assets',
+    manifest: true,
+    sourcemap: true
   },
-  base: './',
-  logLevel: 'info',
   server: {
     port: 3000,
+    hmr: {
+      overlay: true
+    },
     proxy: {
       '/api': {
         target: 'http://localhost:8080',
         changeOrigin: true,
-        secure: false,
-        ws: true,
-        configure: (proxy) => {
-          // Handle proxy errors
-          proxy.on('error', (err, _req, res) => {
-            console.error('proxy error', err);
-            // Prevent connection hanging
-            if (!res.headersSent) {
-              res.writeHead(500, {
-                'Content-Type': 'text/plain',
-              });
-            }
-            res.end('Proxy error: ' + err.message);
-          });
-
-          // Handle WebSocket specific errors
-          proxy.on('proxyReqWs', (_proxyReq, _req, socket) => {
-            socket.on('error', (err) => {
-              console.error('WebSocket proxy error:', err);
-              socket.end();
-            });
-          });
-
-          // Cleanup on WebSocket close
-          proxy.on('close', () => {
-            console.log('Proxy connection closed');
-          });
-
-          // Debug logging for development
-          if (process.env.NODE_ENV === 'development') {
-            proxy.on('proxyReq', (_proxyReq, req) => {
-              console.debug(`[DEV] Proxying ${req.method} ${req.url}`);
-            });
-
-            proxy.on('proxyRes', (proxyRes, req) => {
-              console.debug(`[DEV] Received ${proxyRes.statusCode} for ${req.url}`);
-            });
-          }
-        },
+        secure: false
       }
-    },
-    hmr: {
-      // Properly handle HMR connections
-      protocol: 'ws',
-      host: 'localhost',
-      port: 3000,
-      clientPort: 3000,
-      timeout: 5000,
-      overlay: true,
-    },
-  },
+    }
+  }
 })