index.html linked only the apple-touch-icon, so browsers fell back to a default favicon. generate-icons now also writes favicon.ico (16/32/48 PNG-in-ICO) and 16/32 px PNG favicons from the v1 logo; index.html links them, and the service worker precaches every icon and favicon so the offline shell keeps them (the glob covers the manifest icons, so the plugin no longer injects them a second time). pwa.test.ts asserts the build ships the favicons at the right sizes, links them from index.html, and precaches each icon exactly once. Task: 7c778111-c615-4437-a3f6-0e36bcb97e63 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
46 lines
1.6 KiB
TypeScript
46 lines
1.6 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',
|
|
// Precache the shell, JS, CSS, the self-hosted fonts and every icon
|
|
// and favicon. The glob already covers the manifest icons, so the
|
|
// plugin does not add them a second time.
|
|
injectManifest: { globPatterns: ['**/*.{html,js,css,woff2,png,ico}'] },
|
|
includeManifestIcons: false,
|
|
// 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'],
|
|
},
|
|
})
|