Связь со встроенными (UI) веб-просмотрами в существующих приложениях для iOS и Android

Это приложение уже существует в магазинах Apple App Store и Android. Это приложение, которое использует много собственных кода и не является кандидатом для полного html5ed.

Longwinded Описание

Я хочу иметь веб-страницу настроек страниц. Некоторые из этих страниц будут жить локально на мобильном устройстве, а некоторые будут размещаться на удаленном сервере. Собственное приложение должно будет связываться с локальными веб-страницами, чтобы получить и установить информацию на веб-странице с помощью javascript.

Например, первая страница, показанная в WebView / UIWebview, будет локальной страницей индекса. Если удаленный веб-сайт не работает, ссылки на индексной странице на удаленные страницы будут выделены серым цветом. При загрузке WebView родному приложению нужно будет обнаружить доступность этой страницы и отправить javascript на страницу, чтобы седеть кнопки. Аналогично, некоторые изменения настроек, сделанные на локальных веб-страницах, необходимо отправить обратно в приложение Native для обработки.

Краткие и сладкие требования

  • Встраивание удаленных и локальных веб-страниц в веб-просмотр
  • Тезисы будут одинаковыми для Android и iOS
  • Локальные страницы используют JavaScript для получения данных и отправки данных в Native Mobile App

Потенциальные пути решения

A. PhoneGap

Я понимаю, что Phonegap будет хорошо работать для этого, если мое приложение будет полностью веб-приложением. Из моего чтения кажется, что Phonegap не очень нравится быть встроенным в родное приложение для неполного рабочего времени.

Какие? Вы говорите, что это очень легко, и я был крайне дезинформирован? Просветите меня мудрым.

Б. Ролл мой собственный

Я открыт для развертывания собственного решения, однако методы получения и настройки информации через Javascript из Webviews в Native Apps кажутся совершенно разрозненными. Более того, получение, чем настройка (фиктивные URL-адреса для iOS, очень приятный AddJavaScriptInterface для Android). Кроме того, похоже, что этот путь может привести к серьезной головной боли в будущем.

Чего-чего? Ваш друг-гениальный программист сделал сайт, описывающий этот процесс в мучительной детали? Расскажи мне больше.

C. Сторонняя библиотека

Идеальная библиотека сторонних разработчиков, которая делает все, что я хочу (и многое другое!) Существует? Спаси меня от моего невежества.


Решение

В будущем, похоже, проект «Cleaver» от PhoneGap будет лучшим способом сделать это.

Поскольку он еще не готов для Android, кажется, что текущее (раннее июнь '12) лучшее решение для однократного встраивания HTML-кода заключается в использовании схемы поддельного URL-адреса для связи с веб-страницы в родном приложении (обе платформы могут Выполнять JS на странице непосредственно при переходе с родного приложения на веб-страницу).

Для Android это проще сделать. Взгляните на WebView addJavascriptInterface . Вы можете создать свой собственный объект с помощью методов, которые могут быть вызваны непосредственно в javascript HTML.

IOS требует немного сложностей. Лучшим решением для этих типов проблем является пара вещей:

  • Для обратных вызовов в iOS вам нужно будет составить свою собственную схему URL, например native://somehost.com/somepath Когда ваш javascript хочет сообщить код iOS, используйте window.location = 'native://somehost.com/somepath';
  • Задайте делегат UIWebView объекту, который определяет webView: shouldStartLoadWithRequest: navigationType: он будет выглядеть примерно так:

     if ([request.URL.scheme isEqualToString:@"native"]){ if([request.URL.host isEqualToString:@"somehost.com"]) { //Do the code you need to do here, branch off depending //on the path and/or host, you can parse parameters here too return NO; //This will keep UIWebView from trying to actually load //your made up scheme } } return YES; //If the request isn't one you want to intercept return YES/true //so UIWebView will load the page 
  • Чтобы ваш код iOS отправлял информацию или вызывал функции в вашем javascript, вы можете использовать stringByEvaluatingJavaScriptFromString stringByEvaluatingJavaScriptFromString: Это вернет результат выражения javascript, чтобы вы могли также использовать его для получения некоторой информации с самой страницы. Для вызова функции используйте что-то вроде этого

     [webview stringByEvaluationgJavaScriptFromString:@"myJavaScriptFunction();"] 

Вы также можете обрабатывать составленную схему в Android, создавая собственный WebViewClient и переопределяя метод shouldOverrideUrlLoading аналогично вышеописанному выше коду iOS, за исключением обратных вызовов назад, вы возвращаете true если вы обрабатываете URL-адрес, и WebView больше ничего не должен делать, и WebView если вы хотите, чтобы WebView обрабатывал загрузку. Не забудьте создать и назначить настраиваемый WebViewClient для WebView с помощью setWebViewClient . Чтобы вызвать функции javascript в реальном WebView сделайте что-то вроде webview.loadUrl("javascript:myJavaScriptFunction();");

PhoneGap iOS имеет концепцию Cleaver, в которой вы можете встроить веб-представление в собственное приложение для iOS. Здесь хороший пример Рэнди Макмиллан. На стороне Android выполняется работа по обеспечению такой же функциональности. Так что нас еще нет, но мы доберемся туда.