JavaScriptからAPK。 PhoneGapにうんざりしている人のためのAndroid開発の落とし穴。 JavaからJavaScriptへの橋渡し

こんにちは、Habra！



JavaScriptゲームが大好きで、すべてのプラットフォームに移植するためにコードを防弾化しようとしています。 6か月前、私はすでにAndroidアプリケーションのアセンブリについて書いていましたが、今日はこのトピックをより詳細に明らかにしたいと思います。



PhoneGapを放棄しなければならなかったことをすぐに警告します。 2つのプロジェクトでそれを使用した経験は私を混乱させました。 「Hello World」アプリケーションでは素晴らしい仕事をしますが、パイプライン化されたアセンブリでは、ニュアンスが連続して現れます。



PhoneGapが行かなかった理由：

1.最初は空です。 常に新しいモジュールを接続する必要があります。

2.多くのモジュールは曲がって書かれています。 彼らは多くを過剰に取るか、予期しない動作をします。 たとえば、SMSを送信するためのAndroid用の2つのモジュールのうち、1つは機能しませんでした。

3. EMEI電話の受信などの基本的な問題は解決されていません。 常に終了する必要があります。







私はまだPhoneGapの本質を理解していません。 最初は、1つのボタンが「うまくいく」ことを期待していましたが、実際には何もしません。 各プラットフォームの下に、SDKを配置する必要があります。 各タスクの下で、モジュールを検索してインストールします。 モジュール自体も制限されています。 彼らはプラットフォームの一部でのみ何かをすることができ、他のデバイスで必要な場合は、他のデバイスでこれを行うことができるモジュールを再度探す必要があります。 大量のゴミや不要なものがありますが、最小限のコストでビルドを収集したいと考えています。 これらすべての要因により、ネイティブに記述できます。 そして、ここで落とし穴が出てきます。



CocoonJSが行かなかった理由：

CocoonJSではあまり仕事をしていなかったので、特別な質問はありませんでした。 キャンバスを使用したビルドは本当に速く動作します。 しかし、一般的には、CocoonJSを使用する意味がわかりませんでした。 彼は支払われます。



他のプラットフォームおよび他のニュアンスのアセンブリについては、別の記事があります。このトピックまたはPhoneGapトピックに関するさらなる議論は、この範囲外です。

ポイントに行きましょう

まず、基本から始めましょう-フルスクリーンHTMLページが実行されているWebView。 onCreate MainActivityでは、次のように記述します。

vw = (WebView) findViewById(R.id.webview); vw.setVerticalScrollBarEnabled(false); //   vw.setHorizontalScrollBarEnabled(false); //   vw.getSettings().setJavaScriptEnabled(true); //  JavaScript vw.getSettings().setDomStorageEnabled(true); //  localStorage  .. vw.getSettings().setSupportZoom(false); //  , ..       vw.getSettings().setSupportMultipleWindows(false); //   . // ..     SPA  vw.addJavascriptInterface(new WebAppInterface(this), "API"); //    JavaScript. //       Java.  JavaScript`   API vw.loadUrl("file:///android_asset/index.html"); //    vw.setWebViewClient(new WebViewClient());
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

