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:
@@ -36,6 +36,7 @@ const appRoot = async () => {
|
||||
const { RouterProvider } = await import('react-router-dom');
|
||||
const { router } = await import('./router');
|
||||
const { ToastProvider } = await import('./components/ToastHost');
|
||||
const { default: PwaManager } = await import('./components/PwaManager');
|
||||
const { LocaleProvider } = await import('./i18n/LocaleContext');
|
||||
const { default: MatomoTracker } = await import('@/components/analytics/MatomoTracker');
|
||||
const rawMatomo = (window as any).__MATOMO_GUEST__ as { enabled?: boolean; url?: string; siteId?: string } | undefined;
|
||||
@@ -47,21 +48,6 @@ const appRoot = async () => {
|
||||
}
|
||||
: undefined;
|
||||
|
||||
// Register a minimal service worker for background sync (best-effort)
|
||||
if ('serviceWorker' in navigator) {
|
||||
navigator.serviceWorker.register('/guest-sw.js').catch(() => {});
|
||||
navigator.serviceWorker.addEventListener('message', (evt) => {
|
||||
if (evt.data?.type === 'sync-queue') {
|
||||
import('./queue/queue').then((m) => m.processQueue().catch(() => {}));
|
||||
}
|
||||
});
|
||||
// Also attempt to process queue on load and when going online
|
||||
import('./queue/queue').then((m) => m.processQueue().catch(() => {}));
|
||||
window.addEventListener('online', () => {
|
||||
import('./queue/queue').then((m) => m.processQueue().catch(() => {}));
|
||||
});
|
||||
}
|
||||
|
||||
createRoot(rootEl).render(
|
||||
<Sentry.ErrorBoundary fallback={<GuestFallback message="Erlebnisse können nicht geladen werden." />}>
|
||||
<React.StrictMode>
|
||||
@@ -69,6 +55,7 @@ const appRoot = async () => {
|
||||
<LocaleProvider>
|
||||
<ToastProvider>
|
||||
<MatomoTracker config={matomoConfig} />
|
||||
<PwaManager />
|
||||
<Suspense fallback={<GuestFallback message="Erlebnisse werden geladen …" />}>
|
||||
<RouterProvider router={router} />
|
||||
</Suspense>
|
||||
|
||||
Reference in New Issue
Block a user