Comunicación con vistas web integradas (UI) en aplicaciones iOS y Android existentes

Question

Esta aplicación ya existe en la tienda de aplicaciones de Apple y en los mercados de Android. Es una aplicación que usa mucho código nativo y no es candidata para ser completamente html5ed.

Descripción longwinded

Quiero tener una serie basada en la Web de páginas de opciones. Algunas de estas páginas vivirán localmente en el dispositivo móvil, y algunas se alojarán en un servidor remoto. La aplicación nativa necesitará comunicarse con las páginas web locales para obtener y establecer información en la página web mediante javascript.

Por ejemplo, la primera página que se muestra en WebView/UIWebview será una página de índice local. Si el sitio web remoto está inactivo, los enlaces en la página de índice a las páginas remotas se atenuarán. Al cargar WebView, la aplicación nativa deberá detectar la accesibilidad de esa página y enviar javascript a la página para atenuar los botones. Del mismo modo, algunos cambios de configuración realizados en las páginas web locales deben enviarse a la aplicación nativa para su procesamiento.

Requisitos corto y dulce Resumen

• Insertar páginas web remotos y locales en una vista web
• Tesis páginas web serán los mismos tanto para Android y iOS
• páginas locales utilizan JavaScript para obtener datos de y enviar datos a la aplicación móvil nativa

Posible solución Pathways

A. PhoneGap

Soy consciente de que Phonegap que funcionan bien para esto si mi solicitud fue enteramente una aplicación web. Según mi lectura, parece que a Phonegap no le gusta estar integrado en una aplicación nativa para el trabajo a tiempo parcial.

¿Qué? ¿Dices que es realmente fácil y he sido muy mal informado? Ilumíname oh sabio.

B. rollo mi propio

Estoy abierto a rodar mi propia solución, sin embargo, los métodos para obtener y establecer información a través de Javascript de las webviews a la aplicaciones nativas parece bastante dispares. Más que eso, la obtención de la configuración (URL falsas para iOS, muy buena AddJavaScriptInterface para Android). Además, parece que este camino podría conducir a un dolor de cabeza de mantenimiento severo en el futuro.

Di que? Su amigo genio programador ha hecho un sitio web que describe este proceso en detalle insoportable? Dime más. existe

Biblioteca

C. 3rd Party

La biblioteca 3 ª parte perfecta que hace todo lo que quiero (y más!)? Sálvame de mi ignorancia.

---

Decisión

En el futuro, parece que el proyecto de PhoneGap 'Cleaver' será la mejor manera de hacer esto.

Dado que todavía no está listo para Android, parece que la mejor solución actual (principios de junio '12) para escribir una vez es usar un esquema de URL falso para comunicarse desde la página web a la aplicación nativa (ambas plataformas pueden ejecutar JS en la página directamente al pasar de la aplicación nativa a la página web).

Answer 1

Para Android esto es más simple de hacer. Eche un vistazo al método WebViewaddJavascriptInterface. Puede crear su propio objeto con métodos que se pueden invocar directamente en el HTML javascript.

iOS requiere un poco de engaño. La mejor solución para este tipo de problemas es un par de cosas:

• Para devoluciones de llamada para iOS que tendrá que hacer básicamente su propio esquema de URL como native://somehost.com/somepath Cuando el Javascript quiere informar el código IOS uso window.location = 'native://somehost.com/somepath';

• Establecer el delegado UIWebView a un objeto que define webView:shouldStartLoadWithRequest:navigationType: que se verá algo como esto

  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 
  

• para que su código de iOS enviar funciones de información o de llamadas en el j avascript puede usar WebView's stringByEvaluatingJavaScriptFromString:. Esto devolverá el resultado de una expresión javascript para que también pueda usarla para obtener información de la página. Para llamar a un uso función de algo como esto

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

También puede manejar la componían esquema en el Android mediante la creación de una costumbre WebViewClient y reemplazando el método shouldOverrideUrlLoading de forma similar al código de IOS anterior, excepto las llamadas de retorno están al revés , devuelve true si manejó la URL y WebView no debería hacer nada más, y false si desea que WebView se encargue de la carga. Asegúrese de crear y asignar el WebViewClient personalizado al WebView usando setWebViewClient. Para llamar a las funciones de Javascript en el WebView real haga algo como webview.loadUrl("javascript:myJavaScriptFunction();");

Answer 2

PhoneGap iOS tiene un concepto llamado Cleaver donde puede incrustar la vista web en una aplicación iOS nativa. Randy McMillian tiene un buen ejemplo here. En el lado de Android, se está trabajando para ofrecer la misma funcionalidad. Entonces todavía no llegamos, pero llegaremos allí.