Brexee – Mobilní PWA aplikace pro dechová cvičení
Plně funkční Progressive Web App s pokročilými funkcemi jako push notifikace, haptic feedback, on-device AI a offline-first architekturou. Technologická showcase mobilních web standardů.
Klient
Interní projekt
Typ
Progressive Web App
Role
Koncept, Design, Full-stack Development
Launch
Q1 2025
Mobilní PWA v akci
Brexee využívá nejnovější PWA standardy pro vytvoření nativního mobilního zážitku přímo v prohlížeči – bez nutnosti instalace z App Store. Aplikace běží pouze na mobilních zařízeních (iOS/Android).
App Icon na Home Screen
Standalone ikona bez browser chrome
Push Notification
Nativní notifikace pro denní připomínky
Main Interface
Fullscreen aplikace s animovaným avatarem
Technické detaily PWA implementace
Web App Manifest
- • Display mode:
standalone - • Orientation:
portrait - • Theme color:
#667eea - • Start URL s tracking parametrem
Service Worker Strategie
- • Precache při instalaci (HTML, CSS, JS)
- • Cache-first pro statické assety
- • Network-first pro API calls
- • Stale-while-revalidate pro obrázky
O projektu
Mobilní aplikace bez App Store
Brexee je plně funkční mobilní aplikace pro iOS a Android, která nevyžaduje instalaci z App Store či Google Play. Využívá Progressive Web App standardy pro poskytnutí nativního zážitku přímo v prohlížeči.
Po přidání na plochu telefonu funguje jako samostatná aplikace s vlastní ikonou, bez browser UI, s podporou push notifikací a offline funkčností.
Showcase moderních web technologií
Projekt demonstruje možnosti současných web standardů: Service Workers pro offline support, Web Push API pro notifikace, Vibration API pro haptic feedback, WebLLM pro on-device AI a Web Audio API pro audio management.
Důraz na performance (60 FPS animace), optimalizaci pro slabší zařízení a offline-first architekturu. Aplikace funguje i bez internetového připojení.
Technologické funkce PWA
Service Worker & Offline Support
Pokročilá implementace Service Workeru s inteligentním cachováním.
- •Cache-first strategie pro statické assety
- •Network-first pro HTML s offline fallback
- •Automatické cache updates při nové verzi
- •Precaching kritických resources při instalaci
Web App Manifest
Kompletní PWA manifest s nativními funkcemi.
- •Instalovatelná jako standalone aplikace
- •Custom app ikona s adaptive icon support
- •App shortcuts pro rychlý přístup k funkcím
- •Display mode: standalone bez browser UI
Push Notifications
Plně funkční push notifikace pro denní připomínky.
- •Service Worker push notification handler
- •Notification permission request flow
- •Scheduled daily reminders
- •Customizovatelný timing a zprávy
Vibration API
Haptická zpětná vazba pro mobilní zařízení.
- •Pattern-based vibrační feedback
- •Vibrace synchronizovaná s fázemi cvičení
- •Konfigurovatelná intenzita a vzory
- •Graceful fallback pro nepodporovaná zařízení
On-device AI s WebLLM
AI model běžící přímo v prohlížeči bez serverů.
- •@mlc-ai/web-llm s Phi-2 modelem
- •Lazy loading pro optimalizaci bundle size
- •Progressive loading s progress tracking
- •100% privátní – žádná data neopouští zařízení
Web Audio API
Profesionální audio management pro sound efekty.
- •Low-latency audio playback
- •Seamless looping pro ambient sounds
- •Buffer management pro iOS Safari
- •AudioContext s user gesture handling
Technologie
Framework
Next.js 15 App Router
Language
TypeScript 5
Styling
Tailwind CSS 4
PWA
Service Worker + Manifest
AI
WebLLM (On-device)
Effects
Canvas Confetti
Audio
Web Audio API
Haptics
Vibration API
Technické highlighty
Custom Hooks Architecture
- ✓useBreathing – komplexní logika dechových cvičení
- ✓usePhaseSound – zvukové efekty s Web Audio API
- ✓useAmbientSound – ambient soundtracks s loop seamless
- ✓usePWA – registrace Service Workeru a install prompt
- ✓useJournal – localStorage persistence s TypeScript
Performance Optimalizace
- ✓60 FPS animace s requestAnimationFrame
- ✓CSS transforms místo layout triggers
- ✓Lazy loading AI modelu (WebLLM)
- ✓Image optimization s Next.js
- ✓Service Worker cache strategie
Accessibility & UX
- ✓ARIA labels pro screen readery
- ✓Keyboard navigation support
- ✓Reduced motion preference respect
- ✓High contrast mode support
- ✓Touch-friendly UI (min 44×44px targets)
Performance metriky
Bundle Size
< 200 KB
Initial JS bundle
First Load
< 1.5s
Time to Interactive
Lighthouse
98/100
Performance score
Offline
100%
Funkcionalita offline
Výzvy a řešení
Výzva
Smooth 60 FPS animace i na slabších zařízeních
Řešení
Použití CSS transforms (translateZ pro GPU), requestAnimationFrame throttling, Safari optimalizace a will-change hints pro kritické elementy.
Výzva
Service Worker a offline funkčnost
Řešení
Cache-first pro statické assety, network-first pro HTML s offline fallback, automatické cache updates a graceful error handling.
Výzva
Audio na iOS Safari
Řešení
User gesture requirement pro Web Audio API, context resume po interakci, seamless looping s buffer handling.
Budoucí plány
Background Sync API pro offline journal entries
Web Share API pro sdílení úspěchů
Integrace s Apple Health / Google Fit API
IndexedDB pro pokročilé lokální úložiště
WebRTC pro live guided sessions
Web Bluetooth pro integrace s wearables
Potřebujete mobilní PWA aplikaci?
Vytvoříme vám Progressive Web App s push notifikacemi, offline podporou a nativním mobilním zážitkem – bez nutnosti App Store publikace.