I am using PhoneGap 3.4.0 with the JQuery plugin for my Android project. Touch events are not working properly, with click events facing 300ms click delay. What seems to be the issue? How is it fixed?
Code sample:
$(element).click(function(){
//my function
});
300ms delay is normal thing in mobile webview, it's because of waiting for possibility of performing double tap, there is a way to bypass this with fastclick library.
As per this question, have you tried changing your target SDK setting in your AndroidManifext.xml to a later, more up-to-date API level? There are claims that changing from 8 (i.e. Android 2.2) to 14 (Android 4.0) dramatically improved PhoneGap performance on phones running newer versions of Android, probably because of having some hardware acceleration features disabled in lower settings. Also set your android:hardwareAccelerated to true and see if that helps.
Related
I have a PhoneGap 2.9 app running on Android 4.4 and it takes several tries to detect a swipe event from jQuery Mobile (v.1.10). This same code runs beautifully on Android 4.3.
I have tried changing the values for
$.event.special.swipe.durationThreshold
$.event.special.swipe.horizontalDistanceThreshold
but these do not seem to help at all. Any suggestions?
Below is how I am hooking up the swipe event:
$(document).on("swipe", '.collapsed', function (e) {
// do something
});
Set the target SDK to 18 instead of 19 to force the new webview in kitkat to operate in compatibility mode.
I just now started with my first PhoneGap project using zend studio. But, after i build and deploy it, the application is quite slow. Both on android and iOS. The scrolling is lagging, and if i press a button, it's slow to goto the next page. Is there any way to improve it's performance ? Thanks in advance
Since version 4.0.4, there is a known "bug" where if hardware acceleration is on, it will actually slow down screen redraw events. This is why scrolling is slow.
On the Samsung Galaxy III and IV, canvas would not render anything at all until we turned off hardware acceleration. Once we did canvas drawing performed well.
You can turn off hardware acceleration for your webview with this line of code in your app java file:
super.appView.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);
This may be fixed as of 4.4 (KitKat uses Chromeview rather than webview).
Yes,you can add fastclick.js file to your html file.
like:
<script src="../fastclick.js"></script>
& refer this documentation to improve your phonegap app.
Several reasons could be the root cause.
You should give more info to help you further.
Possible quick and simple solutions.
A) disable your page transitions and check the effect.
What kind of operations are you performing on your page?
Are you using additional libraries?
I am not familiar with Zen studio, but how are ypu building your UI?
The scroll could be slow or lagging if you are scrolling over a list or buttons or links and in each touch the page is triying to react to change to the hover state but it is not fast enough to match the scrolling speed. Once I had that problem and disable the hover state and the scroll speed improved a lot. Double check that in the meantime.
In Android KitKat you can use DevTools to debug performance of your application. This is a great video to get to grips with the tools: https://developers.google.com/live/shows/840309825
You should experiment with turning off hardware acceleration on the WebView, but would recommend experimenting on Pre-KitKat and KitKat seperately. The KitKatWebView is based on Chrome and as a result has very different performance characteristics.
as mentioned, use FastClick to remove the 300ms delay for clicks.
you can also use this code to speed up the page transition:
$(document).bind("mobileinit", function () {
$.mobile.defaultPageTransition = 'none';
});
I'm running the same exact web app on Android under PhoneGap and under the built in Browser. The app runs fine on the built-in browser but is unbelievably slow under PhoneGap. Even basic scrolling on the page stutters under PhoneGap.
Is there anything, in general, that I might be doing wrong? I was under the impression that PhoneGap just uses the same WebKit renderer as the normal Browser app, so why would the same HTML and JavaScript run much slower inside PhoneGap?
P.S. This has been asked before, but due to wording I think the original question was misunderstood.
I may have inadvertently stumbled on an answer to this. Turns out that the apps I was working on had android:targetSdkVersion in AndroidManifest.xml set to a really low value (i.e. my target Android version was something like 2.2). Increasing this to 14 (Android 4.0) appears to have hugely improved PhoneGap performance, at least on newer Android devices running ICS or Jelly Bean.
Setting a low targetSdkVersion seems to disable at least some of the performance improvements introduced in newer versions of Android.
So, if you want to see a big performance boost in PhoneGap, make sure your targetSdkVersion matches the max SDK version supported by the phone you're testing on.
I don't know phoneGap, but you can try these:
Adding android:hardwareAccelerated="true" in the manifest
If you use webview webview.getSettings().setRenderPriority(RenderPriority.HIGH); and webview.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
It is counter-intuitive but you may actually need to turn off hardware acceleration for your webview. Hardware acceleration as of Android 4.0.4 does nothing for canvas and other redraw events, but actually removes CPU resources for those events.
Try adding this line of code in your app java file:
super.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
Also set android:hardwareAccelerated="false" in the manifest.
Same exact thing I experienced! Previously I was using Android 3.x for testing. As soon as I upgraded to 4.4.2 my Canvas was dead slow! Looking at the Rendering timeline I could see many Rasterization calls taking over 100ms and reducing my FPS to about 8! android:hardwareAccelerated="false" solved my issues. Is there a way to set hardwareAccelerated="true" depending on android version?
I developed an application for android using jquery mobile and phonegap.
I deployed the app to my device over usb. The performance of the app ist really bad, especially while scrolling a longer list.
The strange thing is: The whole app runs smooth if i just open up the browser on my phone and access the index.html directly. Same technology, same content. I do not use the phonegap native api or anything similar.
Tested with phonegap 1.5.0 and 1.7.0rc1, jquery mobile 1.1.0 on android 4.0.2.
Any ideas?
On honeycomb (3.0), Ice cream (4.0) and posterior devices, you can boost performance by adding the following in the < Application ... > tag:
android:hardwareAccelerated="true"
You could set the minSdk to 8 (Android 2.2) for compatibility and the targetSdk to 15 (Android 4.0) and that would make hardware acceleration work when its available on the device only.
I believe that with this flag the performance of my apps is equal to running them in the browser, so I guess its because the browser was coded with hardware acceleration :)
I had a similar problem: a page with a longer list of "medium complex" themed divs. The browser of HTC phone had no problems in displaying. But within the phonegap app rendering failed completely. I saw a kind of WSOD, which disappeared only after touching the display. After touching, the page was displayed correct.
The problem was not in place, when I shortened the div-list to one or two div-elements or when I reduced the sub elements within the divs and reduced the render effort caused by the css complexity.
The white screen looked like, if the whole body was invisible, since only the documents background-color was displayed (I added a light pink for this). So I guess, the rendering was the problem after reading this thread
I tried the various proposals I found in this thread to make the app work without the "WSOD". But nothing worked. Some of them made the app displaying really worse.
Finally, after a whole day of searching, I made it. I set within the tag (not the tag) of my AndroidManifest
<application android:hardwareAccelerated="false" ...
Now the app behaves in the same fast way as my webbrowser. Seems like, if hardware acceleration is not always the best feature...
My versions:
phonegap 3.5.0, Android 4.0.3, jQuery v2.1.0, HTC Sense 3.6
Found an answer here: http://groups.google.com/group/phonegap/browse_thread/thread/94da1cf881abe995/6d4f7aea7aeba523?lnk=gst&q=performance
There is probably a difference between the native browser and the webview in terms of javascript performance.
If you can confirm the browser performs better (that it's not something suboptimal in your code frustrating one but not the other), you could consider deploying as an html5 offline application so that you will actually run in the browser.
We bumped into performance issues while scrolling the same amount of list items with jquery mobile. The performance was so poor (we didn't even try in PhoneGap environment) that we rewrote the app using iScroll library... now the app scrolls really smoothly.
If you are at the beginning of the development, you could try to change the UI library.
After this situation we deploy our apps to test devices quite often to manage performance issues in time... this became a "policy" :)
After I have compiled and deployed the demo application to my Samsung Galaxy S II I noticed that the Sample PhoneGap App which comes with PhoneGap was not very responsive when pressing buttons and scrolling.
I also made a little app using PhoneGap and jQuery Mobile, with 4 buttons everything was ok, but when I added more than 7 and my viewport needed to be scrolled, scrolling become to be very slow, the more buttons/widgets I had the slower the srolling was.
Is this a bug specific to my mobile device or it is just how PhoneGap works:
The fact that PhoneGap apps feel slow on my phone including the demo?
EDIT:
The same PhoneGap app served by an HTTP server from my laptop and launched in the standard Android browser works very smoothly
Try setting your targetSdkVersion higher. Changing mine from "8" (i.e. Android 2.2) to "14" (Android 4.0) dramatically improved PhoneGap performance on phones running newer versions of Android. Most likely this enables certain performance-enhancing features such as hardware graphics acceleration.
For more info see my other answer about this here: https://stackoverflow.com/a/12397768/233370
Since PhoneGap and the frameworks that is used with it (JQM,Sencha Touch etc) are just working in a WebKit browser they can be slow if there's too much to render.
There's actually no bug with your device or etc.It's just that PhoneGap and the frameworks are not so good if you want fast response and so on.You can try your app in other devices and can observe that they behave the same.
I had the same Problems, after Update to Android 4.0.4 my Phonegap (Cordova 2.0.0) & Sencha Touch 2 - APP was very very slow.
But after I insert
super.appView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
the APP works fine, as before the update.
http://developer.android.com/guide/topics/graphics/hardware-accel.html
For improved performance you may not need Phonegap.
If what you need is quick cross platform styling but fast native components try a tool like nativecss.com It keeps the styling in CSS, but uses native components for everything else - so no HTML rendering delays or clunky animations.