feat(03-07): VitePWA manifest + auth-safe SW denylist + iOS head/icons

- Add VitePWA plugin to vite.config.ts with registerType:autoUpdate - navigateFallbackDenylist excludes /callback, /api/, /health (T-03-20 Gate 2) - runtimeCaching: [] — no API response caching (T-03-21) - Manifest: name/short_name FamilySync, display:standalone, scope:/, theme_color #4A90D9 - Icons: 192x192, 512x512, 512x512 maskable in manifest - Generate icon-192.png (192x192), icon-512.png (512x512), apple-touch-icon.png (180x180) - Add five iOS head entries: apple-touch-icon link, apple-mobile-web-app-capable/status-bar-style/title - Build verified: dist/manifest.webmanifest emitted with correct fields; SW + workbox emitted
2026-06-05 18:02:56 -04:00
parent 7398946aa8
commit bd8283774d
5 changed files with 40 additions and 1 deletions
@@ -4,6 +4,10 @@
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="theme-color" content="#4A90D9" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
+    <meta name="apple-mobile-web-app-title" content="FamilySync" />
    <title>FamilySync</title>
  </head>
  <body>
@@ -1,8 +1,43 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import { VitePWA } from 'vite-plugin-pwa'

 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react(),
+    VitePWA({
+      registerType: 'autoUpdate',
+      // ⚠️ CRITICAL: exclude /callback from SW navigation handling (Gate 2 — T-03-20)
+      // The OIDC authorization-code exchange lands on /callback — if the SW
+      // intercepts this as a navigation, it serves the cached shell instead of
+      // letting the server process the authorization code exchange (login loop).
+      workbox: {
+        navigateFallback: '/index.html',
+        navigateFallbackDenylist: [
+          /^\/callback/, // OIDC redirect endpoint — must reach the server
+          /^\/api\//, // API calls — never serve from cache
+          /^\/health/, // Health endpoint
+        ],
+        // No /api caching — runtimeCaching: [] means all API calls fall through to network
+        runtimeCaching: [],
+      },
+      manifest: {
+        name: 'FamilySync',
+        short_name: 'FamilySync',
+        description: 'Family calendar and lists',
+        theme_color: '#4A90D9',
+        background_color: '#ffffff',
+        display: 'standalone',
+        scope: '/',
+        start_url: '/',
+        icons: [
+          { src: '/icon-192.png', sizes: '192x192', type: 'image/png' },
+          { src: '/icon-512.png', sizes: '512x512', type: 'image/png' },
+          { src: '/icon-512.png', sizes: '512x512', type: 'image/png', purpose: 'maskable' },
+        ],
+      },
+    }),
+  ],
  server: {
    proxy: {
      '/health': 'http://localhost:3000',