Интеграция Preact с Cordova и Capacitor строится вокруг идеи гибридного приложения: веб-интерфейс, написанный на JavaScript, HTML и CSS, исполняется внутри WebView и получает доступ к нативным возможностям устройства через мост. Preact в этой архитектуре отвечает исключительно за UI-слой и управление состоянием, а Cordova или Capacitor — за упаковку приложения и взаимодействие с платформой.
Preact хорошо подходит для гибридных решений благодаря:
В связке с Cordova или Capacitor Preact используется как обычное SPA-приложение, но с рядом особенностей, связанных с жизненным циклом и доступом к нативным API.
Cordova предоставляет слой плагинов, которые инкапсулируют нативный
код и экспонируют его в JavaScript через объект cordova.
Preact-приложение фактически работает внутри index.html,
загружаемого WebView.
Ключевые моменты инициализации:
deviceready.Типовой порядок загрузки:
cordova.js (генерируется при сборке).deviceready.Пример логики запуска:
document.addEventListener('deviceready', () => {
render(<App />, document.getElementById('app'));
});Cordova предоставляет события жизненного цикла:
pauseresumebackbuttonoffline / onlineВ контексте Preact эти события обычно обрабатываются вне компонентов, а затем пробрасываются в состояние приложения.
Практика:
Такой подход позволяет избежать жёсткой привязки компонентов к Cordova API и сохранить тестируемость.
Плагины Cordova доступны глобально, чаще всего через
navigator, cordova или собственные
пространства имён. В Preact их использование ничем принципиально не
отличается от обычного JavaScript.
Пример доступа к камере:
navigator.camera.getPicture(success, error, options);Рекомендуемые практики:
Cordova накладывает ряд ограничений:
Для Preact это означает:
Capacitor является более современной альтернативой Cordova, ориентированной на актуальные Web API и тесную интеграцию с нативными платформами. В отличие от Cordova, Capacitor:
Preact-приложение в Capacitor разворачивается как обычный веб-проект, а затем подключается к нативной оболочке.
Типовая структура:
src/ — исходный код Preact;dist/ или build/ — собранный бандл;capacitor.config.json — конфигурация платформ;android/, ios/ — нативные проекты.Capacitor загружает статические файлы из каталога сборки, поэтому важно:
webDir;Capacitor предоставляет модульный API:
import { Camera, Network, Device } from '@capacitor/core';Использование внутри Preact:
async/await;Пример:
const info = await Device.getInfo();
setPlatform(info.platform);Такой подход избавляет от глобальных объектов и повышает читаемость кода.
Capacitor использует более декларативную модель:
App.addListener('appStateChange', ...)App.addListener('backButton', ...)Эти события удобно связываются с контекстами или глобальными сторожами состояния, что хорошо сочетается с архитектурой Preact.
Cordova:
Capacitor:
Для Preact Capacitor чаще оказывается предпочтительным вариантом за счёт меньшего количества ограничений и более прозрачного API.
Ключевые аспекты:
memo и useCallback;Особое внимание уделяется:
Preact благодаря своей компактности позволяет достигать высокой отзывчивости даже внутри WebView.
В гибридных приложениях навигация строится поверх клиентской маршрутизации:
preact-router;Особенности:
Для Capacitor и Cordova часто добавляется ручная обработка аппаратной кнопки назад с учётом текущего маршрута.
В гибридных приложениях важно учитывать:
Content Security Policy;Preact не управляет безопасностью напрямую, но архитектура приложения должна учитывать:
Отладка Preact в Cordova и Capacitor проводится:
Разделение логики UI и нативных вызовов значительно упрощает тестирование, позволяя проверять большую часть кода как обычное веб-приложение.
Связка Preact + Cordova или Capacitor формирует трёхслойную модель:
Чёткое разделение ответственности, минимализм Preact и современный API Capacitor или проверенная временем модель Cordova позволяют создавать гибридные приложения с предсказуемым поведением и высокой производительностью.