App Layout Component

The App Layout component (src/app/layout.tsx) serves as the root layout for the Next.js application, providing essential infrastructure and PWA capabilities.

Overview

This component wraps the entire application and manages:

  • Progressive Web App (PWA) features
  • Global styles and providers
  • Session management
  • Firebase initialization
  • Offline detection
  • UI toast notifications

Key Features

Progressive Web App Support

The layout automatically registers a service worker and includes comprehensive PWA meta tags:

useEffect(() => {
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker
      .register('/sw.js')
      .then((registration) => {
        console.log('Service Worker registered with scope:', registration.scope);
      })
      .catch((error) => {
        console.error('Service Worker registration failed:', error);
      });
  }
}, []);

Mobile App Configuration

Includes iOS-specific PWA tags:

  • App capability settings
  • Status bar styling
  • Custom app title
  • App icons for different sizes
  • Splash screen configurations

Global Provider Setup

The layout wraps the application with essential providers:

  • AlertDialogProvider - Global alert dialog management
  • SessionTimeout - Automatic session timeout handling (15 minutes with 1 minute warning)
  • FirebaseInit - Firebase services initialization
  • OfflineNotification - Network status monitoring
  • Toaster - Global toast notifications

Implementation Example

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <head>
        <link rel="manifest" href="/manifest.json" />
        <meta name="theme-color" content="#FF8C00" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        {/* Additional PWA meta tags */}
      </head>
      <body className="font-sans bg-background min-h-screen">
        <AlertDialogProvider>
          <SessionTimeout timeoutMinutes={15} warningMinutes={1} />
          <FirebaseInit />
          {children}
          <OfflineNotification />
          <Toaster />
        </AlertDialogProvider>
      </body>
    </html>
  )
}

Dependencies

  • @/components/ui/toaster - Toast notification system
  • @/components/hooks/use-alert-dialog - Alert dialog provider
  • @/components/FirebaseInit - Firebase initialization
  • @/components/SessionTimeout - Session management
  • @/components/OfflineNotification - Network status monitoring

Configuration

Session Timeout

  • Timeout: 15 minutes of inactivity
  • Warning: 1 minute before timeout
  • Automatic logout on timeout

PWA Settings

  • Theme color: #FF8C00
  • Service worker: /sw.js
  • Manifest: /manifest.json
  • iOS app capability: Enabled

Browser Support

The component includes fallbacks and progressive enhancement for:

  • Service Worker API
  • PWA manifest support
  • iOS Safari app mode
  • Various screen sizes and device types

Usage Notes

This component is automatically used by Next.js as the root layout. No manual implementation is required - it wraps all pages in the application automatically.

The layout ensures consistent styling, proper PWA behavior, and global state management across the entire application.