О гибридных и нативных приложениях, их преимуществах и недостатках уже написано немало. В том числе много написано о Кордове. Но со временем все меняется и те возможности и методы, которые работали раньше, сейчас недоступны. Поэтому сегодня хочу обратить внимание на актуальные особенности разработки мобильного приложения под iOS с помощью Cordova!
Цель: Перенести готовое приложение на Angular в мобильное приложение.
Минимально необходимый стек:
1. Приложение Angular
2. Серверное приложение (nodejs, экспресс)
2. Приложение Cordova
3. Xcode
Как установить Cordova, создать приложения Angular и Cordova подробно описано в соответствующей документации (для Angular/для Cordova), поэтому не будем тратить на это время, а сразу перейдем к важным практическим особенностям, которые почти никто не говорит.
Действия в приложении Angular:
1. Создайте приложение и просмотрите каталог «dist».
ng build --configuration production
2. Переименуйте «dist» в «www».
3. Скопируйте каталог «www».
Действия в приложении Cordova:
1. замените каталог «www» на скопированный.
2. добавьте плагины Cordova:
- плагины Cordova добавьте Cordova-Plugin-Device
- плагины Cordova добавьте Cordova-plugin-ionic-webview
- плагины Cordova добавляют Cordova-Plugin-Splashscreen
- Плагины Cordova добавляют Cordova-Plugin-Statusbar
3. Cordova build ios (для компиляции кода из «www» в «platforms/ios»)
Действия в Xcode:
Затем вам нужно открыть Xcode и запустить файлы с «платформ/ios». Не волнуйтесь, если это не начнется сразу. Если вы новичок в Xcode, вам нужно сначала установить его (создать учетную запись разработчика Apple, подписать свое приложение и т. д.).
После этого вы можете открыть приложение Cordova в симуляторе или на своем устройстве.
Действия во внутреннем приложении:
Следующее, с чем вы можете столкнуться, — это совместное использование ресурсов между источниками (CORS).
Совместное использование ресурсов между источниками (CORS) — это механизм, основанный на HTTP-заголовке, который позволяет серверу указывать любые источники (домен, схему или порт), кроме своего собственного, из которых браузер должен разрешать загрузку ресурсов. CORS также опирается на механизм, с помощью которого браузеры делают предварительный запрос к серверу, на котором размещен ресурс из другого источника, чтобы убедиться, что сервер разрешит фактический запрос. В этой предварительной проверке браузер отправляет заголовки, указывающие метод HTTP, и заголовки, которые будут использоваться в фактическом запросе.
Это решилось добавлением в ваш бэкэнд этого кода:
let allowedOrigins = ["ionic://your_domain", "app://your_domain"];
Ваше созданное приложение для iOS не поддерживает протоколы http/https и использует «ionic» или «app».
Действия в config.xml:
Приложение Cordova содержит файл config.xml для более подробной настройки (значок приложения, заставка, строка состояния и т. д.). Но и тут есть нюансы, на которые стоит обратить внимание.
1. Для подключения бека и фронтенда нужно добавить:
<preference name=”hostname” value=”your_production_domain” />
2. заставка (занимает только центр вашего изображения)
3. значок приложения (необходимо добавить все типы значков)
4. от Iphone 11 вам нужна прокладка сверху «тела»
5. После всех изменений в config.xml нужно выполнить команду — «cordova build ios» и снова пересобрать в Xcode.
Я прикрепил свой пример config.xml, так как это очень важная часть.
<?xml version='1.0' encoding='utf-8'?>
<widget id="your_id" version="1.0.0">
<name>Name</name>
<description>description</description>
<author email="author">
author
</author>
<content src="index.html" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<preference name="scheme" value="app" />
<preference name="hostname" value="your_domain" />
<preference name="ScrollEnabled" value="true" />
<platform name="ios">
<splash src="res/screen/ios/Default@3x~universal~anyany.png" />
<icon src="res/ios/[email protected]" width="180" height="180" />
<!-- iOS 7.0+ -->
<!-- iPhone / iPod Touch -->
<icon src="res/ios/icon-60.png" width="60" height="60" />
<icon src="res/ios/[email protected]" width="120" height="120" />
<!-- iPad -->
<icon src="res/ios/icon-76.png" width="76" height="76" />
<icon src="res/ios/[email protected]" width="152" height="152" />
<!-- Spotlight Icon -->
<icon src="res/ios/icon-40.png" width="40" height="40" />
<icon src="res/ios/[email protected]" width="80" height="80" />
<!-- iOS 6.1 -->
<!-- iPhone / iPod Touch -->
<icon src="res/ios/icon.png" width="57" height="57" />
<icon src="res/ios/[email protected]" width="114" height="114" />
<!-- iPad -->
<icon src="res/ios/icon-72.png" width="72" height="72" />
<icon src="res/ios/[email protected]" width="144" height="144" />
<!-- iPad Pro -->
<icon src="res/ios/icon-167.png" width="167" height="167" />
<!-- iPhone Spotlight and Settings Icon -->
<icon src="res/ios/icon-small.png" width="29" height="29" />
<icon src="res/ios/[email protected]" width="58" height="58" />
<icon src="res/ios/[email protected]" width="87" height="87" />
<!-- iPad Spotlight and Settings Icon -->
<icon src="res/ios/icon-50.png" width="50" height="50" />
<icon src="res/ios/[email protected]" width="100" height="100" />
<!-- iTunes Marketing Image -->
<icon src="res/ios/icon-1024.png" width="1024" height="1024" />
</platform>
<preference name="SplashScreenDelay" value="3000" />
</widget>
Я постарался описать все особенности, с которыми столкнулся при создании мобильного приложения iOS с использованием Angular и Cordova. Я думаю, что это действительно хорошая возможность превратить ваше веб-приложение в мобильное приложение.
