Интеграция Cordova в нативный iOS проект

в 11:48, , рубрики: cordova, cordova/phonegap, ios development, swift 3, WebView, гибридные приложения, разработка мобильных приложений, разработка под iOS

image

Продолжая небольшую серию статей «Crosswalk Project — замена Android WebView», есть смысл разобрать аналогичную задачу для iOS. Основой для интеграции на этот раз был выбран проект Cordova, т.к. он имеет больший функционал и в данном случае лучше подходит для поставленной задачи.

Оба решения и Cordova, и Crosswalk основываются на WKWebView в своей версии для iOS. Поэтому в данном случае прямой заменой системному WebView они не являются, а только расширяют его.

Целевой язык демо-проекта — Swift, но для проекта на Objective-C всё будет аналогично. Не нужно только выполнять последний шаг по адаптации Cordova для использования со Swift.

NB! Для Crosswalk имеется простое руководство по интеграции с помощью Cocoa Pods и есть поддержка основных плагинов Cordova с возможностью расширения.

Существует 2 варианта для встраивания Cordova в ваше приложение:

  1. Встраивание Cordova вручную.
  2. Добавление необходимых компонентов через Cocoa Pods.

NB! На самом деле есть ещё 1 простой вариант. Настроив окружение для Cordova, вы получите рабочий Xcode-проект, который вполне можно использовать отдельно от Cordova для дальнейшей разработки. Только учтите, что этот проект на Objective-C.

Встраивание Cordova вручную

Я рассмотрю сначала первый вариант и добавлю Cordova с необходимыми компонентами вручную. Этот вариант чуть более сложен, но более гибок и позволяет использовать последние версии cordova-ios и плагинов не зависимо от создателей pod'ов.

Использованные версии ПО:

Настройка окружения

Для реализации 1го варианта необходимо сначала установить сам проект Cordova и необходимые утилиты. Процесс установки достаточно простой и подробно описан в документации Cordova, я остановлюсь только на необходимых шагах для создания демо-проекта.

1. Устанавливаем менеджер пакетов npm, с помощью которого далее установим Cordova и необходимые плагины (для установки npm я использовал MacPorts):

sudo port install npm4

2. Устанавливаем непосредственно Cordova:

sudo npm install -g cordova

Аналогично можно установить только cordova-ios:

sudo npm install -g cordova-ios

Это может пригодиться, если вы не планируете работать с остальными платформами. Однако, в этом случае будет чуть менее удобно пользоваться командами в консоли. Например, необходимо будет использовать:

cordova-ios/bin/create

с полным путём вместо короткой команды:

cordova create

NB! Все установленные с помощью npm пакеты будут находится здесь: /opt/local/lib/node_modules/.

3. Далее создаём проект Cordova, переходим в его папку и добавляем целевую платформу iOS:

cordova create cordova_full
cd cordova_full/
cordova platform add ios

Необходимые нам файлы будут находится в папке cordova_full/platforms/ios/. Аналогичный набор с минимальными отличиями мы получим, если использовать непосредственно пакет cordova-ios.

NB! При создании проекта можно указать название приложения и bundle identifier. Подробнее смотрите в документации Cordova.

4. Дополнительно можно установить утилиту plugman для работы с плагинами Cordova:

sudo npm install -g plugman

5. Установим также 2 плагина для отображения сообщений в консоли и работы с системным статус баром, они нам пригодятся для работы. Для этого необходимо перейти в папку с ресурсами для ios и выполнить следующие команды:

plugman install --platform ios --project . --plugin cordova-plugin-console
plugman install --platform ios --project . --plugin cordova-plugin-statusbar

