web configuration in progress
FaizHashmi
2 months ago
parent
c0cd969558
commit
3c3c5e9423
@ -0,0 +1,414 @@
|
||||
# Android vs Web Platform Comparison
|
||||
|
||||
> Quick reference for understanding differences between Android and Web versions
|
||||
> Last Updated: July 30, 2026
|
||||
|
||||
---
|
||||
|
||||
## 🔍 Platform Feature Comparison
|
||||
|
||||
| Feature | Android (Current) | Web (After Migration) | Implementation Effort |
|
||||
|---------|-------------------|----------------------|----------------------|
|
||||
| **Kiosk Mode** | ✅ Native Android kiosk mode | ⚠️ Browser fullscreen + kiosk flags | Low |
|
||||
| **Auto-Start on Boot** | ✅ BootBroadcastReceiver | ⚠️ Browser autostart config | Low |
|
||||
| **Wake Lock** | ✅ WakelockPlus plugin | ✅ Browser Wake Lock API | Low |
|
||||
| **Screen Always On** | ✅ WindowManager flags | ✅ Wake Lock API | Low |
|
||||
| **Background Service** | ✅ Foreground service | ❌ Not possible (tab must stay open) | N/A |
|
||||
| **File Logging** | ✅ External storage | ✅ IndexedDB + download | Medium |
|
||||
| **SignalR Real-time** | ✅ signalr_core | ✅ Same (WebSocket) | None |
|
||||
| **Audio Playback** | ✅ just_audio | ⚠️ just_audio web or HTML5 Audio | Low |
|
||||
| **Text-to-Speech** | ✅ flutter_tts | ⚠️ Web Speech API | Medium |
|
||||
| **QR Scanner** | ✅ qr_code_scanner_plus | ⚠️ mobile_scanner (requires HTTPS) | Low |
|
||||
| **Scheduled Tasks** | ✅ AlarmManager | ⚠️ JavaScript timers | Medium |
|
||||
| **Offline Support** | ✅ Native app | ⚠️ PWA with Service Worker | Medium |
|
||||
| **Push Notifications** | ✅ Firebase Cloud Messaging | ⚠️ Web Push API | Medium |
|
||||
| **Network Detection** | ✅ connectivity_plus | ✅ Same (web support) | None |
|
||||
| **Local Storage** | ✅ SharedPreferences | ✅ localStorage (same plugin) | None |
|
||||
| **Multi-language** | ✅ Built-in | ✅ Built-in | None |
|
||||
| **Updates** | ⚠️ Manual APK deployment | ✅ Instant (refresh page) | N/A |
|
||||
| **Installation** | ⚠️ APK + ADB | ✅ Just open URL | N/A |
|
||||
| **Security** | ✅ Full device control | ⚠️ Browser sandbox | N/A |
|
||||
| **Crash Recovery** | ✅ Can restart automatically | ⚠️ Browser dependent | Low |
|
||||
|
||||
**Legend:**
|
||||
✅ Fully Supported | ⚠️ Supported with Limitations | ❌ Not Supported
|
||||
|
||||
---
|
||||
|
||||
## 📦 Dependencies Comparison
|
||||
|
||||
### Android-Only (Remove for Web)
|
||||
|
||||
```yaml
|
||||
# These will be removed
|
||||
wakelock_plus: ^1.2.10 # Use Browser Wake Lock API instead
|
||||
path_provider: ^2.1.5 # Use IndexedDB/localStorage instead
|
||||
qr_code_scanner_plus: ^2.0.10+1 # Use mobile_scanner instead
|
||||
```
|
||||
|
||||
### Web-Compatible (Keep)
|
||||
|
||||
```yaml
|
||||
# These work on both platforms
|
||||
provider: ^6.1.2 # ✅ State management
|
||||
get_it: ^8.0.2 # ✅ Dependency injection
|
||||
signalr_core: ^1.1.1 # ✅ Real-time communication
|
||||
connectivity_plus: ^6.1.0 # ✅ Network monitoring
|
||||
shared_preferences: ^2.3.5 # ✅ Local storage
|
||||
flutter_svg: ^2.0.14 # ✅ SVG rendering
|
||||
intl: ^0.19.0 # ✅ Internationalization
|
||||
logger: ^2.4.0 # ✅ Logging framework
|
||||
http: ^1.2.2 # ✅ HTTP requests
|
||||
```
|
||||
|
||||
### Web-Specific (Add)
|
||||
|
||||
```yaml
|
||||
# Add these for web support
|
||||
mobile_scanner: ^3.5.2 # QR scanner with web support
|
||||
indexed_db: ^0.3.0 # Structured data storage
|
||||
universal_html: ^2.2.4 # Access to web APIs
|
||||
js: ^0.6.7 # JavaScript interop
|
||||
```
|
||||
|
||||
### Requires Testing/Replacement
|
||||
|
||||
```yaml
|
||||
just_audio: ^0.9.42 # ⚠️ Has web support, test needed
|
||||
flutter_tts: ^4.2.0 # ⚠️ Limited web support, use Web Speech API
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔧 Code Changes Summary
|
||||
|
||||
### Files That Need Changes
|
||||
|
||||
| File | Type of Change | Complexity |
|
||||
|------|---------------|------------|
|
||||
| `lib/main.dart` | Modify | Low - Add platform detection |
|
||||
| `lib/services/logger_service.dart` | New File | Medium - Create web version |
|
||||
| `lib/services/wakelock_service.dart` | New File | Low - Wrapper for web/mobile |
|
||||
| `lib/services/text_to_speech_service.dart` | Modify | Medium - Add web implementation |
|
||||
| `lib/services/audio_service.dart` | Modify | Low - Test or add web fallback |
|
||||
| `lib/utilities/native_method_handler.dart` | Modify | Low - Add platform checks |
|
||||
| `lib/view_models/screen_config_view_model.dart` | Modify | Medium - Add web lifecycle |
|
||||
| `lib/services/connectivity_service.dart` | Modify | Low - Add IP detection for web |
|
||||
| `lib/config/dependency_injection.dart` | Modify | Medium - Platform-aware DI |
|
||||
| `web/index.html` | Create | Low - Standard web config |
|
||||
| `web/manifest.json` | Create | Low - PWA manifest |
|
||||
|
||||
### Files That Don't Need Changes
|
||||
|
||||
| File Category | Files | Reason |
|
||||
|---------------|-------|--------|
|
||||
| **Models** | All `lib/models/*.dart` | Platform-agnostic Dart code |
|
||||
| **Repositories** | `lib/repositories/*.dart` | Use standard HTTP/SignalR |
|
||||
| **Constants** | `lib/constants/*.dart` | Pure Dart constants |
|
||||
| **UI Widgets** | Most of `lib/views/*.dart` | Flutter renders same |
|
||||
| **View Models** | Business logic in ViewModels | Dart code, no platform API |
|
||||
|
||||
### Files to Delete (Not Needed for Web)
|
||||
|
||||
| File | Reason |
|
||||
|------|--------|
|
||||
| `android/` folder | Android-specific native code |
|
||||
| `ios/` folder | iOS-specific native code |
|
||||
| All `.kt` files | Kotlin is Android-only |
|
||||
| `qline_scripts/*.sh` | Deployment scripts for Android APK |
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Deployment Comparison
|
||||
|
||||
### Android Deployment (Current)
|
||||
|
||||
```bash
|
||||
# Build
|
||||
flutter build apk --release
|
||||
|
||||
# Deploy to devices
|
||||
cd qline_scripts
|
||||
sh deploy_qline.sh -ipfile device_ips_all.txt -version 9.4
|
||||
|
||||
# Update (requires ADB connection)
|
||||
adb install -r app-release.apk
|
||||
```
|
||||
|
||||
**Pros:**
|
||||
- Full control over device
|
||||
- Works offline always
|
||||
- No browser dependencies
|
||||
|
||||
**Cons:**
|
||||
- Manual deployment process
|
||||
- Requires physical access or ADB
|
||||
- Slower update rollout
|
||||
- Version management complex
|
||||
|
||||
### Web Deployment (After Migration)
|
||||
|
||||
```bash
|
||||
# Build
|
||||
flutter build web --release
|
||||
|
||||
# Deploy to Firebase (example)
|
||||
firebase deploy
|
||||
|
||||
# Or deploy to own server
|
||||
rsync -avz build/web/ user@server:/var/www/qline/
|
||||
```
|
||||
|
||||
**Pros:**
|
||||
- ✅ Instant updates (just refresh)
|
||||
- ✅ Deploy once, available everywhere
|
||||
- ✅ No APK management
|
||||
- ✅ Central control
|
||||
- ✅ Easy rollback
|
||||
|
||||
**Cons:**
|
||||
- ⚠️ Requires internet for updates
|
||||
- ⚠️ Browser must be configured
|
||||
- ⚠️ HTTPS required for camera
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Feature Parity Matrix
|
||||
|
||||
### Core Features
|
||||
|
||||
| Feature | Android | Web | Notes |
|
||||
|---------|---------|-----|-------|
|
||||
| Patient Queue Display | ✅ | ✅ | Identical |
|
||||
| Real-time SignalR Updates | ✅ | ✅ | Identical |
|
||||
| Audio Call Tones | ✅ | ⚠️ | Web: autoplay restrictions |
|
||||
| TTS Announcements | ✅ | ⚠️ | Web: Web Speech API |
|
||||
| Multi-language (EN/AR) | ✅ | ✅ | Identical |
|
||||
| RTL Support | ✅ | ✅ | Identical |
|
||||
| Weather Widget | ✅ | ✅ | Identical |
|
||||
| Prayer Times Widget | ✅ | ✅ | Identical |
|
||||
| RSS Feed Widget | ✅ | ✅ | Identical |
|
||||
| Configuration via IP | ✅ | ⚠️ | Web: URL param or manual |
|
||||
| Health Check Logging | ✅ | ⚠️ | Web: IndexedDB + download |
|
||||
| Crash Logging | ✅ | ⚠️ | Web: Console + IndexedDB |
|
||||
|
||||
### Kiosk Features
|
||||
|
||||
| Feature | Android | Web | Notes |
|
||||
|---------|---------|-----|-------|
|
||||
| QR Code Scanner | ✅ | ⚠️ | Web: Requires HTTPS |
|
||||
| Manual ID Entry | ✅ | ✅ | Identical |
|
||||
| Ticket Generation | ✅ | ✅ | Identical |
|
||||
| Language Selection | ✅ | ✅ | Identical |
|
||||
| Queue Selection | ✅ | ✅ | Identical |
|
||||
| Thank You Screen | ✅ | ✅ | Identical |
|
||||
|
||||
### System Features
|
||||
|
||||
| Feature | Android | Web | Notes |
|
||||
|---------|---------|-----|-------|
|
||||
| 24/7 Operation | ✅ | ⚠️ | Web: Browser must stay open |
|
||||
| Auto-restart | ✅ | ⚠️ | Web: Can reload page |
|
||||
| Boot on Startup | ✅ | ⚠️ | Web: Configure browser autostart |
|
||||
| Crash Recovery | ✅ | ⚠️ | Web: Browser dependent |
|
||||
| Memory Management | ✅ | ⚠️ | Web: Browser handles |
|
||||
| Log Rotation | ✅ | ⚠️ | Web: Manual download needed |
|
||||
|
||||
---
|
||||
|
||||
## 💰 Cost Comparison
|
||||
|
||||
### Android Deployment
|
||||
|
||||
**Initial Costs:**
|
||||
- Android TV boxes/displays: $100-300 per device
|
||||
- One-time setup per device
|
||||
- ADB deployment setup
|
||||
|
||||
**Ongoing Costs:**
|
||||
- Manual deployment time
|
||||
- Physical access for updates
|
||||
- Maintenance visits
|
||||
|
||||
**Advantages:**
|
||||
- One-time cost
|
||||
- No hosting fees
|
||||
- Full offline operation
|
||||
|
||||
### Web Deployment
|
||||
|
||||
**Initial Costs:**
|
||||
- Thin clients/mini PCs: $150-400 per device (optional - can reuse existing)
|
||||
- SSL certificate: Free (Let's Encrypt)
|
||||
- Domain name: $10-15/year
|
||||
|
||||
**Hosting Options:**
|
||||
- Firebase Hosting: Free (up to 10GB)
|
||||
- Self-hosted: Server costs
|
||||
- Cloud (AWS/Azure): $20-100/month
|
||||
|
||||
**Ongoing Costs:**
|
||||
- Hosting: $0-100/month
|
||||
- Minimal deployment time
|
||||
- Remote updates (no visits)
|
||||
|
||||
**Advantages:**
|
||||
- Instant updates
|
||||
- Remote management
|
||||
- Central monitoring
|
||||
|
||||
---
|
||||
|
||||
## ⚡ Performance Comparison
|
||||
|
||||
### Android
|
||||
|
||||
| Metric | Performance |
|
||||
|--------|-------------|
|
||||
| App Startup | Fast (2-3 seconds) |
|
||||
| Memory Usage | 80-150 MB |
|
||||
| CPU Usage | Low (5-10%) |
|
||||
| Network | SignalR WebSocket |
|
||||
| Rendering | Native Android |
|
||||
| Wake Lock | Native, reliable |
|
||||
| Audio Latency | Low |
|
||||
| Camera Access | Direct, fast |
|
||||
|
||||
### Web (Expected)
|
||||
|
||||
| Metric | Performance |
|
||||
|--------|-------------|
|
||||
| Page Load | Fast (2-4 seconds first load) |
|
||||
| Memory Usage | 100-200 MB (browser + app) |
|
||||
| CPU Usage | Low-Medium (10-20% with browser) |
|
||||
| Network | SignalR WebSocket (same) |
|
||||
| Rendering | Chromium rendering engine |
|
||||
| Wake Lock | Browser API, reliable on Chrome |
|
||||
| Audio Latency | Low-Medium (browser dependent) |
|
||||
| Camera Access | WebRTC, slight delay |
|
||||
|
||||
**Overall:** Web performance is comparable, with slightly higher memory usage due to browser overhead.
|
||||
|
||||
---
|
||||
|
||||
## 🔒 Security Comparison
|
||||
|
||||
### Android
|
||||
|
||||
**Pros:**
|
||||
- Full control over device
|
||||
- Can lock down Android completely
|
||||
- No browser vulnerabilities
|
||||
- Native app sandbox
|
||||
|
||||
**Cons:**
|
||||
- Physical device access required for setup
|
||||
- APK can be extracted/reverse engineered
|
||||
- Must manage device security
|
||||
|
||||
### Web
|
||||
|
||||
**Pros:**
|
||||
- HTTPS encryption
|
||||
- Browser security features
|
||||
- Easy SSL certificate management
|
||||
- Remote security updates
|
||||
|
||||
**Cons:**
|
||||
- Browser can be accessed
|
||||
- JavaScript can be viewed
|
||||
- Depends on browser security
|
||||
- Users can close browser (without kiosk mode)
|
||||
|
||||
**Recommendation:**
|
||||
- Both can be secured adequately
|
||||
- Web requires HTTPS + browser kiosk mode
|
||||
- Android requires device lockdown
|
||||
|
||||
---
|
||||
|
||||
## 📈 Migration Timeline
|
||||
|
||||
| Phase | Android (Maintain) | Web (Build) | Total Time |
|
||||
|-------|-------------------|-------------|------------|
|
||||
| **Phase 1: Setup** | 0 days | 1-2 days | 1-2 days |
|
||||
| **Phase 2: Services** | 0 days | 3-5 days | 3-5 days |
|
||||
| **Phase 3: Core Updates** | 0 days | 2-3 days | 2-3 days |
|
||||
| **Phase 4: UI Updates** | 0 days | 2-3 days | 2-3 days |
|
||||
| **Phase 5: Testing** | 1 day | 4-6 days | 5-7 days |
|
||||
| **Phase 6: Deployment** | 0 days | 3-5 days | 3-5 days |
|
||||
| **Phase 7: Kiosk Setup** | 0 days | 2-3 days | 2-3 days |
|
||||
| **Phase 8: Documentation** | 0 days | 1-2 days | 1-2 days |
|
||||
| **TOTAL** | 1 day | 22-31 days | **23-32 days** |
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Decision Matrix
|
||||
|
||||
### Choose Android If:
|
||||
|
||||
- ✅ You need complete device control
|
||||
- ✅ You have IT staff for physical deployment
|
||||
- ✅ You want true offline operation
|
||||
- ✅ You need guaranteed 24/7 uptime
|
||||
- ✅ You don't need frequent updates
|
||||
|
||||
### Choose Web If:
|
||||
|
||||
- ✅ You want instant updates across all locations
|
||||
- ✅ You want centralized management
|
||||
- ✅ You have stable HTTPS hosting
|
||||
- ✅ You want easier deployment
|
||||
- ✅ You can use browser kiosk mode
|
||||
- ✅ You want cross-platform support (future: tablets, desktops)
|
||||
|
||||
### Choose Both If:
|
||||
|
||||
- ✅ You want maximum flexibility
|
||||
- ✅ You can maintain both codebases (with shared business logic)
|
||||
- ✅ You want to test web in pilot locations first
|
||||
- ✅ You need backup deployment option
|
||||
|
||||
---
|
||||
|
||||
## 📊 Recommendation
|
||||
|
||||
### For HMG_QLine Project:
|
||||
|
||||
**Recommended Approach:** **Gradual Migration**
|
||||
|
||||
1. **Phase 1 (Now):** Keep Android as primary
|
||||
2. **Phase 2 (2-4 weeks):** Build web version
|
||||
3. **Phase 3 (1 week):** Pilot test web in 2-3 locations
|
||||
4. **Phase 4 (2 weeks):** Evaluate feedback
|
||||
5. **Phase 5 (Ongoing):** Migrate locations gradually
|
||||
|
||||
**Reasoning:**
|
||||
- ✅ No disruption to current operations
|
||||
- ✅ Test web thoroughly before full rollout
|
||||
- ✅ Keep Android as fallback
|
||||
- ✅ Evaluate real-world performance
|
||||
- ✅ Easy to roll back if issues arise
|
||||
|
||||
---
|
||||
|
||||
## 📞 Quick Reference
|
||||
|
||||
**Need detailed implementation?**
|
||||
→ See [WEB_MIGRATION_GUIDE.md](WEB_MIGRATION_GUIDE.md)
|
||||
|
||||
**Need step-by-step checklist?**
|
||||
→ See [WEB_MIGRATION_CHECKLIST.md](WEB_MIGRATION_CHECKLIST.md)
|
||||
|
||||
**Need project architecture?**
|
||||
→ See [PROJECT_CONTEXT.md](PROJECT_CONTEXT.md)
|
||||
|
||||
**Need recent changes info?**
|
||||
→ See [QUICK_SUMMARY.md](QUICK_SUMMARY.md)
|
||||
|
||||
---
|
||||
|
||||
**Last Updated:** July 30, 2026
|
||||
**Status:** Migration not started (planning phase)
|
||||
|
||||
|
||||
Loading…
Reference in New Issue