dev_agentandClaude Opus 5.5
46cc7500de
vite-plugin-pwa runs in injectManifest mode over a minimal src/sw.ts that caches the injected precache list on install. The manifest lives in web/manifest.json (MealQuest, standalone at /, Grape theme over the page background) with 192, 512 and maskable 512 PNG icons and a 180 px apple-touch-icon, all generated from design/logos/logo_v1_2Oct2026.jpg by web/scripts/generate-icons.py. The plugin links the manifest and adds the registerSW.js script only in production builds. src/pwa.test.ts builds and previews the app to assert the shipped manifest, sw.js, icon sizes and registration, and checks that the dev server registers nothing. Maestro task: 58b74786-937a-45a5-850f-7913273beba2 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
41 lines
1.3 KiB
TypeScript
41 lines
1.3 KiB
TypeScript
import { defineConfig } from 'vitest/config'
|
|
import react from '@vitejs/plugin-react'
|
|
import { VitePWA, type ManifestOptions } from 'vite-plugin-pwa'
|
|
import manifest from './manifest.json' with { type: 'json' }
|
|
|
|
const backend = 'http://localhost:8080'
|
|
|
|
export default defineConfig({
|
|
plugins: [
|
|
react(),
|
|
// The plugin writes manifest.webmanifest and sw.js, links the manifest
|
|
// from index.html and adds the registerSW.js script. It does both only
|
|
// in production builds: dev options stay off, so neither `vite` nor
|
|
// Vitest registers a service worker.
|
|
VitePWA({
|
|
strategies: 'injectManifest',
|
|
srcDir: 'src',
|
|
filename: 'sw.ts',
|
|
injectRegister: 'script',
|
|
// The web manifest lives in manifest.json: its theme and background
|
|
// colours are --color-accent and --color-bg from src/styles/tokens.css,
|
|
// and hex colours may not be written in TypeScript.
|
|
manifest: manifest as Partial<ManifestOptions>,
|
|
}),
|
|
],
|
|
server: {
|
|
proxy: {
|
|
'/api': backend,
|
|
'/auth': backend,
|
|
'/media': backend,
|
|
},
|
|
},
|
|
test: {
|
|
environment: 'jsdom',
|
|
// Inject CSS Modules into jsdom so tests can assert the sizes the
|
|
// stylesheets actually declare (for example 44 px hit areas).
|
|
css: true,
|
|
setupFiles: ['./src/test/setup.ts'],
|
|
},
|
|
})
|