モバイル Web アプリと phonegap アプリに同じコードベースを使用するのは賢明でしょうか? それらは似ているように意図されており、phonegap バージョンはより多くのことを可能にします。phonegap で実行されていないかどうかを検出して、phonegap api への呼び出しを隔離することはできますか、それともそれらを分離する方が理にかなっていますか。
3 に答える
確かに、同じコードベースのほとんどを使用できます。一部の 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 ハンドラーと上記のelseブロックからこの関数を呼び出します。
呼び出している phonegap API の名前が html5 のものとまったく同じでない場合 (たとえば、Moz* または WebKit* プレフィックスがあるため)、両方を新しい名前でラップします。例えば:
var requestFileSystem = (isPhonegap() ? requestFileSystem : window.WebKitRequestFileSystem);
使用している phonegap API に html5 に相当するものがない場合は、可能であれば JavaScript で自分で機能を複製してみてください。そうしないと、ブラウザの機能が失われるだけです。ただし、その機能がなくても十分に適切に劣化することを確認してください。
注: 加速度計、地理位置情報などのモバイル デバイス機能をテストするには、ブラウザでRipple Chrome 拡張機能をチェックアウトします。
Webコードベースをそのまま維持する方法を見つけました...
組み込みの deviceready イベントを使用する際の現在の問題は、ページが読み込まれたときにアプリに次のように伝える方法がないことです。始めること"。
iOS などのコードのネイティブ部分では、MainViewController.m にメソッド viewDidLoad があります。後で Web コードでチェックする JavaScript 変数を送信しています。その変数が存在する場合は、すべての準備が整うまで、ページのコードを作成します (ナビゲーターの地理位置情報など)。
MainViewController.m の下:
- (void) viewDidLoad { [super viewDidLoad]; NSString* jsString = [NSString stringWithFormat:@"isAppNative = true;"]; [self.webView stringByEvaluatingJavaScriptFromString:jsString]; }
index.html コードは次のようになります。
function onBodyLoad() { document.addEventListener("deviceready", onDeviceReady, false); } function onDeviceReady(){; myApp.run(); } try{ if(isAppNative!=undefined); }catch(err){ $(document).ready(function(){ myApp.run(); }); }
同じコードベースを使用します。PhoneGap の要点は、モバイル サイトをアプリに変換することです。機能を検出し、不動産を適切に画面に表示することはそれほど難しくありません。個別のコードベースの問題は、通常、コンテンツとスタイルを二重に処理するコストです。必要に応じて、それらを共有リソースに分離し、実行時/アクセス時にバンドルすることもできますが、個人的には、すべてをまとめて保持します。
このブログでは、検出の問題について説明しています (コメントも参照してください): http://bennolan.com/2011/08/22/phonegap-detection.html . それの要点はif (window.PhoneGap){...}