From 4e01b8cab46bfe37f4d7cf92f4ffaa7c21b00bcf Mon Sep 17 00:00:00 2001
From: Arthur Belleville <arthur.belleville@datadoghq.com>
Date: Thu, 2 Apr 2026 19:32:14 +0200
Subject: [PATCH] feat(pwa): configure vite-plugin-pwa with manifest and
 workbox precaching

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
---
 apps/main/vite.config.ts | 44 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)

diff --git a/apps/main/vite.config.ts b/apps/main/vite.config.ts
index a13487b..3960322 100644
--- a/apps/main/vite.config.ts
+++ b/apps/main/vite.config.ts
@@ -5,6 +5,7 @@ import tailwindcss from "@tailwindcss/vite";
 import react from "@vitejs/plugin-react";
 import { visualizer } from "rollup-plugin-visualizer";
 import { defineConfig, type PluginOption } from "vite";
+import { VitePWA } from "vite-plugin-pwa";
 import tsconfigPaths from "vite-tsconfig-paths";
 
 // https://vitejs.dev/config/
@@ -16,6 +17,49 @@ export default defineConfig(({ mode }) => {
     tsconfigPaths(),
   ];
 
+  plugins.push(
+    VitePWA({
+      registerType: "autoUpdate",
+      includeAssets: [
+        "public/icon.jpg",
+        "public/logo_dark.png",
+        "public/logo_white.png",
+      ],
+      manifest: {
+        name: mode === "staging" ? "XTablo (Staging)" : "XTablo",
+        short_name: "XTablo",
+        description: "Collaborative project management for construction teams",
+        start_url: "/",
+        display: "standalone",
+        orientation: "any",
+        theme_color: "#1e1b2e",
+        background_color: "#1e1b2e",
+        icons: [
+          {
+            src: "pwa-icons/pwa-192x192.png",
+            sizes: "192x192",
+            type: "image/png",
+          },
+          {
+            src: "pwa-icons/pwa-512x512.png",
+            sizes: "512x512",
+            type: "image/png",
+          },
+          {
+            src: "pwa-icons/pwa-512x512-maskable.png",
+            sizes: "512x512",
+            type: "image/png",
+            purpose: "maskable",
+          },
+        ],
+      },
+      workbox: {
+        globPatterns: ["**/*.{js,css,html,ico,png,jpg,svg,woff,woff2}"],
+        globIgnores: ["**/*.map"],
+      },
+    })
+  );
+
   // Only include cloudflare plugin when not in test mode
   if (mode !== "test" && process.env.VITEST !== "true") {
     plugins.push(cloudflare({ inspectorPort: 9230 }));