Хотя запуск нового приложения Cordova — довольно простой процесс, я был немного удивлен сложностью правильного встраивания веб-просмотра Cordova в собственное приложение. Ресурсы в Интернете по этой теме не особенно легко найти, и в большинстве случаев они устарели. Вот несколько ссылок и пояснений, которые должны облегчить вам жизнь, если вы собираетесь встроить Cordova 5+!
Как это работает?
При встраивании веб-представления Cordova процесс заключается в следующем:
- Создайте проект Cordova в папке и добавьте нужные вам платформы.
- Импортируйте библиотеку Cordova в свое приложение для iOS или Android.
- Импортируйте / создайте символическую ссылку на папку www вашего приложения Cordova и код плагинов Cordova, как с платформ, так и с вашей ОС. Вы должны не создавать символическую ссылку на исходную папку www, а на папку в platforms/ios или platforms/android. Это связано с тем, что Cordova применяет к файлам на platforms/ некоторую магию.
- Импортируйте/символизируйте файл config.xml, расположенный в папке platform/‹ваша ОС›.
- Создайте веб-представление Cordova в своем приложении для iOS или Android.
В любом случае, вашей отправной точкой должна быть Документация Cordova.
В любой момент, чтобы убедиться, что Cordova правильно встроена, вы можете просмотреть журналы своего приложения, чтобы узнать, инициализированы ли подключаемые модули Cordova.
Например, подключаемый модуль устройства установлен по умолчанию на всех проектах Cordova. В отладчике JS введите устройство, и если вы не видите нулевых значений, ваши плагины работают.
Не забудьте вызвать кордову, чтобы подготовиться
Каждый раз, когда вы вносите изменения в свое JS-приложение, эти изменения также должны применяться в нативном приложении. Это то, что делает Cordova prepare. Шаг подготовки также запускается, если вы запускаете Cordova build или Cordova Run. Если вы внесли изменения только в JS-часть приложения, обязательно вызовите команду Cordova Prepare перед повторным запуском приложения с помощью XCode или Android Studio.
Как общаться между Javascript и нативной частью?
Cordova уже реализует мост между Javascript и нативным приложением благодаря механизму плагинов.
Андроид
В Android, если вы хотите вызывать нативные методы, у вас есть два решения:
- Вы можете свернуть свой собственный плагин
- Или вы можете использовать JavascriptInterface. Его очень легко и быстро использовать без необходимости создавать собственный плагин. См. документацию Google об этом: https://developer.android.com/guide/webapps/webview.html
iOS
Для iOS сложнее раскрыть методы, не создавая собственный плагин. Вы можете попытаться переопределить делегат Cordova для веб-представления, а затем переопределить webView:shouldStartLoadWithRequest:navigationType:, но вы, вероятно, сломаете вещи Cordova (например, загрузку плагинов или навигацию) и потеряете много времени, выясняя это. Создание собственного плагина Cordova кажется лучшим способом сделать все правильно.
Для вызова Javascript из вашего родного приложения iOS лучше всего подходит stringByEvaluatingJavaScriptFromString:.
См. документацию по UIWebView здесь и там.
Особенности Android
Более подробное пошаговое руководство
Прочтите эту отличную статью в блоге о встраивании Cordova в Android.
Вы увидите, как подключить банку Cordova (это шаг (2) списка), сделать символические ссылки
на папку www и папки плагинов Java (шаг (3)), сделать символическую ссылку на файл config. xml с платформ/андроидов (шаг (4)).
Кордова/веб-просмотр не работает при сборке для выпуска
Если ваше родное приложение для Android использует Proguard для минимизации/обфускации приложения, убедитесь, что вы добавили исключения. В противном случае Proguard удалит код, связанный с веб-представлением, и, в частности, объявленные вами методы JavascriptInterface!
См. этот Поток переполнения стека, чтобы исключить Cordova и связанные классы из зачистки Proguard.
Производительность при запуске
Веб-просмотр загружается быстро на iOS (несколько миллисекунд), но на Android дольше. Мое решение состояло в том, чтобы создать загрузчик в собственном приложении Android, отображаемом под веб-представлением Cordova.
Если фреймворк JS, который вы используете для создания своего приложения, слишком долго загружается, вы можете реплицировать этот загрузчик с помощью необработанного CSS, чтобы пользователь мог видеть загрузчик во время начальной загрузки фреймворка.
