Это старая версия документа!


Ionic, Cordova + Ionic, Capacitor

Сам по себе Ionic - это набор веб-компонентов заточенных под использоватние на мобильных устройствах. Его можно спокойно использовать на любых веб-страницах.

Cordova + Ionic - Это Cordova-приложение. И тут архитектуру диктует именно Cordova. С этим связано то, что прложение получается тяжелым и медленным. А также то что вносить измменения в нативную часть очень тяжело. Я в своё время модифицировал плагин пуш уведомлений, а плагин Apllepay добавил в магазин плагинов. (Сразу оговорюсь, не я автор плагина Apple Pay. Я только его нашел, доработал, и добавил в магазин.)

[https://capacitorjs.com/docs/updating/3-0#switch-to-automatic-android-plugin-loading|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

https://capacitorjs.com/docs/apis/camera

$ npm install @capacitor/camera
$ npx cap sync

https://capacitorjs.com/docs/apis/filesystem

$ npm install @capacitor/filesystem
$ npx cap sync

https://capacitorjs.com/docs/apis/preferences

$ npm install @capacitor/preferences
$ npx cap sync

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

Commands

Очень простые команды для работы с Ionic в Visual Studio Code:

  1. ionic start - создать темплейт ионик апп с нуля
  2. ionic serve - запускать мобапп с иоником в браузере
  3. ionic generate - создать новые фичи к мобаппу - directive class page component service module guard

Для деплоя на мобайл:

  1. ionic build / ionic build –prod - сбилдить апп (если билдишь для прода то он включает strict режим и ругается если есть вызов несуществующих методов, используешь any и надо это пофиксить)
  2. ionic cap add android - создать апп для андроида (1 раз так сделать)
  3. ionic cap copy - скопировать сбилженную папку веба в папку для андроида
  4. ionic cap sync - это чтобы синкнуть из андроид папки изменения (добавление нового плагина) назад в веб код
  5. ionic cap open android - открыть в Андроид студио проект андроида сгенеренный или самому открыть
  6. ng add @angular/pwa - сделать свой апп PWA (добавляется service worker, app manifest + иконки)