Implemented guest-only PWA using vite-plugin-pwa (the actual published package; @vite-pwa/plugin isn’t on npm) with
injectManifest, a new typed SW source, runtime caching, and a non‑blocking update toast with an action button. The
guest shell now links a dedicated manifest and theme color, and background upload sync is managed in a single
PwaManager component.
Key changes (where/why)
- vite.config.ts: added VitePWA injectManifest config, guest manifest, and output to /public so the SW can control /
scope.
- resources/js/guest/guest-sw.ts: new Workbox SW (precache + runtime caching for guest navigation, GET /api/v1/*,
images, fonts) and preserves push/sync/notification logic.
- resources/js/guest/components/PwaManager.tsx: registers SW, shows update/offline toasts, and processes the upload
queue on sync/online.
- resources/js/guest/components/ToastHost.tsx: action-capable toasts so update prompts can include a CTA.
- resources/js/guest/i18n/messages.ts: added common.updateAvailable, common.updateAction, common.offlineReady.
- resources/views/guest.blade.php: manifest + theme color + apple touch icon.
- .gitignore: ignore generated public/guest-sw.js and public/guest.webmanifest; public/guest-sw.js removed since it’s
now build output.
This commit is contained in:
@@ -6,6 +6,7 @@ import { defineConfig, type PluginOption } from 'vite';
|
||||
import path from 'path';
|
||||
import { tamaguiPlugin } from '@tamagui/vite-plugin';
|
||||
import { sentryVitePlugin } from '@sentry/vite-plugin';
|
||||
import { VitePWA } from 'vite-plugin-pwa';
|
||||
|
||||
const devServerHost = process.env.VITE_DEV_SERVER_HOST ?? 'fotospiel-app.test';
|
||||
const devServerPort = Number.parseInt(process.env.VITE_DEV_SERVER_PORT ?? '5173', 10);
|
||||
@@ -36,6 +37,63 @@ const plugins: PluginOption[] = [
|
||||
wayfinder({
|
||||
formVariants: true,
|
||||
}),
|
||||
VitePWA({
|
||||
strategies: 'injectManifest',
|
||||
srcDir: 'resources/js/guest',
|
||||
filename: 'guest-sw.ts',
|
||||
manifestFilename: 'guest.webmanifest',
|
||||
outDir: 'public',
|
||||
injectRegister: null,
|
||||
registerType: 'prompt',
|
||||
includeAssets: [
|
||||
'favicon.ico',
|
||||
'favicon.svg',
|
||||
'apple-touch-icon.png',
|
||||
'logo-transparent-md.png',
|
||||
'logo-transparent-lg.png',
|
||||
],
|
||||
injectManifest: {
|
||||
globDirectory: 'public/build',
|
||||
globPatterns: ['**/*.{js,css,woff,woff2,svg,png,webp,ico,txt}'],
|
||||
},
|
||||
manifest: {
|
||||
name: 'Fotospiel',
|
||||
short_name: 'Fotospiel',
|
||||
id: '/event',
|
||||
start_url: '/event',
|
||||
scope: '/',
|
||||
display: 'standalone',
|
||||
lang: 'de-DE',
|
||||
description: 'Offline-fähige Event-Galerie für Gäste – Fotos aufnehmen, Aufgaben lösen und teilen.',
|
||||
background_color: '#0f172a',
|
||||
theme_color: '#ec4899',
|
||||
orientation: 'portrait',
|
||||
categories: ['photo-video', 'social'],
|
||||
icons: [
|
||||
{
|
||||
src: '/favicon.svg',
|
||||
sizes: 'any',
|
||||
type: 'image/svg+xml',
|
||||
purpose: 'any',
|
||||
},
|
||||
{
|
||||
src: '/apple-touch-icon.png',
|
||||
sizes: '166x169',
|
||||
type: 'image/png',
|
||||
purpose: 'any',
|
||||
},
|
||||
{
|
||||
src: '/logo-transparent-lg.png',
|
||||
sizes: '698x684',
|
||||
type: 'image/png',
|
||||
purpose: 'any',
|
||||
},
|
||||
],
|
||||
},
|
||||
devOptions: {
|
||||
enabled: false,
|
||||
},
|
||||
}),
|
||||
tamaguiPlugin({
|
||||
config: './tamagui.config.ts',
|
||||
components: ['@tamagui/core', '@tamagui/stacks', '@tamagui/text', '@tamagui/button'],
|
||||
|
||||
Reference in New Issue
Block a user