- PVSM.RU - https://www.pvsm.ru -
Продолжая небольшую серию статей «Crosswalk Project — замена Android WebView [1]», есть смысл разобрать аналогичную задачу для iOS. Основой для интеграции на этот раз был выбран проект Cordova, т.к. он имеет больший функционал и в данном случае лучше подходит для поставленной задачи.
Оба решения и Cordova, и Crosswalk основываются на WKWebView в своей версии для iOS. Поэтому в данном случае прямой заменой системному WebView они не являются, а только расширяют его.
Целевой язык демо-проекта — Swift, но для проекта на Objective-C всё будет аналогично. Не нужно только выполнять последний шаг по адаптации Cordova для использования со Swift.
NB! Для Crosswalk имеется простое руководство по интеграции [2] с помощью Cocoa Pods и есть поддержка основных плагинов Cordova [3] с возможностью расширения.
Существует 2 варианта для встраивания Cordova в ваше приложение:
NB! На самом деле есть ещё 1 простой вариант. Настроив окружение для Cordova, вы получите рабочий Xcode-проект, который вполне можно использовать отдельно от Cordova для дальнейшей разработки. Только учтите, что этот проект на Objective-C.
Я рассмотрю сначала первый вариант и добавлю Cordova с необходимыми компонентами вручную. Этот вариант чуть более сложен, но более гибок и позволяет использовать последние версии cordova-ios и плагинов не зависимо от создателей pod'ов.
Использованные версии ПО:
Для реализации 1го варианта необходимо сначала установить сам проект Cordova и необходимые утилиты. Процесс установки достаточно простой и подробно описан в документации Cordova [5], я остановлюсь только на необходимых шагах для создания демо-проекта.
1. Устанавливаем менеджер пакетов npm, с помощью которого далее установим Cordova и необходимые плагины (для установки npm я использовал MacPorts):
sudo port install npm4
2. Устанавливаем непосредственно Cordova:
sudo npm install -g cordova
Аналогично можно установить только cordova-ios:
sudo npm install -g cordova-ios
Это может пригодиться, если вы не планируете работать с остальными платформами. Однако, в этом случае будет чуть менее удобно пользоваться командами в консоли [6]. Например, необходимо будет использовать:
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 [7].
Минимально поддерживаемая Cordova iOS 4.4.0 версия iOS равна 9.0, её же выбираем для демо-проекта.
2. Переносим в наш демо-проект необходимые ресурсы:
NB! После добавления CordovaLib, проверьте в настройках основного проекта во вкладке Build Phases → Compile Sources. Удалите оттуда файлы CordovaLib, чтобы не было конфликтов при сборке.
NB! При добавлении папки с ресурсами www/ необходимо выбрать опцию «Create folder references», чтобы ресурсы располагались по стандартному для Cordova пути.
3. Необходимо настроить демо-проект для корректной сборки:
"$(TARGET_BUILD_DIR)/usr/local/lib/include"
"$(OBJROOT)/UninstalledProducts/include"
"$(OBJROOT)/UninstalledProducts/$(PLATFORM_NAME)/include"
"$(BUILT_PRODUCTS_DIR)"
NB! Обратите внимание, необходимо добавлять всю строку вместе с кавычками.
В варианте для Objective-C настройка закончена и проект можно использовать.
4. Адаптация для Swift. Проект Cordova iOS изначально был реализован на языке Objective-C и на данный момент не известно про официальные планы по его портированию на Swift. Существует неофициальный порт [8], но он не закончен.
Однако, нет принципиальной проблемы для использования 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 для первой вкладки и непрозрачный для второй. Это хорошо показывает работоспособность всей интегрированной системы.
1. Для иллюстрации подключения Cordova через CocoaPods возьмём тот же самый шаблон проекта Tabbed Application из Xcode. Созданный демо-проект со всеми ресурсами можно найти на github [7].
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 есть несколько минусов:
По большому счёту, основные минусы заключаются в не очень хорошей поддержке pod'ов для Cordova :)
Дополнительно про интеграцию Cordova WebView в нативный iOS проект можно изучить:
NB! Обратите внимание, что официальная документация по интеграции несколько устарела и может иметь лишние или отсутствующие шаги.
Автор: comhot
Источник [12]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/ios-development/257463
Ссылки в тексте:
[1] Crosswalk Project — замена Android WebView: https://habrahabr.ru/post/308538
[2] руководство по интеграции: https://crosswalk-project.org/documentation/ios/quick_start_guide.html
[3] плагинов Cordova: https://crosswalk-project.org/documentation/ios/cordova_plugin_support.html
[4] Cordova iOS 4.4.0: http://cordova.apache.org/announcements/2017/04/26/ios-release.html
[5] документации Cordova: http://cordova.apache.org/#getstarted
[6] командами в консоли: http://cordova.apache.org/docs/en/latest/guide/platforms/ios/index.html#platform-centered-workflow
[7] github: https://github.com/yaroslav-v/cordova-embedded-ios
[8] неофициальный порт: https://github.com/masahirosuzuka/cordova.swift
[9] Embed Cordova in native apps → iOS WebViews: https://cordova.apache.org/docs/en/latest/guide/platforms/ios/webview.html
[10] Embedding the Webview: http://docs.phonegap.com/develop/1-embed-webview/ios/
[11] Репозиторий с pod файлами: https://github.com/phonegap/phonegap-webview-ios
[12] Источник: https://habrahabr.ru/post/330508/
Нажмите здесь для печати.