Cross-platform Mobile 2024

Capacitor — natywne możliwości dla aplikacji webowych?

Capacitor: Ionic Team. Webview + natywne API. iOS i Android z jednej bazy kodu web. Jak Cordova ale nowoczesny. Instalacja w istniejącej aplikacji: npm install @capacitor/core @capacitor/cli. npx cap init. npm install @capacitor/ios @capacitor/android. npx cap add ios. npx cap add android. Konfiguracja: capacitor.config.ts. appId: 'pl.fotz.app'. appName: 'MyApp'. webDir: 'dist'. Budowanie: npm run build. npx cap sync — kopiuje web do native. npx cap open ios — otwiera Xcode. npx cap open android — otwiera Android Studio. Natywne API: @capacitor/camera. @capacitor/filesystem. @capacitor/geolocation. @capacitor/push-notifications. @capacitor/status-bar. @capacitor/splash-screen. @capacitor/app. Przykład Camera: import {Camera, CameraResultType} from '@capacitor/camera'. const photo = await Camera.getPhoto({resultType: CameraResultType.Uri, quality: 90}). console.log(photo.webPath). Plugins community: capacitor-community/sqlite. capacitor-community/bluetooth-le. @capacitor-mlkit/. Live Reload: npx cap run ios --livereload --external. Hot reload na urządzeniu fizycznym. Capacitor vs Cordova: Capacitor — nowoczesny, TypeScript-first. Cordova — starszy, callback-based. Capacitor wygrywa. vs React Native: Capacitor — webview. RN — native components. Różne tradeoffs.

Ionic Framework — UI komponenty dla web i mobile?

Ionic: komponenty UI cross-platform. Web Components. Działa z React, Vue, Angular, Svelte. Standalone bez frameworka. Instalacja z React: npm install @ionic/react @ionic/react-router ionicons. Wygląd natywny: iOS Material Design na iOS. Android Material Design na Android. Automatycznie. Komponenty: IonButton, IonInput, IonCard, IonList, IonItem. IonHeader, IonToolbar, IonContent. IonTabs, IonTabBar, IonTabButton. IonModal, IonAlert, IonToast, IonActionSheet. IonLoading, IonProgressBar. Nawigacja: IonRouterOutlet + React Router. IonNav dla wewnętrznej nawigacji. Stack navigation (push/pop). Tab navigation. Formularze: IonInput — styled input. IonTextarea. IonSelect, IonCheckbox, IonToggle. IonDatetime — date picker. Gesty: swipe back na iOS. Pull to refresh: IonRefresher. IonInfiniteScroll — infinite list. Virtual scroll: IonVirtualScroll. Custom theme: CSS variables. --ion-color-primary: #3880ff. --ion-background-color: #ffffff. Wsparcie dla dark mode. Ionic + Capacitor: idealny stos. Ionic — UI. Capacitor — native API. Full mobile app. Ionic + Angular: tradycyjny stos. TypeScript first. Formularze reactive. Ionic + React (modern): React hooks. JSX templates. Popularne 2024. Kiedy Ionic: team webowy. Chcesz iOS + Android z jednej bazy. Wygląd natywny ważny.

Capacitor i Ionic vs React Native vs Flutter — kiedy wybrać?

Capacitor + Ionic: zalety: jedna baza kodu (web + mobile + desktop). Webowcy mogą tworzyć. PWA gratis. Duże community. Wady: webview performance. Nie native components. Animacje mogą być wolniejsze. React Native: zalety: native components. Lepszy performance. Duże community. Expo upraszcza. Wady: wymaga RN wiedzy. Brak PWA. Osobna baza kodu od web. Cross-platform OK. Flutter: zalety: własny rendering engine. Szybki. Piękne animacje. One codebase web + mobile + desktop. Wady: Dart (nie JS). Oddzielna baza kodu. Mniejszy ekosystem. Kiedy Capacitor+Ionic: istniejąca aplikacja web -> mobile. Team web-only. PWA + mobile z tej samej bazy. Szybki MVP. Kiedy React Native: performance krytyczny. Natywne UX ważne. Team zna React. Długoterminowy projekt mobile. Kiedy Flutter: cross-platform mobile + desktop. Animacje. Dart akceptowalny. Google backing. Tauri dla desktop: Tauri + web app -> desktop. Znacznie mniejszy bundle niż Electron. Capacitor + Tauri = web do mobile + desktop. Natywne API: Capacitor plugins. Tauri commands. Kiedy wybrać co: MVP szybko -> Ionic+Capacitor. Gra mobilna -> Flutter. Social app z kamerą -> React Native (Expo). Desktop app -> Tauri.

