Private
Public Access
ksmithandClaude Sonnet 5
e9ad5d832b
The service worker already auto-updates in the background (registerType: 'autoUpdate' + an unconditional self.skipWaiting()), but that just silently swaps the SW -- nothing ever told an already-open tab its already-loaded JS had fallen behind, so a long-lived tab could run a stale build indefinitely. Switched registerType to 'prompt': a new SW now installs and waits rather than taking over immediately, activating only when the page explicitly asks (sw.ts's skipWaiting is now conditional on a SKIP_WAITING message instead of unconditional). UpdateBanner.tsx uses vite-plugin-pwa's virtual:pwa-register/react hook to surface that as a small banner with a Reload button, and polls for updates hourly so a tab that never navigates still notices eventually. Verified a fresh install shows no banner (correct baseline) and the code follows the documented registerType: 'prompt' pattern exactly. Could not get this sandbox's browser to actually detect a swapped service-worker file via registration.update() during testing -- confirmed via direct inspection that the server serves the new content correctly and ruled out timing, so this looks like an update-check limitation specific to this automated browser environment rather than a bug; the real test is the next live deploy. Also adds a "frontend-preview" launch.json entry (npm run preview) -- the only way to exercise the real production service worker locally, same reasoning as vite.config.ts's existing `preview.proxy` section. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
79 lines
2.6 KiB
TypeScript
79 lines
2.6 KiB
TypeScript
import { defineConfig } from 'vite'
|
|
import react from '@vitejs/plugin-react'
|
|
import { VitePWA } from 'vite-plugin-pwa'
|
|
|
|
// https://vite.dev/config/
|
|
export default defineConfig({
|
|
plugins: [
|
|
react(),
|
|
VitePWA({
|
|
// generateSW (Phase 3) can't add custom event listeners, and push /
|
|
// notificationclick need exactly that -- injectManifest means we hand-
|
|
// write the service worker (src/sw.ts); its runtime-caching routes are
|
|
// registered there directly instead of via the `workbox` option below
|
|
// (which only applies to generateSW).
|
|
strategies: 'injectManifest',
|
|
srcDir: 'src',
|
|
filename: 'sw.ts',
|
|
injectManifest: {
|
|
// Workbox's default globPatterns exclude the manifest's own output
|
|
// dir, which is fine, but be explicit about what the app shell
|
|
// precache should contain.
|
|
globPatterns: ['**/*.{js,css,html,ico,png,svg,webmanifest}'],
|
|
},
|
|
// 'autoUpdate' silently activates a new service worker (and its
|
|
// stale-relative-to-the-new-JS already-loaded page) with nothing
|
|
// telling the user their currently-open tab has fallen behind --
|
|
// 'prompt' leaves activation to an explicit updateServiceWorker()
|
|
// call (UpdateBanner.tsx), so the user gets a "reload for the latest
|
|
// version" banner instead of silently running old code indefinitely.
|
|
registerType: 'prompt',
|
|
manifest: {
|
|
name: 'DS Chat',
|
|
short_name: 'DS Chat',
|
|
start_url: '/',
|
|
display: 'standalone',
|
|
background_color: '#07080f', // --ds-void
|
|
theme_color: '#101030', // --ds-surface
|
|
icons: [
|
|
{ src: '/icons/icon-192.png', sizes: '192x192', type: 'image/png' },
|
|
{ src: '/icons/icon-512.png', sizes: '512x512', type: 'image/png' },
|
|
{
|
|
src: '/icons/icon-512-maskable.png',
|
|
sizes: '512x512',
|
|
type: 'image/png',
|
|
purpose: 'maskable',
|
|
},
|
|
],
|
|
},
|
|
}),
|
|
],
|
|
server: {
|
|
proxy: {
|
|
'/api': {
|
|
target: 'http://localhost:8000',
|
|
changeOrigin: true,
|
|
},
|
|
'/ws': {
|
|
target: 'ws://localhost:8000',
|
|
ws: true,
|
|
},
|
|
},
|
|
},
|
|
// `vite preview` doesn't inherit `server.proxy` -- needed to exercise the
|
|
// real production service worker (only registered against a built
|
|
// bundle, not `vite dev`) against the actual backend.
|
|
preview: {
|
|
proxy: {
|
|
'/api': {
|
|
target: 'http://localhost:8000',
|
|
changeOrigin: true,
|
|
},
|
|
'/ws': {
|
|
target: 'ws://localhost:8000',
|
|
ws: true,
|
|
},
|
|
},
|
|
},
|
|
})
|