A standardized template for creating Progressive Web App (PWA) projects in the charBuildSuperapp with an optimized mobile-first design.

• PWA Ready: Full installation support with proper meta tags
• Mobile Optimized: Clean design with proper notch/safe area handling
• Offline Capable: Service worker integration for offline functionality
• Client-side Navigation: Smooth transitions without page refreshes
• Auth Integration: Support for login/logout functionality
• Responsive UI: Works well on all device sizes
• Standardized Header: Consistent header with centered project title
• Back Navigation: Easy navigation with icon-based back button
• Debug Panel: Built-in debug panel for development

• Full-width layout that maximizes screen real estate
• Fixed header with centered app title and compact login/logout
• iPhone notch/safe area compatibility with viewport-fit=cover
• Subheader navigation for consistent back navigation
• CSS variables for easy theming
• Properly spaced content sections
• Mobile-optimized typography and spacing

1. Copy the pwaTemplate folder to create a new project
2. Rename the folder to your project name
3. Update the project entry in project_list.js
4. Update the app title in the header
5. Customize the content and styles as needed

• Manifest: Custom manifest.json endpoint for proper installation
• Service Worker: Registration for offline capabilities
• Meta Tags: Full set of iOS and Android installation tags
• Navigation: History API integration for seamless transitions
• Safe Areas: Proper handling of notches and safe areas

• Header: Fixed header with centered title and navigation icons
• Subheader: Consistent navigation with back button
• Content: Properly spaced content with sections
• Buttons: Styled action buttons
• Debug Panel: Expandable debug panel for development
• Installation Guide: Built-in PWA installation instructions

• Keep UI elements within the safe center area
• Use the standard navigation pattern for consistency
• Add debug logs for important state changes
• Test on both iOS and Android devices
• Ensure all interactive elements have proper touch targets (at least 44×44px)