Skip to content

Commit eff3b27

Browse files
Gagandeep-2003Gagandeep-2003
authored
Merge pull request Gagandeep-2003#47 from zoxilsi/main
- Adds Progressive Web App (PWA) support, allowing users to install the app on mobile and desktop devices. - Includes manifest, service worker, offline page, icons, and a new Streamlit entry point for PWA. - Updates requirements.txt and README.md for new features. - Fixes issue Gagandeep-2003#35.
2 parents 8f570de + 784ae32 commit eff3b27

21 files changed

+1462
-5
lines changed

‎DEPLOYMENT.md‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
# 🚀 PWA Deployment Guide
2+
3+
## Quick Start
4+
5+
1. **Install Dependencies**
6+
```bash
7+
pip install -r requirements.txt
8+
```
9+
10+
2. **Launch PWA-Enhanced App**
11+
```bash
12+
cd streamlit_app
13+
streamlit run streamlit_app_pwa.py
14+
```
15+
16+
3. **Access the App**
17+
- Local: http://localhost:8501
18+
- Network: Your local IP on port 8501
19+
20+
## 🌐 Production Deployment
21+
22+
### Option 1: Streamlit Cloud (Recommended)
23+
1. Push your code to GitHub
24+
2. Go to [share.streamlit.io](https://share.streamlit.io)
25+
3. Connect your GitHub repo
26+
4. Select `streamlit_app/streamlit_app_pwa.py` as main file
27+
5. Deploy - PWA features will work with HTTPS
28+
29+
### Option 2: Heroku
30+
```bash
31+
# Create Procfile
32+
echo "web: streamlit run streamlit_app/streamlit_app_pwa.py --server.port $PORT" > Procfile
33+
34+
# Deploy to Heroku
35+
heroku create your-app-name
36+
git push heroku main
37+
```
38+
39+
### Option 3: Docker
40+
```dockerfile
41+
FROM python:3.9-slim
42+
43+
WORKDIR /app
44+
COPY requirements.txt .
45+
RUN pip install -r requirements.txt
46+
47+
COPY . .
48+
EXPOSE 8501
49+
50+
CMD ["streamlit", "run", "streamlit_app/streamlit_app_pwa.py", "--server.address", "0.0.0.0"]
51+
```
52+
53+
## 📱 Testing PWA Installation
54+
55+
### Desktop Testing
56+
1. Open Chrome/Edge
57+
2. Navigate to your deployed app (HTTPS required)
58+
3. Look for install icon in address bar
59+
4. Click "Install" and test offline functionality
60+
61+
### Mobile Testing
62+
1. Open in Chrome (Android) or Safari (iOS)
63+
2. Add to Home Screen
64+
3. Launch from home screen
65+
4. Test app-like behavior
66+
67+
## 🔧 Customization Options
68+
69+
### Modify App Theme
70+
Edit `manifest.json`:
71+
```json
72+
{
73+
"theme_color": "#your-color",
74+
"background_color": "#your-bg-color"
75+
}
76+
```
77+
78+
### Update App Icons
79+
1. Replace icons in `/icons/` folder
80+
2. Or regenerate: `python3 generate_icons.py`
81+
82+
### Configure Caching
83+
Edit `sw.js` to modify cache strategy:
84+
```javascript
85+
const urlsToCache = [
86+
'/',
87+
'/your-additional-assets'
88+
];
89+
```
90+
91+
## 🎯 PWA Best Practices
92+
93+
- ✅ Use HTTPS in production
94+
- ✅ Optimize icon sizes (under 1MB total)
95+
- ✅ Test on multiple devices
96+
- ✅ Implement proper error handling
97+
- ✅ Keep offline page informative
98+
99+
## 📊 PWA Analytics
100+
101+
Track PWA performance:
102+
- Installation rates
103+
- Offline usage patterns
104+
- User engagement metrics
105+
- Performance improvements
106+
107+
---
108+
109+
**Your PWA is ready! 🎉**
110+
111+
Users can now install your drowsiness detection app like a native application on any device.

‎PWA_IMPLEMENTATION.md‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
# 📱 PWA Implementation Summary
2+
3+
## ✨ What's Been Added
4+
5+
This pull request adds comprehensive Progressive Web App (PWA) support to the Driver Drowsiness Detection System, enabling users to install and use the application like a native mobile or desktop app.
6+
7+
## 🗂️ New Files Created
8+
9+
### Core PWA Files
10+
- **`streamlit_app/manifest.json`** - PWA manifest defining app metadata, icons, and display settings
11+
- **`streamlit_app/sw.js`** - Service worker for caching, offline support, and background sync
12+
- **`streamlit_app/offline.html`** - Offline fallback page with app information
13+
- **`streamlit_app/streamlit_app_pwa.py`** - Enhanced Streamlit app with embedded PWA support
14+
15+
### PWA Assets
16+
- **`streamlit_app/icons/`** - Directory containing 8 PWA icon sizes (72x72 to 512x512)
17+
- `icon-72x72.png` through `icon-512x512.png`
18+
- **`streamlit_app/generate_icons.py`** - Script to generate PWA icons programmatically
19+
20+
### Configuration
21+
- **`streamlit_app/.streamlit/config.toml`** - Streamlit configuration for static file serving
22+
- **`streamlit_app/test_pwa_setup.py`** - Verification script to test PWA setup
23+
24+
### Documentation
25+
- **`PWA_README.md`** - Comprehensive PWA usage and installation guide
26+
- **`DEPLOYMENT.md`** - Deployment guide for PWA in production
27+
28+
## 🔄 Modified Files
29+
30+
### `requirements.txt`
31+
- Added PWA-related dependencies:
32+
- `Pillow>=8.0.0,<11.0.0` for icon generation
33+
- `aiofiles>=0.7.0,<1.0.0` for async file serving
34+
35+
### `README.md`
36+
- Added PWA features to key features list
37+
- Included PWA installation instructions
38+
- Added link to detailed PWA guide
39+
- Updated usage instructions for both standard and PWA versions
40+
41+
### `streamlit_app/streamlit_app.py`
42+
- Enhanced with PWA meta tags and service worker registration
43+
- Added install prompt functionality
44+
- Included installation instructions in UI
45+
46+
## 🎯 PWA Features Implemented
47+
48+
### ✅ Core PWA Functionality
49+
- **Installable**: Users can add the app to their home screen
50+
- **App-like Experience**: Full-screen, standalone display mode
51+
- **Custom Icons**: Branded icons for all device sizes
52+
- **Theme Integration**: Custom colors matching app design
53+
54+
### ✅ Performance Enhancements
55+
- **Service Worker Caching**: Essential resources cached for faster loading
56+
- **Offline Support**: Basic functionality available without internet connection
57+
- **Background Sync**: Data synchronization when connection is restored
58+
59+
### ✅ Platform Support
60+
- **Mobile**: Android (Chrome/Edge) and iOS (Safari) installation
61+
- **Desktop**: Chrome, Edge, and other Chromium-based browsers
62+
- **Cross-Platform**: Single codebase works everywhere
63+
64+
### ✅ Developer Experience
65+
- **Easy Setup**: Run with single command
66+
- **Testing Tools**: Verification script to check PWA setup
67+
- **Documentation**: Comprehensive guides for users and developers
68+
69+
## 🚀 Usage Instructions
70+
71+
### For Users
72+
1. **Standard Version**: `streamlit run streamlit_app/streamlit_app.py`
73+
2. **PWA Version**: `streamlit run streamlit_app/streamlit_app_pwa.py`
74+
3. **Install PWA**: Follow browser-specific installation prompts
75+
76+
### For Developers
77+
1. **Generate Icons**: `python3 streamlit_app/generate_icons.py`
78+
2. **Test Setup**: `python3 streamlit_app/test_pwa_setup.py`
79+
3. **Deploy**: Follow deployment guide for production
80+
81+
## 📊 Technical Implementation Details
82+
83+
### Manifest Configuration
84+
```json
85+
{
86+
"name": "Driver Drowsiness Detection System",
87+
"short_name": "DrowsinessDetect",
88+
"theme_color": "#ff6b6b",
89+
"display": "standalone",
90+
"start_url": "/"
91+
}
92+
```
93+
94+
### Service Worker Strategy
95+
- **Cache First**: Static assets served from cache
96+
- **Network First**: Dynamic content fetched from network
97+
- **Offline Fallback**: Custom offline page when network unavailable
98+
99+
### Browser Compatibility
100+
- ✅ Chrome 67+ (Android/Desktop)
101+
- ✅ Edge 79+ (Desktop)
102+
- ✅ Safari 11.1+ (iOS)
103+
- ⚠️ Firefox (bookmark support only)
104+
105+
## 🎉 Benefits for Users
106+
107+
### Mobile Users
108+
- **No App Store**: Install directly from browser
109+
- **Native Feel**: App-like interface and behavior
110+
- **Offline Access**: Use core features without internet
111+
- **Push Notifications**: Future support for alerts
112+
113+
### Desktop Users
114+
- **Quick Access**: Launch from desktop or taskbar
115+
- **Full Screen**: Distraction-free interface
116+
- **Auto Updates**: Always get latest version
117+
- **Performance**: Faster loading with caching
118+
119+
## 🔮 Future Enhancements
120+
121+
### Planned Features
122+
- **Push Notifications**: Real-time drowsiness alerts
123+
- **Background Processing**: Continuous monitoring capabilities
124+
- **Offline Data Storage**: Local session storage
125+
- **Voice Commands**: Hands-free operation
126+
127+
### Advanced PWA APIs
128+
- **Wake Lock API**: Prevent screen from sleeping during detection
129+
- **Web Share API**: Share detection results
130+
- **File System Access**: Save detection videos locally
131+
- **Device Orientation**: Optimize for landscape/portrait modes
132+
133+
## 🐛 Known Issues & Limitations
134+
135+
- **HTTPS Required**: PWA installation requires secure connection in production
136+
- **iOS Limitations**: Some PWA features limited on iOS Safari
137+
- **Camera Access**: Requires explicit user permission
138+
- **Browser Support**: Best experience on Chromium-based browsers
139+
140+
## 🎯 Impact
141+
142+
This PWA implementation significantly enhances the user experience by:
143+
- Making the app more accessible (no app store required)
144+
- Improving performance through intelligent caching
145+
- Enabling offline functionality for core features
146+
- Providing a native app-like experience across all platforms
147+
148+
The changes are backwards-compatible and don't affect existing functionality while adding substantial value for users who want a more integrated experience.
149+
150+
---
151+
152+
**Ready to merge! 🚀** This PWA implementation follows web standards and best practices for progressive enhancement.

0 commit comments

Comments
 (0)