PWA 2024 — co możliwe bez natywnego kodu?

PWA capabilities 2024: File System Access API: showOpenFilePicker(), showSaveFilePicker(). Odczyt/zapis plików. Chrome + Edge. Web Share API: navigator.share({title, text, url}). Udostępnianie natywnie. Background Sync: SyncManager. Synchronizacja gdy offline. Workbox. Periodic Background Sync: powtarzalna synchronizacja. Chrome. Push Notifications: PushManager.subscribe(). Service Worker push event. Działają nawet gdy app zamknięta. Web Bluetooth: navigator.bluetooth.requestDevice(). Połącz z BLE urządzeniami. Chrome. Web USB: navigator.usb.requestDevice(). Web Serial: navigator.serial.requestPort(). WebNFC: navigator.nfc — odczyt NFC tagów. Chrome Android. Badging API: navigator.setAppBadge(count). Licznik na ikonie. Desktop i mobile. Window Controls Overlay: custom title bar. Installed apps. Vibration API: navigator.vibrate([200, 100, 200]). Web Speech API: SpeechRecognition. Głosowe wejście. Geolocation: navigator.geolocation.getCurrentPosition(). Dokładna lokalizacja. Media Session API: MediaSession.metadata. Kontrolki powiadomień. Clipboard: navigator.clipboard.writeText(). Paste bez pozwolenia. Screen Wake Lock: navigator.wakeLock.request('screen'). Ekran nie gasi się. Contact Picker: navigator.contacts.select(). iOS Safari 14.5+. PWA limity: brak Background App Refresh (iOS). Brak Bluetooth stabilny (iOS). Brak Push natywnych (iOS — od 16.4). Brak Face ID / Touch ID bezpośrednio.

Expo i React Native deep link, push notifications i OTA updates?

Expo EAS (Expo Application Services): EAS Build — cloud build. EAS Submit — do App Store/Google Play. EAS Update — OTA (over-the-air) updates. EAS CLI: npm install -g eas-cli. eas login. eas build --platform ios. Push Notifications: expo-notifications. import * as Notifications from 'expo-notifications'. Notifications.getExpoPushTokenAsync(). Wyślij przez Expo Push API. APNs + FCM obsłużone. scheduleNotificationAsync: lokalne notyfikacje. setNotificationHandler: jak obsługiwać gdy app otwarta. Deep Linking: expo-linking. Linking.createURL('profile/123'). W app.json: scheme: 'myapp'. myapp://profile/123. Universal Links (iOS) i App Links (Android). expo-router: file-based routing. deep links automatycznie z routes. React Navigation: @react-navigation/native. NavigationContainer linking prop. config.screens = {Profile: 'profile/:id'}. OTA Updates: EAS Update. Expo Updates API. fetch i apply update. Rollout: 5% usersów najpierw. Sprawdź logi. Rollback. Bez review App Store dla JS zmiany. CodePush (Microsoft) alternatywa. Expo Go: test bez buildu. QR code + scan. Nie production. Expo dev builds: własny natywny build z Expo Go-like DX. expo-dev-client. Expo SDK 52 (2024-12): React Native 0.76. New Architecture domyślnie. Expo Router 4. Expo Camera 2. SQLite async API. Expo Modules API dla custom native.

Wyślij zapytanie