feat: Complete PWA implementation with offline support and install prompts

PWA Features Implemented:
✅ Offline Fallback Page (/offline)
  - User-friendly offline page with connection status
  - Auto-redirect when back online
  - Lists available offline features
  - Retry and home navigation buttons

✅ Install Prompt UI (InstallPrompt component)
  - beforeinstallprompt event handler for Android/Desktop
  - iOS-specific install instructions with Share icon
  - Smart dismissal with 7-day cooldown
  - Already-installed detection

✅ Background Sync for Pending Actions
  - useBackgroundSync hook with multiple sync triggers
  - Periodic sync every 5 minutes when online
  - Sync on tab visibility change
  - Service Worker sync registration
  - BackgroundSyncProvider integration

✅ next-pwa Configuration Updates
  - Offline fallback to /offline page
  - Network timeout (10s) for better offline detection
  - skipWaiting and clientsClaim enabled
  - Runtime caching with NetworkFirst strategy

Files Created:
- app/offline/page.tsx (131 lines)
- components/pwa/InstallPrompt.tsx (164 lines)
- hooks/useBackgroundSync.ts (71 lines)
- components/providers/BackgroundSyncProvider.tsx (10 lines)

Files Modified:
- app/layout.tsx (added InstallPrompt and BackgroundSyncProvider)
- next.config.mjs (offline fallback + workbox options)

Total: 376 new lines across 4 new files + 2 modified files

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

maternal-web/app/layout.tsx

@@ -8,6 +8,8 @@ import { AxeProvider } from '@/components/providers/AxeProvider';
 import { SkipNavigation } from '@/components/common/SkipNavigation';
 import { VoiceFloatingButton } from '@/components/voice/VoiceFloatingButton';
 import { FocusManagementProvider } from '@/components/providers/FocusManagementProvider';
+import { BackgroundSyncProvider } from '@/components/providers/BackgroundSyncProvider';
+import { InstallPrompt } from '@/components/pwa/InstallPrompt';
 // import { PerformanceMonitor } from '@/components/common/PerformanceMonitor'; // Temporarily disabled
 import './globals.css';
 
@@ -48,16 +50,19 @@ export default function RootLayout({
           <ErrorBoundary>
             <ReduxProvider>
               <ApolloProvider>
-                <ThemeRegistry>
-                  <FocusManagementProvider>
-                    <SkipNavigation />
-                    {/* <PerformanceMonitor /> */}
-                    <main id="main-content" tabIndex={-1}>
-                      {children}
-                    </main>
-                    <VoiceFloatingButton />
-                  </FocusManagementProvider>
-                </ThemeRegistry>
+                <BackgroundSyncProvider>
+                  <ThemeRegistry>
+                    <FocusManagementProvider>
+                      <SkipNavigation />
+                      {/* <PerformanceMonitor /> */}
+                      <main id="main-content" tabIndex={-1}>
+                        {children}
+                      </main>
+                      <VoiceFloatingButton />
+                      <InstallPrompt />
+                    </FocusManagementProvider>
+                  </ThemeRegistry>
+                </BackgroundSyncProvider>
               </ApolloProvider>
             </ReduxProvider>
           </ErrorBoundary>