From cbc03c56bfbcf7ea2da7a1d593ef0213505651eb Mon Sep 17 00:00:00 2001
From: Tronax <mail@tronax.dev>
Date: Tue, 25 Aug 2026 19:12:12 +0200
Subject: [PATCH] feat: add PWA support and mobile-responsive layouts

- Add web app manifest, maskable/apple-touch icons, and a production-only
  service worker that caches the app shell for offline start
- Improve mobile UX: responsive breakpoints from ~320px, 44px touch
  targets, safe-area insets, dvh heights, 16px inputs to avoid iOS zoom
- Serve .webmanifest with correct content type in the Go static handler
- Document PWA behavior and mobile features in the README
---
 README.md                                     | 19 ++++
 backend/internal/httpapi/server.go            |  3 +
 frontend/index.html                           |  8 +-
 frontend/public/icons/apple-touch-icon.svg    | 14 +++
 frontend/public/icons/icon-maskable.svg       | 13 +++
 frontend/public/icons/icon.svg                | 13 +++
 frontend/public/manifest.webmanifest          | 22 +++++
 .../src/components/SectionConnections.vue     | 10 +-
 frontend/src/components/SectionRequests.vue   | 13 +++
 frontend/src/components/ShareLinkCard.vue     |  9 ++
 frontend/src/main.ts                          |  9 ++
 frontend/src/styles/main.css                  | 37 +++++++-
 frontend/src/views/BookingView.vue            | 14 ++-
 frontend/src/views/DashboardView.vue          |  2 +
 frontend/src/views/LandingView.vue            |  7 ++
 frontend/src/views/LoginView.vue              |  1 +
 frontend/src/views/RegisterView.vue           |  1 +
 frontend/vite.config.ts                       | 91 ++++++++++++++++++-
 18 files changed, 277 insertions(+), 9 deletions(-)
 create mode 100644 frontend/public/icons/apple-touch-icon.svg
 create mode 100644 frontend/public/icons/icon-maskable.svg
 create mode 100644 frontend/public/icons/icon.svg
 create mode 100644 frontend/public/manifest.webmanifest

diff --git a/README.md b/README.md
index d361d95..32130dc 100644
--- a/README.md
+++ b/README.md
@@ -18,6 +18,8 @@ Kalender nie.
 - 📨 **Buchungsanfragen** annehmen/ablehnen; angenommene Zeiten werden belegt und verhindern Doppelbuchungen
 - ⚙️ Buchungsregeln: Zeitfenster, Slot-Raster (10–60 Min), Dauern, Wochentage, Horizont (1–120 Tage), Zeitzone
 - 🧊 **Liquid-Glass-UI** mit **Dark-/Light-Mode**: Umschalter (Auto / Dunkel / Hell) auf jeder Seite, automatische Systemerkennung (`prefers-color-scheme`) inkl. Live-Wechsel, Auswahl wird pro Browser gespeichert
+- 📱 **Voll mobilfähig**: responsive Layouts ab ~320 px, 44px-Touch-Targets, kein iOS-Fokus-Zoom (16px-Inputs), Safe-Area-Unterstützung (Notch), `dvh`-Höhen, `touch-action` ohne Doppeltipp-Zoom
+- 📲 **PWA**: installierbar (Android/Desktop: „App installieren“, iOS: „Zum Home-Bildschirm“), Manifest mit Maskable-Icons, App-Shortcuts; Service Worker cached die App-Shell → Startseite funktioniert offline (API-Aufrufe brauchen natürlich Netz)
 - 🔒 Provider-Tokens werden **AES-256-GCM-verschlüsselt** in der SQLite-DB gespeichert
 
 ## Tech Stack
@@ -58,6 +60,13 @@ go run ./cmd/server
 
 Der Go-Server liefert dann das Frontend (`dist/`) **und** die API über einen Port.
 
+### PWA-Hinweise
+
+- Der Service Worker wird nur im Production-Build registriert (`npm run build` + Auslieferung über `STATIC_DIR`), nicht im Vite-Dev-Modus.
+- Die Cache-Version des Service Workers wird pro Build automatisch neu gesetzt (Build-Zeitstempel) — nach einem Deploy holen Clients die neue Version und alte Caches werden geräumt.
+- `/api/*` wird niemals gecached; offline funktioniert die App-Shell (Startseite/Navigation), Kalender- und Buchungsdaten benötigen eine Verbindung.
+- Icons liegen als SVG-Quellen in `frontend/public/icons/` und werden per `rsvg-convert` zu PNGs konvertiert (Neuerzeugung: siehe Skript unten im Abschnitt „Tests“).
+
 ## Kalender-Anbindung einrichten
 
 ### Google
