Comunicazione con visualizzazioni Web incorporate (UI) nelle app iOS e Android esistenti

Question

Questa app esiste già negli store Apple App store e Android. È un'app che utilizza molto codice nativo e non è candidata per essere completamente html5ed.

longwinded Descrizione

voglio avere una serie basata sul Web di pagine delle impostazioni. Alcune di queste pagine vivranno localmente sul dispositivo mobile e alcune saranno ospitate su un server remoto. L'app nativa dovrà comunicare con le pagine Web locali per ottenere e impostare le informazioni nella pagina Web utilizzando javascript.

Ad esempio, la prima pagina visualizzata in WebView/UIWebview sarà una pagina di indice locale. Se il sito Web remoto è inattivo, i collegamenti nella pagina dell'indice alle pagine remote saranno disattivati. Durante il caricamento di WebView, l'app nativa dovrà rilevare la raggiungibilità di quella pagina e inviare javascript alla pagina per rendere ombreggiati i pulsanti. Allo stesso modo, alcune modifiche alle impostazioni effettuate nelle pagine Web locali devono essere nuovamente inviate all'app nativa per l'elaborazione.

Requisiti breve e dolce Sintesi

• incorporare pagine web remote e locali in una WebView
• tesi pagine web saranno gli stessi sia per Android e iOS
• pagine locali utilizzano Javascript per ottenere dati da e inviare i dati all'app mobile nativa

potenziali soluzioni percorsi

A. PhoneGap

mi rendo conto che PhoneGap avrebbe funzionato bene per questo se la mia domanda era del tutto una web app. Dalla mia lettura sembra che a Phonegap non piaccia essere incorporato in un'app nativa per il lavoro a tempo parziale.

Cosa? Dici che è davvero facile e che sono stato grossolanamente disinformato? Illumina me oh saggia.

B. rotolare il mio

Sono aperto a rotolare la mia soluzione, tuttavia i metodi per ottenere e impostare le informazioni tramite JavaScript dalle Webviews al Native Apps sembra abbastanza disparati. Più che l'impostazione ottenuta (URL falsi per iOS, molto bello AddJavaScriptInterface per Android). Inoltre, sembra che questo percorso potrebbe portare a un forte mal di testa di manutenzione in futuro.

Cosa dire? Il tuo amico programmatore geniale ha creato un sito web che descrive questo processo in termini strazianti? Dimmi di più.

Biblioteca

C. 3rd Party

La biblioteca 3rd party perfetto che fa tutto quello che voglio (e più!) Esiste? Salvami dalla mia ignoranza.

---

decisione

In futuro, sembra che progetto 'Cleaver' di PhoneGap sarà il modo migliore per farlo.

Dal momento che non è ancora pronto per Android, sembra che la soluzione migliore (all'inizio di giugno '12) per write-once-embedded-HTML sia quella di utilizzare uno schema di URL falso per comunicare dalla pagina web all'app nativa (entrambe le piattaforme possono eseguire direttamente JS sulla pagina quando si passa dall'app nativa alla pagina Web).

Answer 1

Per Android questo è più semplice da fare. Dai un'occhiata al metodo addJavascriptInterface. Puoi creare il tuo oggetto con metodi che possono essere chiamati direttamente nel javascript HTML.

iOS richiede un po 'di ingannevolezza. La soluzione migliore per questi tipi di problemi è un paio di cose:

• Per callback per iOS che sarà necessario per rendere in pratica il proprio schema URL come native://somehost.com/somepath Quando il tuo javascript vuole informare l'utilizzo di codice di iOS window.location = 'native://somehost.com/somepath';

• impostare il UIWebView delegato a un oggetto che definisce webView:shouldStartLoadWithRequest:navigationType: essa sarà simile a questa

  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 
  

• per avere il codice di iOS inviare funzioni di informazione o di chiamata in j Avascript è possibile utilizzare WebView stringByEvaluatingJavaScriptFromString:. Ciò restituirà il risultato di un'espressione javascript in modo da poterlo utilizzare anche per ottenere alcune informazioni dalla pagina stessa. Per chiamare un uso funzione di qualcosa di simile

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

È inoltre possibile gestire il sistema costituito in Android con la creazione di un custom WebViewClient e l'override del metodo shouldOverrideUrlLoading in modo simile al codice di iOS sopra, tranne le chiamate di ritorno sono a ritroso , si restituisce true se si gestisce l'URL e il WebView non dovrebbe fare altro e false se si desidera che il WebView gestisca il caricamento. Assicurati di creare e assegnare l'WebViewClient personalizzato a WebView utilizzando setWebViewClient. Per chiamare le funzioni javascript sull'attuale WebView fare qualcosa come webview.loadUrl("javascript:myJavaScriptFunction();");

Answer 2

PhoneGap iOS ha un concetto chiamato Cleaver in cui è possibile incorporare la visualizzazione Web in un'app nativa per iOS. Randy McMillian ha un buon esempio here. Sul lato Android si sta lavorando per portare la stessa funzionalità. Quindi non siamo ancora arrivati, ma ci arriveremo.