Кроссплатформенная разработка мобильного приложения на 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 (сложные жесты, custom transitions как у 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 если приложение — просто обёртка над мобильной версией сайта. Приложение должно использовать хотя бы одну нативную фичу (camera, push, geolocation) и давать ценность именно как приложение.
Разработка Ionic-приложения: MVP с 5-8 экранами — 4-8 недель. Полноценное b2b-приложение с оффлайн-режимом и пушами — 3-6 месяцев. Стоимость рассчитывается индивидуально после анализа требований.