Utilizzo della stessa base di codice per phonegap e web?

Question

È consigliabile utilizzare la stessa base di codice per la nostra app Web mobile e l'app per PhoneGap? Sono pensati per essere simili, la versione di PhoneGap ci lascia solo fare di più. Possiamo rilevare se non è in esecuzione su PhoneGap e sequestrare le chiamate all'API phonegap o ha più senso separarle.

Answer 1

Vorrei utilizzare lo stesso codice di base. L'intero punto di PhoneGap è convertire i tuoi siti mobili in app. Non è così difficile rilevare le funzionalità e lo schermo immobiliare a seconda dei casi. Il problema con codebase separati è solitamente il costo della gestione doppia dei tuoi contenuti e stili. Se necessario, puoi separare quelli in una risorsa condivisa e raggrupparli in fase di runtime/accesso, ma personalmente continuerei a tenere tutto insieme.

Questo blog copre il problema di rilevamento (vedere anche i commenti): http://bennolan.com/2011/08/22/phonegap-detection.html. Il punto cruciale è però if (window.PhoneGap){...}

Answer 2

Certo, è possibile utilizzare la maggior parte della stessa base di codice. Alcune API phonegap sono le stesse in html5 (ad esempio localStorage) quindi non c'è differenza nel codice.

Se si utilizza il servizio di generazione di phonegap, verrà aggiunto il file di script phonegap.js/cordova.js alla radice del progetto. Basta includerlo nel tuo html tutto il tempo. Poi si può rilevare se l'applicazione è in esecuzione all'interno di PhoneGap:

var isPhonegap = function() { 
    return (typeof(cordova) !== 'undefined' || typeof(phonegap) !== 'undefined'); 
} 

if (isPhonegap()) { 
    // phonegap.js/cordova.js exists.. now let's handle the onDeviceReady event 
} else { 
    // in-browser 
} 

Se avete bisogno di un po 'di codice di avvio comuni, metterlo in una funzione e chiamare questa funzione dal gestore onDeviceReady e il blocco altro sopra.

Se l'API di phonegap che stai chiamando non ha esattamente lo stesso nome di html5 (perché ha il prefisso Moz * o WebKit *, per esempio), basta avvolgere entrambi all'interno di un nuovo nome. Per esempio:

var requestFileSystem = (isPhonegap() ? requestFileSystem : window.WebKitRequestFileSystem); 

Se l'API PhoneGap si sta utilizzando HTML5 davvero non ha alcun equivalente, cercare di duplicare la funzionalità da soli in javascript, se possibile, altrimenti si perde la funzionalità solo nel browser. Ma assicurati che degrada abbastanza bene senza quella funzione.

Nota: per testare le funzioni dei dispositivi mobili come l'accelerometro, la geolocalizzazione, ecc. Nel browser, verificare Ripple Chrome extension.

Answer 3

ho capito un modo per mantenere intatta la base di codice web ...

Il problema attuale con l'utilizzo del costruito in manifestazione deviceready, è che quando la pagina viene caricata, non si ha modo di raccontare l'app: "Ehi questo NON funziona su un dispositivo mobile, non è necessario attendere che il dispositivo sia pronto per l'avvio".

1. Nella parte nativa del codice, ad esempio per iOS, in MainViewController.m c'è un metodo viewDidLoad, vi mando una variabile javascript che poi ho verificare la presenza nel codice web, se tale variabile è intorno , aspetterò per avviare il codice per la mia pagina fino a quando tutto è pronto (ad esempio, il navigatore di geolocalizzazione)

   Sotto MainViewController.m:

   - (void) viewDidLoad 
   { 
       [super viewDidLoad]; 
       NSString* jsString = [NSString stringWithFormat:@"isAppNative = true;"]; 
       [self.webView stringByEvaluatingJavaScriptFromString:jsString]; 
   } 
   

2. indice.html il codice va in questo modo:

   function onBodyLoad() 
   { 
       document.addEventListener("deviceready", onDeviceReady, false); 
   } 
   
   function onDeviceReady(){; 
       myApp.run(); 
   } 
   
   try{ 
       if(isAppNative!=undefined); 
   }catch(err){ 
       $(document).ready(function(){ 
        myApp.run(); 
       }); 
   }