Различия

Показаны различия между двумя версиями страницы.

--- mobile:ionic [2023/07/14 03:07] – [Install modules] 192.168.1.135
+++ mobile:ionic [2023/07/17 01:08] (текущий) – создано mirocow
@@ Строка 1: / Строка 1: @@
-{{tag>mobile ionic}}
+{{tag>mobile ionic capacitor}}
-====== Ionic ======
+{{backlinks>.}}
+====== 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. Там не просто плагин добавляется, там нужно ручками внести изменения в нативную часть
+  * [[prepaire]]
+  * [[mobile:create-application:ionic]]
+  * [[mobile:create-application:cordova]]
 ====== Create application ======
@@ Строка 13: / Строка 27: @@
 ====== Install modules ======
+  - https://capacitorjs.com/docs/plugins
+  - https://capacitorjs.com/docs/apis
+  - https://capacitorjs.com/docs/plugins/community
+  - https://github.com/orgs/capacitor-community/repositories
+====== @capacitor/camera ======
 https://capacitorjs.com/docs/apis/camera
@@ Строка 19: / Строка 40: @@
 $ npx cap sync
 </code>
+====== @capacitor/filesystem ======
 https://capacitorjs.com/docs/apis/filesystem
@@ Строка 25: / Строка 48: @@
 $ npx cap sync
 </code>
+====== @capacitor/preferences ======
 https://capacitorjs.com/docs/apis/preferences
@@ Строка 31: / Строка 56: @@
 $ npx cap sync
 </code>
+====== @capacitor/motion ======
 https://capacitorjs.com/docs/apis/motion
@@ Строка 38: / Строка 65: @@
 </code>
+https://capacitorjs.com/docs/apis/haptics
+<code bash>
+$ npm install @capacitor/haptics
+$ npx cap sync
+</code>
+https://capacitorjs.com/docs/apis/device
+<code bash>
+$ npm install @capacitor/device
+$ npx cap sync
+</code>
+====== @capacitor/assets  ======
+https://capacitorjs.com/docs/guides/splash-screens-and-icons
+<code bash>
+$ npm install @capacitor/assets --save-dev
+$ npx capacitor-assets generate
+</code>
+====== ionic-native-sms-retriever-plugin-master ======
+https://github.com/hanatharesh2712/ionic-native-sms-retriever-plugin-master
+old:
+<code bash>
+$ ionic cordova plugin add cordova-plugin-sms-retriever-manager
+$ ionic cordova plugin add https://github.com/hanatharesh2712/ionic-native-sms-retriever-plugin-master.git
+</code>
+current:
+<code bash>
+$ npm i cordova-plugin-sms-retriever-manager
+$ npm i https://github.com/hanatharesh2712/ionic-native-sms-retriever-plugin-master.git
+</code>
+====== @byteowls/capacitor-sms ======
+https://github.com/moberwasserlechner/capacitor-sms
+<code bash>
+$ npm i @byteowls/capacitor-sms
+$ npx cap sync
+</code>
+====== cordova-plugin-whitelist [DEPRECATED: AllowList] ======
+https://github.com/apache/cordova-plugin-whitelist
+<code bash>
+$ npm install cordova-plugin-whitelist
+$ npx cap sync
+</code>
+<code bash>
+$ ionic cordova plugin add cordova-sms-plugin
+$ npm install --save @ionic-native/sms
+</code>
+====== 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 ======
+<code bash>
+$ ionic capacitor build android
+</code>
+====== Cordova ======
+<code bash>
+$
+</code>