すべての紛争はJavaで解決されます。 BadaまたはSmartTV用に作成することを忘れないでください-JavaScriptでブリッジを投げることができる標準機能が常にあります。 Androidの場合、WebAppInterfaceクラスのインスタンスをスローしました。クラス自体は次のようになります。

 public class WebAppInterface { Context mContext; /** Instantiate the interface and set the context */ WebAppInterface(Context c) { mContext = c; } /**   ,    JavaScript */ @JavascriptInterface public void sendSms(String phoneNumber, String message) { ... -   } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

落とし穴：このようなブリッジでの作業は、通常非同期または予測不能であり、驚きに満ちている場合があります。



JavaにJavaScriptを突然通知する必要がある場合、それに到達する最も簡単な方法はURLをノックすることです：

 vw.loadUrl("javascript: ... -   JavaScript");
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

落とし穴：サムスンのAndroids> 4では、DOMタッチイベント中に、要素を青で強調表示できます。







このニュアンスに注意してください。 典型的な「保護」は役に立ちません：

 * { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-focus-ring-color: rgba(255, 255, 255, 0); outline: none; -moz-user-select: -moz-none; -o-user-select: none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; -webkit-text-size-adjust: none; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

バグを回避するには、次を追加する必要があります。

 if (document.addEventListener) { document.addEventListener("touchstart", function () { }, true); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

しかし、これは常に問題を解決するとは限りません。 おそらく、レイアウト自体が問題に影響します。 たとえば、SudokuとTestの2つのアプリケーションを使用します。 数独では、ボードはテーブルでレイアウトされており、テーブルではこのソリューションが役立ちました。 ただし、テストではボタンです。 すべてがHTML5のセマンティクス標準に準拠しているようで、すべてがうまくいくはずですが、実際には、次のようなCSSとのコンボを終了する必要があります。

 .some_button:focus, .some_button:focus:active { background-color: rgba(0, 0, 0, 0); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

タッチイベントがボタンテキスト上で正確に発生した場合は、青い選択が表示されないことにも気付きました（テキストは非常に大きくする必要があります）。



落とし穴： Android <4では、フォントがクリープする可能性があります。







バグに対処する方法は、チェックを行うか、フォントを無効にすることです。 一方、フォント自体が湾曲している場合があります。



落とし穴： Androidは大文字と小文字を区別します。



.jpgリソースのヒープの中で.JPGから画像を失った場合、ブラウザの違いに気付くことはほとんどありませんが、画像はWebViewにロードされません。



落とし穴： Androidは予約語に敏感です。



たとえば、classijizmというフォルダーがアセットにありました。 Androidはプロジェクトのビルドを拒否し、エラーを明確に説明できませんでした。 klassijizmに改名-獲得。 繰り返しますが、同じAndroidの通常のブラウザーでは、このような問題はありませんでした。



落とし穴： Androidのオーディオタグが機能しません。



より正確には、ブラウザでは機能しますが、WebView内で使用する場合は機能しません。 この制限を回避するために、ブリッジを投げてネイティブコードで書き直すことができます。 onCreateで追加：

 mp = new MediaPlayer();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

また、WebViewでは、JavaScriptインターフェースを拡張しています：

 @JavascriptInterface public void audio(String url) { try { soundClick = getAssets().openFd(url); mp.reset(); mp.setDataSource(soundClick.getFileDescriptor(), soundClick.getStartOffset(), soundClick.getLength()); mp.prepare(); mp.start(); } catch (IOException e) { e.printStackTrace(); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

落とし穴： Androidを閉じる代わりに、アプリケーションを最小化します。 したがって、オーディオを使用する場合は、少なくともサウンドをオフにする必要があります。



問題の本質は、あなたがゲームを実行していると仮定することです。 ユーザーはアプリケーションを終了しましたが、実行中のゲームの音は聞こえ続けます。 したがって、JavaからJavaScriptを押して、ゲームを停止するように要求する必要があります。

 @Override public void onBackPressed() { vw.loadUrl("javascript: windowClose();"); MainActivity.this.finish(); } @Override public void onPause() { super.onPause(); vw.loadUrl("javascript: windowClose();"); MainActivity.this.finish(); } @Override public void onResume() { super.onResume(); vw.loadUrl("javascript: windowOpen();"); } @Override public void onDestroy() { super.onDestroy(); vw.loadUrl("javascript: windowClose();"); MainActivity.this.finish(); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

MainActivity.this.finish（）; 私はあらゆる機会にアプリケーションを閉じようとします。 したがって、次回Androidが最初から単純に起動し、何も復元しようとしないことを確信できます。 数独などのゲームではこれができないことは明らかですが、ほとんどのゲームでは可能です。 それらは非常に単純です（同じFlappyBirdsまたはTests）。 Androidがすべてを返そうとするのを恐れることをお勧めします。 他のバグが表示されます。



落とし穴： onResumeを使用したAndroidがアプリケーションを正常に復元するとは限りません。 実際、一部のデバイスでは再起動に問題があります。







たとえば、タイマーを停止したり、奇跡的にサイズ変更に応答しないことがあります。 したがって、理解できない状況では、サイズ変更を呼び出してタイマーを再確認してください。



落とし穴：アプリケーションを最小化/開くと、並行して動作し、互いに干渉する複数のWebViewが表示される場合があります。



このような問題を確実に回避するために、マニフェストを追加します。

 <activity ... //      WebView    . android:configChanges="keyboardHidden|orientation|screenSize" ... //            android:clearTaskOnLaunch="true" android:noHistory="true" android:launchMode="singleTask" >
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

JavaScriptアプリケーションの外観をさらに良くするには、上部の黒いバーを削除してフルスクリーンで実行します。 これを行うには、マニフェストに追加します。

 <application ... android:theme="@android:style/Theme.NoTitleBar.Fullscreen">
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

落とし穴：データを保存するlocalStorageは、アプリケーションを閉じた後に破棄されます。



2つの呼び出しの間にデータを保存するには、ネイティブのSharedPreferencesにデータを保存する必要があります。 保存して読み込むために2つのブリッジをロールしましょう：

 @JavascriptInterface public void saveSomeThing(String message, String id) { if(numberDataForSave > Integer.parseInt(id)) return; numberDataForSave = Integer.parseInt(id); SharedPreferences preferences = getSharedPreferences("com.example.something", MODE_PRIVATE); SharedPreferences.Editor editor = preferences.edit(); editor.putString("somethingID", message); editor.commit(); } @JavascriptInterface public String loadSomeThing() { SharedPreferences preferences = getSharedPreferences("com.example.something", MODE_PRIVATE); String message = preferences.getString("somethingID", ""); return message; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

落とし穴：メソッドは非同期に動作します（または私には思えましたか？！）。 セーブを頻繁に呼び出すと、データの順序が間違っている可能性があります。



実際、バグは次のようになります。最後の行が保存されたのではなく、前の行が保存されました。 この問題を解決するために、JavaScriptとネイティブコードでデータに番号を付けます。 保存するメソッドには変数numberDataForSaveがあり、保存されたデータのインデックスをチェックします。 インデックスが最後に保存されたものより小さい場合、データは無視されます。



落とし穴：通常、メインアクティビティのレイアウトには多くの余計な要素があります。



全画面表示の1つのWebViewについては、それほど必要ありません。 残すことで短縮できます：

 <?xml version="1.0" encoding="utf-8"?> <WebView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/webview" android:layout_width="fill_parent" android:layout_height="fill_parent" android:scrollbars="none" />
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

落とし穴： SIMカードなしでSMSを送信しました。 SMSは消えず、コールバックはtrueを返しました。



PhoneGapを使用している場合、Android向けのSMS送信モジュールが曲がって書かれている可能性があります（いずれにしても、私は個人的にこのような問題に遭遇しました）。 どの結果でもtrueを返します。 これを正常に実装するには、JavaからJavaScriptにSMSを送信するための橋を飛び越えましょう。

 @JavascriptInterface public void sendSms(String phoneNumber, String message) { SmsManager sms = SmsManager.getDefault(); sms.sendTextMessage(phoneNumber, null, message, sendSmsPendingIntent, null); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、MainActivityクラスにメソッドを追加します。

 private PendingIntent registerSentSmsReceiver() { String SENT = "SMS_SENT"; PendingIntent sentPI = PendingIntent.getBroadcast(MainActivity.this, 0, new Intent(SENT), 0); sendSmsReceiver = new BroadcastReceiver() { public void onReceive(Context arg0, Intent arg1) { switch (getResultCode()) { case Activity.RESULT_OK: vw.loadUrl("javascript: smsSend(true);"); break; default: vw.loadUrl("javascript: smsSend(false);"); break; } } }; registerReceiver(sendSmsReceiver, new IntentFilter(SENT)); return sentPI; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

アプリケーションが新しいクラスでクラッシュするのを防ぐには、onDestroyを更新する必要があります。

 @Override public void onDestroy() { super.onDestroy(); if (sendSmsReceiver != null) { unregisterReceiver(sendSmsReceiver); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

設定を解除するときは、sendSmsReceiverを常にオフにする必要があります。



落とし穴： SamsungのAndroidでは、タッチイベントでWebViewが遅くなります。 さらに、彼は指を保持しながら描画を停止することさえできます。



このバグから逃れることはできません。 彼らはそれをやった。 これがCocoonJSプロモーションの理由の1つになりました。 必要に応じて、キャンバス要素を（すべて同じブリッジを使用して）ネイティブに書き換えることができますが、これはゴミです。 すべてを一度にJavaで記述する方が良いでしょう。 ただし、それでも、APKファイルを収集することは理にかなっています。 サムスンに加えて、まだ他のメーカーからの電話の束があり、そこにはすべてがそれほど悪くないことができます。 まあ、この点で同じTizenで、一般的に、おとぎ話。



Javaのギザギザの瞬間をおaびします。 まだ私のJavaScriptプロファイル。 まあ、デモはロシア語と記事からの英語です（誰かが興味があるなら）。