PhoneGap, improving performance

(by @ArtworkAD)

Having choppy css animations can be very frustrating for you and for the end user. Please consider following fixes for using angular-mobile-nav with PhoneGap.

• on iOS css translate3D will activate the GPU, however on android you need to activate it manually. In your application manifest add android:hardwareAccelerated="true"
• secondly on android you can force the view to redraw on every user action. This will improve performance enormously. So here is how it works

First define your own WebView:

import org.apache.cordova.CordovaWebView;

import android.content.Context;
import android.graphics.Canvas;
import android.os.Handler;
import android.view.MotionEvent;
import android.webkit.WebSettings.RenderPriority;

public class MyWebView extends CordovaWebView {
    public static final String TAG = "MyWebView";
    private Handler handler;

    public MyWebView(Context context) {
        super(context);
        this.handler = new Handler();
        this.getSettings().setRenderPriority(RenderPriority.HIGH);
        this.getSettings().setPluginState(android.webkit.WebSettings.PluginState.ON_DEMAND);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
    }

    public boolean onTouchEvent (MotionEvent event){
       super.onTouchEvent(event);
        handler.postDelayed(triggerInvalidate, 60);
        handler.postDelayed(triggerInvalidate, 300);
        return true;
    }

    private Runnable triggerInvalidate=new Runnable(){
        public void run(){
           invalidate();
        }
    };
 }

Now tell your activity to use this WebView instead of the default one:

public void init(){
  CordovaWebView webView = new MyWebView(MyActivity.this);
    super.init(webView, new CordovaWebViewClient(this, webView), new CordovaChromeClient(this, webView));
}

Enjoy better sliding performance ;)

Fix empty view when app was in background and brought back to foreground

To your CordovaWebView add:

public void onResume(){
	super.onResume();
	
	invalidate();
}