@@ -130,3 +139,13 @@ frontend/
 ```bash
 cd backend && go test ./...   # ICS-Parser, Dauer-Handling, Interval-Clamping
 ```
+
+PWA-Icons neu erzeugen (benötigt `rsvg-convert`):
+
+```bash
+cd frontend/public/icons
+rsvg-convert -w 192 -h 192 -o icon-192.png icon.svg
+rsvg-convert -w 512 -h 512 -o icon-512.png icon.svg
+rsvg-convert -w 512 -h 512 -o icon-maskable-512.png icon-maskable.svg
+rsvg-convert -w 180 -h 180 -o apple-touch-icon.png apple-touch-icon.svg
+```
diff --git a/backend/internal/httpapi/server.go b/backend/internal/httpapi/server.go
index b884008..da9287d 100644
--- a/backend/internal/httpapi/server.go
+++ b/backend/internal/httpapi/server.go
@@ -78,6 +78,9 @@ func (s *Server) Router() http.Handler {
 			static := s.Cfg.StaticDir
 			r.Get("/*", func(w http.ResponseWriter, req *http.Request) {
 				p := filepath.Join(static, filepath.Clean(req.URL.Path))
+				if strings.HasSuffix(p, ".webmanifest") {
+					w.Header().Set("Content-Type", "application/manifest+json")
+				}
 				if st, err := os.Stat(p); err == nil && !st.IsDir() {
 					http.ServeFile(w, req, p)
 					return
diff --git a/frontend/index.html b/frontend/index.html
index 6be70bb..ae46ef2 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -3,8 +3,14 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <meta name="theme-color" content="#05070c" />
+    <link rel="manifest" href="/manifest.webmanifest" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <meta name="apple-mobile-web-app-title" content="WannPassts" />
     <script>
       // Design vor dem ersten Render anwenden (verhindert Flash beim Laden)
       ;(function () {
diff --git a/frontend/public/icons/apple-touch-icon.svg b/frontend/public/icons/apple-touch-icon.svg
new file mode 100644
index 0000000..c74680a
--- /dev/null
+++ b/frontend/public/icons/apple-touch-icon.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#7db0ff"/>
+      <stop offset="1" stop-color="#b78cff"/>
+    </linearGradient>
+  </defs>
+  <!-- Apple Touch Icon: vollflächig, ohne Transparenz (iOS maskiert selbst) -->
+  <rect width="512" height="512" fill="url(#g)"/>
+  <rect x="112" y="132" width="288" height="268" rx="46" fill="#0b0f1a" opacity="0.88"/>
+  <path d="M186 104v52M326 104v52" stroke="#ffffff" stroke-width="26" stroke-linecap="round" opacity="0.95"/>
+  <path d="M118 198h276" stroke="#ffffff" stroke-width="10" stroke-linecap="round" opacity="0.22"/>
+  <path d="M186 272l52 52 92-92" stroke="#ffffff" stroke-width="34" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+</svg>
diff --git a/frontend/public/icons/icon-maskable.svg b/frontend/public/icons/icon-maskable.svg
new file mode 100644
index 0000000..45b5d41
--- /dev/null
+++ b/frontend/public/icons/icon-maskable.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#7db0ff"/>
+      <stop offset="1" stop-color="#b78cff"/>
+    </linearGradient>
+  </defs>
+  <!-- Maskable: Vollflächiger Hintergrund, Glyphe komplett in der 80%-Sicherheitszone -->
+  <rect width="512" height="512" fill="url(#g)"/>
+  <rect x="146" y="166" width="220" height="196" rx="36" fill="#0b0f1a" opacity="0.88"/>
+  <path d="M196 134v46M316 134v46" stroke="#ffffff" stroke-width="22" stroke-linecap="round" opacity="0.95"/>
+  <path d="M190 264l40 40 72-72" stroke="#ffffff" stroke-width="28" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+</svg>
diff --git a/frontend/public/icons/icon.svg b/frontend/public/icons/icon.svg
new file mode 100644
index 0000000..4266960
--- /dev/null
+++ b/frontend/public/icons/icon.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#7db0ff"/>
+      <stop offset="1" stop-color="#b78cff"/>
+    </linearGradient>
+  </defs>
+  <rect width="512" height="512" rx="112" fill="url(#g)"/>
+  <rect x="112" y="132" width="288" height="268" rx="46" fill="#0b0f1a" opacity="0.88"/>
+  <path d="M186 104v52M326 104v52" stroke="#ffffff" stroke-width="26" stroke-linecap="round" opacity="0.95"/>
+  <path d="M118 198h276" stroke="#ffffff" stroke-width="10" stroke-linecap="round" opacity="0.22"/>
+  <path d="M186 272l52 52 92-92" stroke="#ffffff" stroke-width="34" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+</svg>
diff --git a/frontend/public/manifest.webmanifest b/frontend/public/manifest.webmanifest
new file mode 100644
index 0000000..2582265
--- /dev/null
+++ b/frontend/public/manifest.webmanifest
@@ -0,0 +1,22 @@
+{
+  "name": "WannPassts",
+  "short_name": "WannPassts",
+  "description": "Deine freien Zeiten – geteilt per Link. Verbinde Google-, iCloud- und andere Kalender und nimm Buchungsanfragen an, ohne deine Termine preiszugeben.",
+  "lang": "de",
+  "dir": "ltr",
+  "start_url": "/",
+  "scope": "/",
+  "display": "standalone",
+  "orientation": "any",
+  "background_color": "#05070c",
+  "theme_color": "#05070c",
+  "icons": [
+    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
+    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" },
+    { "src": "/icons/icon-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
+  ],
+  "shortcuts": [
+    { "name": "Anfragen", "url": "/app?tab=requests" },
+    { "name": "Kalender", "url": "/app?tab=calendars" }
+  ]
+}
diff --git a/frontend/src/components/SectionConnections.vue b/frontend/src/components/SectionConnections.vue
index 9717f36..a190df4 100644
--- a/frontend/src/components/SectionConnections.vue
+++ b/frontend/src/components/SectionConnections.vue
@@ -232,8 +232,16 @@ function syncedAgo(ts: number | null): string {
 .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
 .form a { color: var(--accent); }
 .conn { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
+.conn .grow { min-width: 0; }
 .conn-icon { font-size: 22px; }
-.err { color: var(--danger); }
+.err { color: var(--danger); overflow-wrap: anywhere; }
+
+@media (max-width: 640px) {
+  .conn { flex-wrap: wrap; }
+  .conn .btn {
+    width: 100%;
+  }
+}
 a { color: var(--accent); text-decoration: none; }
 a:hover { text-decoration: underline; }
 </style>
diff --git a/frontend/src/components/SectionRequests.vue b/frontend/src/components/SectionRequests.vue
index dce4966..c896c4f 100644
--- a/frontend/src/components/SectionRequests.vue
+++ b/frontend/src/components/SectionRequests.vue
@@ -101,4 +101,17 @@ const statusLabel = { pending: 'Offen', accepted: 'Angenommen', declined: 'Abgel
   font-size: 14px;
   white-space: pre-wrap;
 }
+
+@media (max-width: 640px) {
+  .req-head {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .req-actions {
+    justify-content: stretch;
+  }
+  .req-actions .btn {
+    flex: 1;
+  }
+}
 </style>
diff --git a/frontend/src/components/ShareLinkCard.vue b/frontend/src/components/ShareLinkCard.vue
index 3a6639a..04d24cc 100644
--- a/frontend/src/components/ShareLinkCard.vue
+++ b/frontend/src/components/ShareLinkCard.vue
@@ -43,4 +43,13 @@ async function copy() {
   white-space: nowrap;
   color: var(--accent);
 }
+
+@media (max-width: 560px) {
+  .link-row .link {
+    flex-basis: 100%;
+  }
+  .link-row .btn {
+    width: 100%;
+  }
+}
 </style>
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 267915b..5f2c4a0 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -11,3 +11,12 @@ const app = createApp(App)
 app.use(createPinia())
 app.use(router)
 app.mount('#app')
+
+// PWA: Service Worker registrieren (nur im Production-Build; in dev stört er HMR).
+if (import.meta.env.PROD && 'serviceWorker' in navigator) {
+  window.addEventListener('load', () => {
+    navigator.serviceWorker.register('/sw.js').catch(() => {
+      /* PWA offline-fallback nicht verfügbar – App läuft trotzdem */
+    })
+  })
+}
diff --git a/frontend/src/styles/main.css b/frontend/src/styles/main.css
index b1f03eb..a3c4305 100644
--- a/frontend/src/styles/main.css
+++ b/frontend/src/styles/main.css
@@ -70,6 +70,10 @@ html[data-theme='light'] {
   --ok: #0c9e63;
 }
 
+html {
+  -webkit-text-size-adjust: 100%;
+}
+
 * { box-sizing: border-box; }
 
 html, body {
@@ -88,11 +92,22 @@ body {
     linear-gradient(180deg, var(--bg-1), var(--bg-0));
   background-attachment: fixed;
   -webkit-font-smoothing: antialiased;
+  -webkit-tap-highlight-color: transparent;
   letter-spacing: 0.01em;
+  overflow-wrap: break-word;
   transition: color 0.2s ease;
 }
 
-#app { min-height: 100vh; }
+/* dvh berücksichtigt die dynamischen Browser-Leisten auf Mobilgeräten */
+#app {
+  min-height: 100vh;
+  min-height: 100dvh;
+}
+
+/* Doppel-Tap-Zoom auf Steuerflächen unterbinden */
+.btn, .tab, .slot-chip, .day-chip, .tile, .weekday {
+  touch-action: manipulation;
+}
 
 /* Farbliche "Orbs" hinter allem – geben dem Glass etwas zum Brechen */
 .bg-scene { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
@@ -372,5 +387,23 @@ textarea.input { resize: vertical; min-height: 84px; }
 .fade-enter-from, .fade-leave-to { opacity: 0; transform: translateY(6px); }
 
 @media (max-width: 640px) {
-  .page { padding: 16px 14px 64px; }
+  .page {
+    padding: 14px 12px calc(64px + env(safe-area-inset-bottom, 0px));
+  }
+  /* 16px verhindert den automatischen Zoom-Fokus von iOS Safari */
+  .input, select.input, textarea.input {
+    font-size: 16px;
+  }
+  .btn {
+    padding: 12px 18px;
+  }
+  .slot-chip {
+    padding: 14px 0;
+  }
+  .slot-grid {
+    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
+  }
+  .toasts {
+    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
+  }
 }
diff --git a/frontend/src/views/BookingView.vue b/frontend/src/views/BookingView.vue
index d697e8f..3a1adc6 100644
--- a/frontend/src/views/BookingView.vue
+++ b/frontend/src/views/BookingView.vue
@@ -276,8 +276,7 @@ onMounted(async () => {
 </template>
 
 <style scoped>
-.booking { display: flex; flex-direction: column; gap: 16px; max-width: 780px; }
-.state {
+.booking { display: flex; flex-direction: column; gap: 16px; max-width: 780px; }.state {
   margin-top: 18vh;
   padding: 48px 36px;
   display: flex;
@@ -299,7 +298,7 @@ onMounted(async () => {
   box-shadow: 0 14px 44px rgba(70, 224, 165, 0.4);
 }
 .head { padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; }
-.head h1 { margin: 0; font-size: 22px; }
+.head h1 { margin: 0; font-size: 22px; overflow-wrap: anywhere; }
 .legend { display: flex; align-items: center; gap: 8px; color: var(--text-muted); }
 .legend-row { justify-content: space-between; flex-wrap: wrap; }
 .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
@@ -311,4 +310,13 @@ onMounted(async () => {
 .chosen { margin: 0; font-size: 15px; }
 .form { display: flex; flex-direction: column; gap: 14px; }
 .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
+
+@media (max-width: 640px) {
+  .state { margin-top: 8vh; padding: 36px 22px; }
+  .head { padding: 18px 16px; }
+  .head h1 { font-size: 19px; }
+  .block { padding: 16px; }
+  .day-chip { min-width: 64px; }
+  .form button[type='submit'] { width: 100%; }
+}
 </style>
diff --git a/frontend/src/views/DashboardView.vue b/frontend/src/views/DashboardView.vue
index 46df0f7..1615890 100644
--- a/frontend/src/views/DashboardView.vue
+++ b/frontend/src/views/DashboardView.vue
@@ -125,6 +125,8 @@ function logout() {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 10px;
+  flex-wrap: wrap;
   padding: 14px 20px;
 }
 .brand { font-size: 17px; letter-spacing: -0.01em; }
diff --git a/frontend/src/views/LandingView.vue b/frontend/src/views/LandingView.vue
index 0bac6a0..e8116f7 100644
--- a/frontend/src/views/LandingView.vue
+++ b/frontend/src/views/LandingView.vue
@@ -53,6 +53,7 @@ import ThemeToggle from '../components/ThemeToggle.vue'
   gap: 22px;
   justify-content: center;
   min-height: 100vh;
+  min-height: 100dvh;
   padding-top: 6vh;
 }
 
@@ -106,4 +107,10 @@ h1 {
 .foot { text-align: center; }
 
 a.btn { text-decoration: none; display: inline-block; }
+
+@media (max-width: 640px) {
+  .hero { padding: 46px 20px 38px; }
+  .row.center { flex-direction: column; align-items: stretch; }
+  .features { gap: 12px; }
+}
 </style>
diff --git a/frontend/src/views/LoginView.vue b/frontend/src/views/LoginView.vue
index f7d4f35..304de68 100644
--- a/frontend/src/views/LoginView.vue
+++ b/frontend/src/views/LoginView.vue
@@ -65,6 +65,7 @@ async function submit() {
 <style scoped>
 .auth {
   min-height: 100vh;
+  min-height: 100dvh;
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/frontend/src/views/RegisterView.vue b/frontend/src/views/RegisterView.vue
index 912ac7b..c3766b4 100644
--- a/frontend/src/views/RegisterView.vue
+++ b/frontend/src/views/RegisterView.vue
@@ -73,6 +73,7 @@ async function submit() {
 <style scoped>
 .auth {
   min-height: 100vh;
+  min-height: 100dvh;
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 60f37c7..34d538a 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -1,8 +1,95 @@
-import { defineConfig } from 'vite'
+import { defineConfig, type Plugin } from 'vite'
 import vue from '@vitejs/plugin-vue'
 
+// Service Worker als Build-Artefakt: Die Cache-Version ist der Build-Zeitstempel,
+// damit Browser nach jedem Deploy den SW aktualisieren und alte Caches räumen.
+const SW_SOURCE = `
+const VERSION = 'wp-__SW_VERSION__';
+const CACHE_NAME = 'wannpassts-' + VERSION;
+const PRECACHE = [
+  '/',
+  '/manifest.webmanifest',
+  '/favicon.svg',
+  '/icons/icon-192.png',
+  '/icons/icon-512.png',
+  '/icons/icon-maskable-512.png',
+  '/icons/apple-touch-icon.png',
+];
+
+self.addEventListener('install', (event) => {
+  event.waitUntil((async () => {
+    const cache = await caches.open(CACHE_NAME);
+    await cache.addAll(PRECACHE).catch(() => {});
+    await self.skipWaiting();
+  })());
+});
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil((async () => {
+    const keys = await caches.keys();
+    await Promise.all(keys.filter((k) => k !== CACHE_NAME).map((k) => caches.delete(k)));
+    await self.clients.claim();
+  })());
+});
+
+self.addEventListener('fetch', (event) => {
+  const req = event.request;
+  if (req.method !== 'GET') return;
+  const url = new URL(req.url);
+  if (url.origin !== self.location.origin) return;
+  // API-Aufrufe immer live – niemals aus dem Cache bedienen.
+  if (url.pathname.startsWith('/api/')) return;
+
+  // Navigation: Netzwerk zuerst, offline App-Shell aus dem Cache.
+  if (req.mode === 'navigate') {
+    event.respondWith((async () => {
+      try {
+        const res = await fetch(req);
+        const cache = await caches.open(CACHE_NAME);
+        cache.put('/', res.clone());
+        return res;
+      } catch (err) {
+        const cached = (await caches.match(req)) || (await caches.match('/'));
+        if (cached) return cached;
+        return new Response('Offline – bitte Internetverbindung prüfen.', {
+          status: 503,
+          headers: { 'Content-Type': 'text/plain; charset=utf-8' },
+        });
+      }
+    })());
+    return;
+  }
+
+  // Statische Assets: Cache zuerst (gehashte Namen sind unveränderlich).
+  event.respondWith((async () => {
+    const cached = await caches.match(req, { ignoreSearch: true });
+    if (cached) return cached;
+    const res = await fetch(req);
+    if (res.ok) {
+      const cache = await caches.open(CACHE_NAME);
+      cache.put(req, res.clone());
+    }
+    return res;
+  })());
+});
+`
+
+function serviceWorkerPlugin(): Plugin {
+  return {
+    name: 'wannpassts-sw',
+    apply: 'build',
+    generateBundle() {
+      this.emitFile({
+        type: 'asset',
+        fileName: 'sw.js',
+        source: SW_SOURCE.replace('__SW_VERSION__', new Date().toISOString()),
+      })
+    },
+  }
+}
+
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [vue(), serviceWorkerPlugin()],
   server: {
     port: 5173,
     proxy: {