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:
parent
10c6e54062
commit
c13b61cd03
21 changed files with 940 additions and 15 deletions
36
CLAUDE.md
36
CLAUDE.md
|
@ -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`
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue