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',