phonegapとwebに同じコードベースを使用していますか？

Question

モバイルウェブアプリとphonegapアプリに同じコードベースを使用することは賢明ですか？彼らは似ていることを意図しています、phonegapのバージョンはちょうど私たちがもっとできるようになります。私たちはそれがphonegapで実行されていないかどうかを検出し、phonegap APIへの呼び出しを隔離することができますか、それらを分離するのがより合理的ですか？

Answer 1

私は同じコードベースを使用します。 PhoneGapのポイントは、モバイルサイトをアプリに変換することです。フィーチャを検出し、必要に応じて実在するものをスクリーニングすることはそれほど困難ではない。別々のコードベースの問題は、通常、コンテンツとスタイルを二重に処理するコストです。必要であれば、それらを共有リソースに分けて、実行時/アクセス時にバンドルすることができますが、個人的にはすべて一緒に保つことになります。

このブログでは、検出の問題について説明しています（コメントも参照してください）：http://bennolan.com/2011/08/22/phonegap-detection.html。それの要点はif (window.PhoneGap){...}

Answer 2

です。確かに同じコードベースのほとんどを使用できます。 いくつかのphonegap APIはhtml5（例えばlocalStorage）と同じですので、コードに違いはありません。

phonegap Buildサービスを使用している場合、phonegap.js/cordova.jsスクリプトファイルがプロジェクトルートに追加されます。あなたのhtmlにすべての時間を含めるだけです。次に、あなたのアプリケーションが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 
} 

あなたには、いくつかの一般的なスタートアップコードが必要な場合は、関数の中でそれを入れて、onDeviceReadyハンドラと上記の他にブロックからこの関数を呼び出します。

呼び出しているphonegapのapiがhtml5と同じ名前ではない場合（たとえば、Moz *またはWebKit *というプレフィックスがあるため）、新しい名前の中に両方を囲みます。例えば：

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

使用しているのPhoneGap APIは、本当に何もHTML5の同等を持っていない場合は、そうでないあなただけのブラウザで機能を失うことになる、可能な場合はJavaScriptで機能を自分で複製してみてください。しかし、それがその機能なしで十分に優雅に劣化することを確認してください。

注：加速度計、ジオロケーションなどのモバイルデバイスの機能をテストするには、ブラウザのチェックアウトにRipple Chrome extensionを入力します。

Answer 3

私はdevicereadyイベントに建て使用して、現在の問題は、ページがロードされたとき、あなたはアプリを伝える方法がないということです...

をそのままウェブのコードベースを維持する方法を考え出しました： 「これはモバイルデバイス上で実行されていないため、デバイスの起動準備が整うのを待つ必要はありません。コードのネイティブ部分には

1. 、iOS用の例えば、MainViewController.mでその変数が周りにある場合のviewDidLoadが、私は、私は後でウェブコードでチェックjavascriptの変数を送信しています方法がありますすべてが（例えば、ナビゲーターのジオロケーション）準備ができるまで、私はMainViewController.mの下で私のページのコードを開始する

   をお待ちしております。

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

2. インデックスを。HTMLコードはこのように書き：

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