- 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
49 lines
1.7 KiB
TypeScript
49 lines
1.7 KiB
TypeScript
import { defineConfig } from 'vite'
|
|
import react from '@vitejs/plugin-react'
|
|
import { VitePWA } from 'vite-plugin-pwa'
|
|
|
|
export default defineConfig({
|
|
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',
|
|
'/api': 'http://localhost:3000',
|
|
'/callback': 'http://localhost:3000',
|
|
},
|
|
},
|
|
})
|