.
Ionic, Cordova + Ionic, Capacitor
Сам по себе Ionic - это набор веб-компонентов заточенных под использоватние на мобильных устройствах. Его можно спокойно использовать на любых веб-страницах.
Cordova + Ionic - Это Cordova-приложение. И тут архитектуру диктует именно Cordova. С этим связано то, что прложение получается тяжелым и медленным. А также то что вносить измменения в нативную часть очень тяжело. Я в своё время модифицировал плагин пуш уведомлений, а плагин Apllepay добавил в магазин плагинов. (Сразу оговорюсь, не я автор плагина Apple Pay. Я только его нашел, доработал, и добавил в магазин.)
Capacitor - Это новая реинкарнация этого фреймворка. Тут уже берется любое SPA и запускается в нативном WebView. Тем самым получая лучшее из связки натива и веба. Дальше, при желании, приложение можно модифицировать как со стороны веба, так и со стороны натива. Типичный пример - добавление функционала получения Push-уведомлений на IOS. Там не просто плагин добавляется, там нужно ручками внести изменения в нативную часть
Create application
$ npm install -g @ionic/cli native-run cordova-res $ ionic start photo-gallery tabs --type=angular --capacitor $ cd ./photo-gallery $ npm install @capacitor/camera @capacitor/preferences @capacitor/filesystem
Install modules
@capacitor/camera
https://capacitorjs.com/docs/apis/camera
$ npm install @capacitor/camera $ npx cap sync
@capacitor/filesystem
https://capacitorjs.com/docs/apis/filesystem
$ npm install @capacitor/filesystem $ npx cap sync
@capacitor/preferences
https://capacitorjs.com/docs/apis/preferences
$ npm install @capacitor/preferences $ npx cap sync
@capacitor/motion
https://capacitorjs.com/docs/apis/motion
$ npm install @capacitor/motion $ npx cap sync
https://capacitorjs.com/docs/apis/haptics
$ npm install @capacitor/haptics $ npx cap sync
https://capacitorjs.com/docs/apis/device
$ npm install @capacitor/device $ npx cap sync
@capacitor/assets
https://capacitorjs.com/docs/guides/splash-screens-and-icons
$ npm install @capacitor/assets --save-dev $ npx capacitor-assets generate
ionic-native-sms-retriever-plugin-master
https://github.com/hanatharesh2712/ionic-native-sms-retriever-plugin-master
old:
$ ionic cordova plugin add cordova-plugin-sms-retriever-manager $ ionic cordova plugin add https://github.com/hanatharesh2712/ionic-native-sms-retriever-plugin-master.git
current:
$ npm i cordova-plugin-sms-retriever-manager $ npm i https://github.com/hanatharesh2712/ionic-native-sms-retriever-plugin-master.git
@byteowls/capacitor-sms
https://github.com/moberwasserlechner/capacitor-sms
$ npm i @byteowls/capacitor-sms $ npx cap sync
cordova-plugin-whitelist [DEPRECATED: AllowList]
https://github.com/apache/cordova-plugin-whitelist
$ npm install cordova-plugin-whitelist $ npx cap sync
$ ionic cordova plugin add cordova-sms-plugin $ npm install --save @ionic-native/sms
Commands
Ionic
Очень простые команды для работы с Ionic в Visual Studio Code:
- ionic start - создать темплейт ионик апп с нуля
- ionic serve - запускать мобапп с иоником в браузере
- ionic generate - создать новые фичи к мобаппу - directive class page component service module guard
Для деплоя на мобайл:
- ionic build / ionic build –prod - сбилдить апп (если билдишь для прода то он включает strict режим и ругается если есть вызов несуществующих методов, используешь any и надо это пофиксить)
- ionic cap add android - создать апп для андроида (1 раз так сделать)
- ionic cap copy - скопировать сбилженную папку веба в папку для андроида
- ionic cap sync - это чтобы синкнуть из андроид папки изменения (добавление нового плагина) назад в веб код
- ionic cap open android - открыть в Андроид студио проект андроида сгенеренный или самому открыть
- ng add @angular/pwa - сделать свой апп PWA (добавляется service worker, app manifest + иконки)
Capacitor
$ ionic capacitor build android
Cordova
$