In our project we are using JQuery Mobile 1.3.1, WL 5.0.6 and Knockout 2.2.1.
The UI performance of the compiled, bundled and installed Worklight App is in pretty much every aspect - slide transitions, page transitions, button click responsiveness, etc. - quite bad on high-end Android Galaxy 3, Galaxy 4 and LG Optimus G phones.
When we tested the Applications straight from the Consumer Version Tomcat Worklight Server using /worklight/apps/services/preview/App/android/1.0/default/App.html the performance in all browsers on all Android phones - Built-In, Chrome, Firefox, Opera was great. Was very comparable to iOS, even better in some cases. Of course you have the load times of the web resources from the server, but once it is loaded it is fast!
We looked for some solutions and only found the proposal of:
<application android:hardwareAccelerated="true" ...>
... but since this should be default from Android API Version 14 we do not expect any real performance increases.
Are there any suggestions how to get a Worklight App to the same performance as the App in the Android browsers?
Known and on our radar...
Please see Ishai's answer in this question: IBM Worklight: UI Performance.
The suggested tweaks to the AndroidManifest.xml file should help in increasing UI performance when using jQuery Mobile in a Hybrid application with the Android environment.
Related
I have an old device (Nook Simple Touch). It based on Android 2.1. I am writing simple application for this device (only for personal usage). This application is a WebView linked to special WEB-site. Site was build using JQuery Mobile.
I get a trouble with it. WebView on this device is not perfect and shows some elements incorrectly. New versions of WebView works well.
Is it possible to improve WebView on old version of Android? May be here is a way to upgrade it or i can use some library for it?
Unfortunately, there's nothing WebView related you can do here.
jQuery Mobile performs badly on Android systems below 2.3
To be more specific, jQuery Mobile performs badly on Android systems below 4.0, however, performance drops even further if Android 2.2 and below is used.
On Android 4.0 you could have used Crosswalk to make your application faster, however, it is limited to Android 4+.
The good news is you are not out of possibilities.
CSS3 is the main reason jQuery Mobile performs purely on Android 2.X devices. You can disable jQuery Mobile styling and do it on your own making sure not to use or overuse CSS3, especially CSS3 drop shadows.
Another possibility would be to upgrade the Android version. Unfortunately, an official upgrade was never released nor there was a custom ROM on XDA developers.
I was just curious on how can I run my Ionic 2 project on Android Jellybean devices well. The application runs well in KitKat to Nougat OS devices but in Jellybean, It only shows white screen. Is there any way I can make my Ionic 2 project be compatible in Android 4.2 (Jellybean) devices? Thank you in advance.
You can use Crosswalk
Why should I use Crosswalk?
Older versions of Android devices (4.0-4.3) use Android’s default
browser, which has significantly less performance and standards
compliance than modern Chrome. Using Crosswalk gives you a specific
and more performant version of Chrome to use on all Android devices,
in order to reduce fluctuations and fragmentation among devices.
How does Crosswalk improve Cordova Android apps?
By designating a specific version of Chrome, you can skip the
unexpected behavior from browsers that vary from device to device.
Crosswalk also provides improved performance and ease of debugging.
What can I expect, performance and size-wise?
In older Android Devices (4.0-4.3), you’ll see about a 10x improvement
of both HTML/CSS rendering and JavaScript performance and CSS
correctness. To bundle Chrome, you will see a small (~10-15MB) size
increase in your Android Apps.
More about Crosswalk https://github.com/crosswalk-project/cordova-plugin-crosswalk-webview
Apache Cordova apps use the default WebView control in Android.
Change default webkit on Apache Cordova - Android
So for Android 4.4, the WebView is using Chromium 30, and will never be updated (on 4.4).
http://www.mobilexweb.com/blog/android-4-4-kitkat-browser-chrome-webview
Does the "Chrome Apps on Mobile" version of Apache Cordova, package a Chrome Runtime with it to use for rendering? (please say yes)
https://github.com/MobileChromeApps/mobile-chrome-apps
The answer is no. The "Chrome Apps for Mobile" use the default WebView just like the normal Apache Cordova.
Do mobile chrome apps run in chrome?
The default system WebView’s are as follows:
OS: Mobile Safari WebKit based. Lots of web-platform overlap with Chrome, but not exact and diverging slowly.
Android 4.3 or older: Legacy Android WebView. Dated and occasionally buggy, but still fairly performant on certain tasks.
Android 4.4: Chrome based WebView. This initial release brought a slew of modern web apis, and enabled remote web
inspector. However, it also introduced some regressions, is stuck
at Chrome 30, and didn't bring all features, such as WebGL and
WebRTC.
Android Future: Since the first launch of Chrome based WebView, it was announced that work is ongoing to make the WebView
auto-update just like the Chrome Browser does.
Here's the good news quote from May 13th, 2014 from the same answer quoted above:
Excitingly, a significant portion of our recent work on
cordova-android has been on bundling a tip-of-tree chromium based
“webview” alongside your app, thanks to the Intel Crosswalk project (https://crosswalk-project.org/).
This would mean you ship your app to the Play Store together with your
very own modern build of Chromium webview. Best yet, it will work all
the way back to Android 4.0. Expect announcements on how to try it
yourself in the next month or so!
I know both use the same webkit version (537.36) and both use the same javascript engine (V8), but are there any other major differences between them?
I have a webapp with automated tests for desktop Chrome but nothing for Chrome on Android. I'm trying to decide if I know it works on desktop Chrome do I need to go through the trouble of testing it on Chrome on Android, or are they similar enough that I should have confidence it works on both.
Thanks!
Main difference is that Android don't have Flash because of the HTML5 implementation, and also there's a lot of different screen sizes and users don't like to zoom in and out a pan and zoom again, so the best you can do is to create a web designed for mobile devices.
On the other hand, if your site is mainly HTML and Javascript, will work 100% on mobile Chrome. I have a HTML5 game and works equal in desktop and mobile.
Also, you can download the Android SDK and test your site in a bunch of different Android versions and screen sizes with the AVD, is like an official Android emulator.
I'm building a mobile website and I'm having trouble getting the website to appear consistently across various android phones on 4.0, 4.1 and 4.2 on chrome browser and stock browser. But when I view the same website on iphones 4s and 5, running ios 5 or ios6, the site appears and functions consistently.
The mobile site I'm working on makes use of CSS3, a lot of javascript animation, imported fonts from fonts.com, and integration with videos from vimeo.com.
Below are examples of issues I'm running into on various androids and their browsers:
Person 1 - GS3 - Android 4.0 - Stock browser - the website always crashes
Person 1 - GS3 - Android 4.0 - Chrome browser - the website works great, except some fonts don't appear
Person 2 - Galaxy Nexus - Android 4.2 - Stock browser - works great
Person 2 - Galaxy Nexus - Android 4.2 - Chrome browser - vimeo videos don't play
Person 3 - Galaxy Note - Android 4.0 - Stock browser - everything works great
Person 4 - Samsung Galaxy - Android 4.1 - stock browser - the site keeps crashing
Is it common for the same website to render inconsistently across various android browsers on operating systems 4.0 and up?
To an extent, yes, it is common. This is because Android devices aren't necessarily consistent in both hardware and features, especially when you start getting into carrier-locked devices.
In mobile devices in general, JavaScript and Flash support can be sketchy (Vimeo may anticipate this and use HTML5 instead, but you're still talking about playing a video, which is, in itself, resource-intensive). Some will support these, while others won't, and some of the ones that support them may not have the hardware to handle them. JavaScript, Flash, custom fonts, and video playback are all resource-intensive, so it's possible you're overloading what the device is capable of.
I recommend paring down your aesthetic features for the mobile browsers, such as using the stock fonts, cut down on the animations (most of which likely don't add value, anyway), and trim off some of the heavier CSS3 tricks (transforms, animations, etc), and see if that improves matters on these browsers. It might also be a good idea to offer some kind of "failed embed" fallback, such as a link, for the videos. (It might be easier to start by cutting out the JavaScript and advanced CSS entirely, then slowly add things back in until you find the breaking point.)
As a side note, it might also be worthwhile to look into the concept of "mobile-first" development principles, which includes focusing on your content, then adding aesthetics as the capabilities of the browser support it (instead of starting big and cutting things out as support drops off).