Add Progressive Web App functionality

- Add web app manifest for home screen installation
- Implement service worker with offline caching strategy
- Create offline fallback page with auto-reconnect
- Generate PWA icons in multiple sizes (72px-512px)
- Add PWA meta tags and Apple Touch icons to all pages
- Register service worker with graceful degradation
- Update documentation with PWA installation instructions
- Add browserconfig.xml for Windows tile support

Features:
- Installable on mobile and desktop
- Offline functionality with cached resources
- App-like experience in standalone mode
- Automatic updates when online
- Works seamlessly with existing progressive enhancement

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Claude Code 2025-07-06 00:46:00 -04:00
parent 10c6e54062
commit c13b61cd03
21 changed files with 940 additions and 15 deletions

View file

@ -138,8 +138,15 @@ CREATE TABLE locations (
**Profanity Database (`profanity.db`)**:
Managed by the `ProfanityFilter` class for content moderation.
### Frontend (Progressive Enhancement)
The application uses progressive enhancement to work with and without JavaScript:
### Frontend (Progressive Web App + Progressive Enhancement)
The application is a full Progressive Web App with offline capabilities and progressive enhancement:
**PWA Features:**
- **public/manifest.json**: Web app manifest for installation
- **public/sw.js**: Service worker for offline functionality and caching
- **public/icons/**: Complete icon set for all device sizes (72px to 512px)
- **public/offline.html**: Offline fallback page when network is unavailable
- **PWA Meta Tags**: Added to all HTML files for proper app behavior
**JavaScript-Enhanced Experience:**
- **public/app.js**: Main implementation using Leaflet.js
@ -158,6 +165,11 @@ The application uses progressive enhancement to work with and without JavaScript
- **Static map generation**: Auto-fitted Mapbox static images showing all report locations
- **Progressive enhancement**: noscript tags and "Basic View" button for accessibility
**Offline Capabilities:**
- **Service Worker Caching**: Essential files cached for offline access
- **Offline Page**: Custom offline experience with automatic reconnection
- **Install Prompt**: Automatic PWA installation prompts on compatible devices
### API Endpoints
**Public endpoints:**
@ -202,15 +214,17 @@ SCSS files are in `src/scss/`:
### Key Design Patterns
1. **TypeScript-First Architecture**: Full type safety with strict type checking
2. **Progressive Enhancement**: Works completely without JavaScript via server-side rendering
3. **Security-by-Design**: Rate limiting, input validation, and authentication built into core routes
4. **Modular Route Architecture**: Routes accept dependencies as parameters for testability
5. **Dual Database Design**: Separate databases for application data and content moderation
6. **Type-Safe Database Operations**: All database interactions use typed models
7. **Comprehensive Testing**: 125+ tests covering units, integration, and security scenarios
8. **Graceful Degradation**: Fallback geocoding providers and error handling
9. **Automated Maintenance**: Cron-based cleanup of expired reports
10. **Accessibility-First**: noscript fallbacks and server-side static map generation
2. **Progressive Web App**: Installable, offline-capable with service worker caching
3. **Progressive Enhancement**: Works completely without JavaScript via server-side rendering
4. **Security-by-Design**: Rate limiting, input validation, and authentication built into core routes
5. **Modular Route Architecture**: Routes accept dependencies as parameters for testability
6. **Dual Database Design**: Separate databases for application data and content moderation
7. **Type-Safe Database Operations**: All database interactions use typed models
8. **Comprehensive Testing**: 125+ tests covering units, integration, and security scenarios
9. **Graceful Degradation**: Fallback geocoding providers and error handling
10. **Automated Maintenance**: Cron-based cleanup of expired reports
11. **Accessibility-First**: noscript fallbacks and server-side static map generation
12. **Offline-First Design**: Service worker caching with automatic updates
### Deployment
- Automated deployment script for Debian 12 ARM64 in `scripts/deploy.sh`