NB! Для желающих работать с тулчейном Ionic Framework (http://ionicframework.com/) и использовать его шаблоны — всё выглядит аналогично.

Создание проекта

1. За основу проекта был взят стандартный шаблон Tabbed Application из Xcode. Созданный демо-проект со всеми ресурсами можно найти на github.

Минимально поддерживаемая Cordova iOS 4.4.0 версия iOS равна 9.0, её же выбираем для демо-проекта.

2. Переносим в наш демо-проект необходимые ресурсы:

  • папку с проектом CordovaLib cordova_full/platforms/ios/CordovaLib/
  • папку с установленными плагинами cordova_full/platforms/ios/HelloCordova/Plugins/
  • конфигурационный файл Cordova cordova_full/platforms/ios/HelloCordova /config.xml
  • папку с ресурсами для web-приложения cordova_full/platforms/ios/www/

NB! После добавления CordovaLib, проверьте в настройках основного проекта во вкладке Build Phases → Compile Sources. Удалите оттуда файлы CordovaLib, чтобы не было конфликтов при сборке.

NB! При добавлении папки с ресурсами www/ необходимо выбрать опцию «Create folder references», чтобы ресурсы располагались по стандартному для Cordova пути.

3. Необходимо настроить демо-проект для корректной сборки:

  • в Build Settings → Other Linker Flags добавить флаг -ObjC
  • в Build Settings → Header Search Paths добавить пути:
    "$(TARGET_BUILD_DIR)/usr/local/lib/include"
    "$(OBJROOT)/UninstalledProducts/include"
    "$(OBJROOT)/UninstalledProducts/$(PLATFORM_NAME)/include"
    "$(BUILT_PRODUCTS_DIR)"

  • в Build Phases → Target Dependencies добавить CordovaLib
  • в Build Phases → Link Binaries with Libraries добавить libCordova.a

NB! Обратите внимание, необходимо добавлять всю строку вместе с кавычками.

В варианте для Objective-C настройка закончена и проект можно использовать.

4. Адаптация для Swift. Проект Cordova iOS изначально был реализован на языке Objective-C и на данный момент не известно про официальные планы по его портированию на Swift. Существует неофициальный порт, но он не закончен.

Однако, нет принципиальной проблемы для использования Cordova в проекте на Swift. Необходимо только добавить Bridging Header для связи мира Swift и Objective-C.

Для этого необходимо создать в проекте .h файл (например, Bridging-Header.h):

#ifndef Bridging_Header_h
#define Bridging_Header_h

#import "CDVViewController.h"

#endif /* Bridging_Header_h */

И добавить в Build Settings -> Objective-C Bridging Header путь к нему:

CordovaEmbedded/Libraries/Bridging-Header.h

5. После этого мы можем использовать Cordova WebView. Например, унаследуем в демо-проекте SecondViewController от CDVViewController вместо UIViewController. И лёгким движением руки наша вторая вкладка превращается в полноценное Cordova приложение.

6. Пара слов о плагинах Cordova. Изначально мы подключили в проект 2 плагина:

  • для отображения сообщений в консоли
  • для работы с системным статус баром

Первый плагин позволяет нам получать сообщения в консоли Xcode в адекватном виде:

CordovaEmbedded[31857:638683] Received Event: deviceready

Второй плагин позволяет сконфигурировать status bar — задать ему стиль, цвет и пр.

Конфигурация плагинов осуществляется в файле config.xml. В используемом шаблоне проекта, status bar изначально прозрачный, с помощью настроек плагина можно изменить его внешний вид и получить прозрачный status bar для первой вкладки и непрозрачный для второй. Это хорошо показывает работоспособность всей интегрированной системы.

Интеграция Cordova в нативный iOS проект - 2

Добавление необходимых компонентов через Cocoa Pods

1. Для иллюстрации подключения Cordova через CocoaPods возьмём тот же самый шаблон проекта Tabbed Application из Xcode. Созданный демо-проект со всеми ресурсами можно найти на github.

2. Создадим pod файл с помощью команды pod init и добавим в него pod'ы:

pod 'Cordova' # Cordova framework and plugins
pod 'CordovaPlugin-console'
pod 'cordova-plugin-camera'
pod 'cordova-plugin-contacts'
pod 'cordova-plugin-device'
pod 'cordova-plugin-device-orientation'
pod 'cordova-plugin-device-motion'
pod 'cordova-plugin-globalization'
pod 'cordova-plugin-geolocation'
pod 'cordova-plugin-file'
pod 'cordova-plugin-media-capture'
pod 'cordova-plugin-network-information'
pod 'cordova-plugin-splashscreen'
pod 'cordova-plugin-inappbrowser'
pod 'cordova-plugin-file-transfer'
pod 'cordova-plugin-statusbar'
pod 'cordova-plugin-vibration'
pod 'cordova-plugin-wkwebview-engine'
pod 'phonegap-ios-template' # Cordova template 

NB! Добавляются все плагины, т.к. они используются в шаблоне с ресурсами phonegap-ios-template. Практически можно добавить только нужные, но тогда необходимо будет скорректировать config.xml в шаблоне.

3. Устанавливаем pod'ы командой pod install и открываем полученный .xcworkspace. Далее необходимо выполнить шаг 4 из предыдущего раздела, по адаптации проекта для использования с языком Swift.

4. Сейчас есть проблема с конфигурацией и при сборке проект не находит все нужные заголовки. Решить это можно добавив в Build Settings → User Header Search Paths путь (с флагом recursive):

"${PODS_ROOT}"

5. — 6. Для иллюстрации работоспособности Cordova можно повторить шаги 5 и 6 из предыдущего раздела. Всё работает аналогично.

Выводы и полезные ресурсы

Вариант с подключением Cordova вручную не сильно сложнее варианта с использованием Cocoa Pods в данном случае, но более гибок и позволяет использовать последние версии cordova-ios и плагинов.

А вот при использовании Cocoa Pods есть несколько минусов:

  • нет возможности обновиться на нужную версию Cordova iOS или плагина;
  • всё-равно необходимо производить конфигурацию проекта;
  • необходимо изменять конфигурацию Cordova в pod-проекте.

По большому счёту, основные минусы заключаются в не очень хорошей поддержке pod'ов для Cordova :)

Дополнительно про интеграцию Cordova WebView в нативный iOS проект можно изучить:

NB! Обратите внимание, что официальная документация по интеграции несколько устарела и может иметь лишние или отсутствующие шаги.

Автор: comhot

Источник

Поделиться

* - обязательные к заполнению поля