fix: scope PWA service workers to prevent cross-app interference

When multiple SPAs share the same origin (e.g., /sortir/ and /castle/
on demo.aiolabs.dev), their service workers conflict. Each app's
workbox now scopes its navigateFallback with navigateFallbackAllowlist,
and the main app excludes standalone paths via navigateFallbackDenylist.

- Main app: denylist /sortir/ and /castle/ from its service worker
- Sortir: allowlist only /sortir/ paths, fallback to activities.html
- Castle: allowlist only /castle/ paths, fallback to castle.html
- Icon paths use relative URLs (work with any base path)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Padreug 2026-04-27 19:48:45 +02:00
commit 7181b55d52
3 changed files with 21 additions and 10 deletions

View file

@ -51,6 +51,11 @@ export default defineConfig(({ mode }) => ({
},
workbox: {
globPatterns: ['**/*.{js,css,html,ico,png,svg}'],
// Scope the service worker to only handle requests within this app's path
navigateFallback: 'activities.html',
navigateFallbackAllowlist: [
new RegExp(`^${(process.env.VITE_BASE_PATH || '/').replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}`),
],
},
includeAssets: [
'favicon.ico',
@ -75,10 +80,10 @@ export default defineConfig(({ mode }) => ({
categories: ['social', 'entertainment', 'lifestyle'],
lang: 'fr',
icons: [
{ src: '/icon-192.png', sizes: '192x192', type: 'image/png', purpose: 'any' },
{ src: '/icon-512.png', sizes: '512x512', type: 'image/png', purpose: 'any' },
{ src: '/icon-maskable-192.png', sizes: '192x192', type: 'image/png', purpose: 'maskable' },
{ src: '/icon-maskable-512.png', sizes: '512x512', type: 'image/png', purpose: 'maskable' },
{ src: 'icon-192.png', sizes: '192x192', type: 'image/png', purpose: 'any' },
{ src: 'icon-512.png', sizes: '512x512', type: 'image/png', purpose: 'any' },
{ src: 'icon-maskable-192.png', sizes: '192x192', type: 'image/png', purpose: 'maskable' },
{ src: 'icon-maskable-512.png', sizes: '512x512', type: 'image/png', purpose: 'maskable' },
],
},
}),

View file

@ -51,6 +51,10 @@ export default defineConfig(({ mode }) => ({
},
workbox: {
globPatterns: ['**/*.{js,css,html,ico,png,svg}'],
navigateFallback: 'castle.html',
navigateFallbackAllowlist: [
new RegExp(`^${(process.env.VITE_BASE_PATH || '/').replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}`),
],
},
includeAssets: [
'favicon.ico',
@ -70,15 +74,15 @@ export default defineConfig(({ mode }) => ({
display: 'standalone',
orientation: 'portrait-primary',
start_url: process.env.VITE_BASE_PATH || '/',
scope: '/',
scope: process.env.VITE_BASE_PATH || '/',
id: 'castle-accounting',
categories: ['finance', 'business', 'productivity'],
lang: 'en',
icons: [
{ src: '/icon-192.png', sizes: '192x192', type: 'image/png', purpose: 'any' },
{ src: '/icon-512.png', sizes: '512x512', type: 'image/png', purpose: 'any' },
{ src: '/icon-maskable-192.png', sizes: '192x192', type: 'image/png', purpose: 'maskable' },
{ src: '/icon-maskable-512.png', sizes: '512x512', type: 'image/png', purpose: 'maskable' },
{ src: 'icon-192.png', sizes: '192x192', type: 'image/png', purpose: 'any' },
{ src: 'icon-512.png', sizes: '512x512', type: 'image/png', purpose: 'any' },
{ src: 'icon-maskable-192.png', sizes: '192x192', type: 'image/png', purpose: 'maskable' },
{ src: 'icon-maskable-512.png', sizes: '512x512', type: 'image/png', purpose: 'maskable' },
],
},
}),

View file

@ -23,7 +23,9 @@ export default defineConfig(({ mode }) => ({
workbox: {
globPatterns: [
'**/*.{js,css,html,ico,png,svg}'
]
],
// Don't intercept standalone app paths — they have their own service workers
navigateFallbackDenylist: [/^\/sortir\//, /^\/castle\//],
},
includeAssets: [
'favicon.ico',