Verwenden der gleichen Codebasis für Phonegap und Web?

Question

Ist es klug, den gleichen Code-Basis für unsere mobile Web-App und phonegap App zu nutzen? Sie sollen ähnlich sein, die Phonegap-Version lässt uns einfach mehr tun. Können wir erkennen, ob es nennt ist nicht auf die phonegap api auf phonegap und Sequester laufen oder macht es mehr Sinn machen, sie zu trennen.

Answer 1

würde ich die gleiche Code-Basis verwenden. Der ganze Sinn von PhoneGap besteht darin, Ihre mobilen Websites in Apps umzuwandeln. Es ist nicht so schwierig, Merkmale und Bildschirmeigenschaften als angemessen zu erkennen. Das Problem mit separaten Codebasen ist normalerweise die doppelte Handhabung Ihrer Inhalte und Stile. Bei Bedarf könnten Sie diese in eine gemeinsame Ressource aufteilen und sie zur Laufzeit/Zugriff bündeln, aber persönlich würde ich immer noch alles zusammen behalten.

Dieser Blog deckt die Erkennung Ausgabe (die Kommentare siehe auch): http://bennolan.com/2011/08/22/phonegap-detection.html. Die Crux es aber ist if (window.PhoneGap){...}

Answer 2

Sicher, können Sie die meisten der gleichen Codebasis verwenden. Einige phonegap APIs sind die gleichen in html5 (zum Beispiel local), so gibt es keinen Unterschied im Code gibt.

Wenn Sie phonegap Build Service verwenden, wird es die phonegap.js/cordova.js Skriptdatei zu Ihrem Projekt-Stamm hinzuzufügen. Fügen Sie es einfach immer in Ihrem HTML ein. Dann können Sie erkennen, ob Ihre Anwendung innerhalb phonegap ausgeführt wird:

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 
} 

Wenn Sie einigen gemeinsamen Startcode benötigen, setzen Sie es in einer Funktion und rufen Sie diese Funktion aus dem onDeviceReady Handler und dem sonst über Block.

Wenn der phonegap api, den Sie anrufen, nicht den gleichen Namen wie html5 hat (weil er das Präfix Moz * oder WebKit * hat), dann wickeln Sie beide in einen neuen Namen. Zum Beispiel:

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

Wenn die phonegap API Sie verwenden wirklich keine html5 Äquivalent hat, versuchen, die Funktionalität selbst in Javascript, wenn möglich, zu vervielfältigen, sonst werden Sie nur die Funktionalität in Ihrem Browser verlieren. Aber stellen Sie sicher, dass es ohne diese Funktion ausreichend reduziert wird.

Hinweis: die mobilen Geräte zu testen Funktionen wie Beschleunigungsmesser, Geolocation, etc .. in Ihrem Browser Kasse der Ripple Chrome extension.

Answer 3

ich einen Weg, um die Web-Code-Basis intakt zu halten herausgefunden ...

Das aktuelle Problem in deviceready Fall die eingebaute mit verwendet wird, ist, dass, wenn die Seite geladen wird, Sie haben keine Möglichkeit, die App zu sagen: "Hey, das läuft NICHT auf einem mobilen Gerät, man muss nicht warten, bis das Gerät startbereit ist".

1. Im nativen Teil des Codes, zum Beispiel für iOS, in MainViewController.m gibt es eine Methode viewDidLoad, ich bin einen Javascript-Variable senden, die ich später in dem Web-Code überprüfen, ob diese Variable um ist ich werde warten, um den Code für meine Seite zu starten, bis alles fertig ist (zB Navigator Geolocation)

   Unter MainViewController.m:

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

2. Index.html der Code wie folgt lautet:

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