Critical fixes for PWA installation:
1. ✅ Use proper Vite PWA registration with virtual:pwa-register
2. ✅ Simplified manifest.json (removed verbose name, fixed orientation)
3. ✅ Added 'any maskable' dual-purpose icon for better compatibility
4. ✅ Removed crossorigin from manifest link (causes issues)
5. ✅ Simplified start_url to just '/'
6. ✅ Added msapplication-TileColor meta tag
7. ✅ Set injectRegister: 'auto' in Vite config
8. ✅ Use public/manifest.json directly instead of generating
This should now work on Brave Browser Android with proper 'Install App' prompt.
Test: Clear site data, visit site, should see install prompt within 30 seconds.
Co-authored-by: Cursor <cursoragent@cursor.com>
The favicon was trying to load from /assets/images/app-icon.svg
which doesn't exist in the build output (Vite only copies public folder).
Copied app-icon.svg to public/icons/ and updated index.html reference.
This fixes the 404 error and container health check.
Co-authored-by: Cursor <cursoragent@cursor.com>
Generated proper PNG icons for Android PWA support:
- icon-192.png / icon-512.png (standard icons)
- icon-192-maskable.png / icon-512-maskable.png (with 10% padding for Android)
- apple-touch-icon.png (180x180 for iOS)
Android requires PNG icons, not SVG, for proper PWA installation.
SVG-only manifests cause 'shortcut' behavior instead of full app install.
Updated manifest.json, index.html, and vite.config.ts to use PNG icons.
Added icon generation scripts for future updates.
This should now offer proper 'Install App' on Android instead of 'Add to Home Screen'.
Co-authored-by: Cursor <cursoragent@cursor.com>
Android PWA Requirements:
- Add mobile-web-app-capable meta tag for Android
- Add application-name meta tag
- Add prefer_related_applications: false to manifest
- Add explicit icon sizes (192x192, 512x512) for both any and maskable
- Add orientation: any for flexible display
- Add lang and dir to manifest for proper localization
- Add ?source=pwa to start_url for analytics
- Add crossorigin="use-credentials" to manifest link
- Add proper service worker registration in main.ts
- Add vite-plugin-pwa/client types to env.d.ts
This ensures Android recognizes it as a full PWA instead of creating a shortcut
Co-authored-by: Cursor <cursoragent@cursor.com>
- Add Dockerfile with multi-stage build (Node.js + Nginx)
- Add docker-compose.yml for Portainer stack deployment on port 7777
- Add nginx.conf with PWA support, gzip compression, and security headers
- Add .dockerignore for optimized Docker builds
- Add DEPLOYMENT.md with comprehensive deployment guide
- Configure Vite PWA plugin with service worker and offline support
- Add PWA manifest.json with app icons and shortcuts
- Enhance logo.svg with iOS-style glass effects (filters, gradients, highlights)
- Add app-icon.svg for PWA installation
- Update mobile nav with glassmorphic active tab styling
- Fix mobile tab bar layout shift issues with flex-1 and consistent sizing
- Update index.html with PWA meta tags and Apple-specific settings
- Add health check endpoint at /health for container monitoring
Co-authored-by: Cursor <cursoragent@cursor.com>
Built a complete Netflix-style streaming interface for IndeeHub's decentralized media platform with real film content.
Features:
- Vue 3 + TypeScript + Vite setup with hot module reloading
- Netflix-inspired UI with hero section and horizontal scrolling content rows
- Glass morphism design system with custom Tailwind configuration
- 20+ real IndeeHub films organized into 6 categories (Bitcoin, Documentaries, Drama, etc.)
- Full-featured video player component with custom controls
- Mobile-responsive design with bottom navigation
- Nostr integration ready (nostr-tools, relay pool, NIP-71 support)
- Pinia state management for content
- MCP tools configured (Filesystem, Memory, Nostr, Puppeteer)
Components:
- Browse.vue: Main streaming interface with hero and content rows
- ContentRow.vue: Horizontal scrolling film cards with navigation arrows
- VideoPlayer.vue: Custom video player with play/pause, seek, volume, fullscreen
- MobileNav.vue: Bottom tab navigation for mobile devices
Tech Stack:
- Frontend: Vue 3 (Composition API), TypeScript
- Build: Vite 7
- Styling: Tailwind CSS with custom theme
- State: Pinia 3
- Router: Vue Router 4.6
- Protocol: Nostr (nostr-tools 2.22)
Design:
- 4px grid spacing system
- Glass morphism UI components
- Netflix-style hero section with featured content
- Smooth animations and hover effects
- Mobile-first responsive breakpoints
- Dark theme with custom color palette
Content:
- 20+ IndeeHub films with titles, descriptions, categories
- Bitcoin documentaries: God Bless Bitcoin, Dirty Coin, Searching for Satoshi
- Independent films and documentaries
- Working Unsplash CDN images for thumbnails and backdrops
Ready for deployment to Umbrel, Start9, and Archy nodes.
Co-authored-by: Cursor <cursoragent@cursor.com>
