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
24
README.md
24
README.md
|
@ -6,6 +6,7 @@ A community-driven web application for tracking winter road conditions and icy h
|
|||
|
||||
- 🗺️ **Interactive Map** - Real-time location tracking centered on Grand Rapids
|
||||
- ⚡ **Fast Geocoding** - Lightning-fast address lookup with Mapbox API
|
||||
- 📱 **Progressive Web App** - Install on mobile home screen, works offline
|
||||
- 🚫 **JavaScript-Free Mode** - Complete functionality without JavaScript via server-side rendering
|
||||
- 🖼️ **Static Maps** - Auto-generated Mapbox static images for non-JS users
|
||||
- 🔄 **Auto-Expiration** - Reports automatically removed after 48 hours
|
||||
|
@ -172,10 +173,31 @@ See `docs/deployment.md` for detailed manual deployment instructions.
|
|||
### API Documentation
|
||||
Interactive API documentation available at `/api-docs` when running the server.
|
||||
|
||||
## PWA Installation
|
||||
|
||||
### Mobile Devices
|
||||
1. Open the app in your mobile browser
|
||||
2. Look for the "Add to Home Screen" prompt
|
||||
3. Tap "Add" to install the app on your home screen
|
||||
4. The app will work offline and behave like a native app
|
||||
|
||||
### Desktop Browsers
|
||||
1. Visit the app in Chrome, Edge, or Safari
|
||||
2. Look for the install icon in the address bar
|
||||
3. Click "Install" to add the app to your desktop
|
||||
4. Launch from your applications folder or start menu
|
||||
|
||||
### PWA Features
|
||||
- **Offline Access:** View cached reports when disconnected
|
||||
- **App-like Experience:** Standalone window, no browser UI
|
||||
- **Home Screen Icon:** Quick access like native apps
|
||||
- **Automatic Updates:** Always stay current when online
|
||||
|
||||
## Technology Stack
|
||||
|
||||
- **Backend:** Node.js, Express.js, SQLite, TypeScript
|
||||
- **Frontend:** Progressive Enhancement (Vanilla JavaScript + Server-side rendering)
|
||||
- **Frontend:** Progressive Web App with Progressive Enhancement
|
||||
- **PWA:** Installable, offline-capable, service worker caching
|
||||
- **Enhanced:** Leaflet.js interactive maps with real-time updates
|
||||
- **Fallback:** Server-side HTML tables with static Mapbox images
|
||||
- **Geocoding:** Mapbox API (with Nominatim fallback)
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue