Кросплатформна розробка мобільного застосунку на Ionic
Ionic — фреймворк для створення мобільних застосунків на стандартних веб-технологіях: HTML, CSS, TypeScript. Працює поверх Angular, React або Vue. Нативний доступ до пристрою — через Capacitor (рекомендовано) або застарілий Cordova. Підходить для команд з веб-бекграундом, яким потрібно випустити застосунок в App Store та Google Play, не найнявши окремих iOS та Android розробників.
Коли Ionic — розумний вибір
Застосунок орієнтований на контент та форми, а не на важку графіку. Логіка вже написана на TypeScript та працює в браузері. Команда знає Angular/React краще, ніж Swift або Kotlin. Застосунок для b2b-сегменту, де користувацька анімація некритична.
Ionic — не кращий вибір для: ігор, застосунків з обробкою відео в реальному часі, застосунків де потрібен точний нативний UX (складні жести, користувацькі переходи як в Instagram).
Архітектура проекту
ionic start myApp tabs --type=angular
cd myApp
ionic capacitor add android
ionic capacitor add ios
Структура: стандартне Angular/React застосунку з компонентами Ionic. При збиранні ionic build генерує статичні веб-ассети, Capacitor копіює їх у нативний WebView проект.
Ключові компоненти Ionic UI: IonTabs, IonModal, IonActionSheet, IonInfiniteScroll. Компоненти автоматично адаптуються до платформи — IonButton виглядає по-різному на iOS (borderless) та Android (Material), але цією поведінкою можна керувати через mode="md" або mode="ios".
Нативні можливості через Capacitor
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
import { Geolocation } from '@capacitor/geolocation';
import { PushNotifications } from '@capacitor/push-notifications';
// Фото
const photo = await Camera.getPhoto({
quality: 90,
allowEditing: false,
resultType: CameraResultType.Uri,
source: CameraSource.Camera
});
// Геолокація
const position = await Geolocation.getCurrentPosition({
enableHighAccuracy: true,
timeout: 10000
});
// Push-повідомлення
await PushNotifications.requestPermissions();
await PushNotifications.register();
PushNotifications.addListener('registration', (token) => {
sendTokenToServer(token.value);
});
Офіційні плагіни Capacitor закривають 90% типичних потреб: Camera, Filesystem, Preferences, Network, StatusBar, Haptics, Browser, Clipboard. Решта — сторонні npm-плагіни або користувацький нативний плагін на Kotlin/Swift.
Продуктивність: реальність
Ionic застосунок працює в WKWebView (iOS) та WebView (Android). JavaScript-код виконується в механізмі браузера. На сучасних пристроях (iPhone 12+, Pixel 6+) розбіжність із нативним застосунком складно помітити. На бюджетному Android (2 ГБ RAM, Android 10) — IonList з 500 елементами та складною розміткою починає гальмувати. ion-virtual-scroll (віртуальний скролл) вирішує проблему для довгих списків.
Для прискорення: ChangeDetectionStrategy.OnPush в Angular, мемоізація в React, ленива загрузка модулів через loadChildren або React.lazy.
Типові проблеми
Клавіатура перекриває input на Android. Ionic використовує власний scroll-контейнер всередині WebView. IonContent scrollEvents + ionInput фокус вимагають правильної поведінки keyboard-attach. Рішення через плагін @capacitor/keyboard та KeyboardResize.Body.
Повільний cold start. WebView ініціалізується при першому запуску. На Android у production bundle додається ~300-500 мс до часу запуску порівняно з нативним застосунком. Зменшується через android:largeHeap="true" та Pre-warming WebView (доступно з Android 10).
Огляд App Store. Apple не проти Ionic-застосунків, але відхилює за 4.2 Minimum Functionality якщо застосунок — просто обгортка над мобільною версією сайту. Застосунок повинен використовувати хоча б одну нативну фічу (камера, push, геолокація) та давати цінність саме як застосунок.
Розробка Ionic-застосунку: MVP з 5-8 екранів — 4-8 тижнів. Повноцінне b2b-застосунку з оффлайн-режимом та пушами — 3-6 місяців. Вартість розраховується індивідуально після аналізу вимог.