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.

resources/js/guest/router.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import { Button } from '@/components/ui/button';
-import { createBrowserRouter, Outlet, useParams, Link, Navigate } from 'react-router-dom';
+import { createBrowserRouter, useParams, Link, Navigate } from 'react-router-dom';
 import Header from './components/Header';
 import BottomNav from './components/BottomNav';
+import RouteTransition from './components/RouteTransition';
 import { useEventData } from './hooks/useEventData';
 import { AlertTriangle, Loader2 } from 'lucide-react';
 import { EventStatsProvider } from './context/EventStatsContext';
@@ -44,7 +45,7 @@ function HomeLayout() {
       <div className="pb-16">
         <Header title="Event" />
         <div className="px-4 py-3">
-          <Outlet />
+          <RouteTransition />
         </div>
         <BottomNav />
       </div>
@@ -123,7 +124,7 @@ function EventBoundary({ token }: { token: string }) {
             <div className="pb-16">
               <Header eventToken={token} />
               <div className="px-4 py-3">
-                <Outlet />
+                <RouteTransition />
               </div>
               <BottomNav />
             </div>
@@ -164,7 +165,7 @@ function SetupLayout() {
             <NotificationCenterProvider eventToken={token}>
               <div className="pb-0">
                 <Header eventToken={token} />
-                <Outlet />
+                <RouteTransition />
               </div>
             </NotificationCenterProvider>
           </EventStatsProvider>
@@ -325,7 +326,7 @@ function SimpleLayout({ title, children }: { title: string; children: React.Reac
       <div className="pb-16">
         <Header title={title} />
         <div className="px-4 py-3">
-          {children}
+          <RouteTransition>{children}</RouteTransition>
         </div>
         <BottomNav />
       </div>