In my team we are developing an application which is going to be played on tablets, the project has been largely developed and tested on Google Chrome.
At this time we are inserting this webapp on Apache Cordova in order to display it as a native application on Android (and later on iOS), but the app doesn't displays well on the tablet, this because of the WebKit version, which varies on every Android version and does not work as in Chrome.
The question is... There is any way to change the webkit version which operates with Apache Cordova? (or any other web rendering engine)
There is no way at this current time to change the Webkit version used by Apache Cordova - this is because Cordova uses the native Android WebView component, which is based on an old Webkit version. The native Android WebView is quickly becoming the IE 6 of the mobile world, if it isn't already.
EDIT WHOOO! Android 4.4 announced that the default WebView will now be built on top of Chromium! This means that Cordova apps running on Android 4.4 should run much faster (new JS engine) and support more features (HTML5 things.) There is still a lot of confusion around this new WebView and what it means. The best article I have read so far is here: http://www.mobilexweb.com/blog/android-4-4-kitkat-browser-chrome-webview
A lot of people have realized that this is becoming a big problem with Cordova apps. There has been some experimental work to build a version of WebView that uses the Chromium source (and thus an updated version of Webkit (Blink?)), you can view the code here: https://github.com/pwnall/chromeview Check out the "issues" tab and follow it; I've been getting a few emails every week from people filing issues. I think some forks are ahead of others and hopefully they are getting close. (According to Cordova mailing list archives, Opera was able to get this working on 2.2 but I can't find any code or anything more than a passing reference.)
If you are able to get WebView built with Chromium, it shouldn't be that difficult to switch out which WebView class Cordova uses; I'm pretty sure this ability was already added to Cordova with this and similar commits: https://git-wip-us.apache.org/repos/asf?p=cordova-android.git;a=commit;h=f6049881
I think a lot of people are holding their breath that Android 5.0 will finally have an updated WebView that uses Chromium source and will be updated in sync with Chromium... if so, that'll be awesome, but it still leaves us with 4.0 and below that doesn't seem to work at all.
I'd suggest checking out CrossWalk. It's developed by Intel and uses the Blink rendering engine (same as chrome). You package it with your cordova app and then you can use same the Web rendering engine across all devices and versions 4.0+.
https://crosswalk-project.org/
Note: It adds about 20MB to your app's size, but I'd say that's minor for the headaches it would save you in cross device/version testing that you'd have to do.
Check out here to get started with crosswalk and cordova..
https://github.com/crosswalk-project/crosswalk-website/wiki/Create-Sample-App-With-Crosswalk-Cordova-Android
With the release of Apache Cordova Android 4.0.0, it supports "pluggable WebViews".
So, using Crosswalk with Cordova is just matter of installing the cordova-plugin-crosswalk-webview.
Related
Hi I'm new to Apache Cordova. I've recently developed a web application that works fine on chrome and devices but when i get Visual Studio Apache Cordova (visual studio 2015) output some CSS files seem to be not loaded completely i mean some parts of CSS are not working as it must. and the second problem is the output is different in different devices on nexus 5 it is 90% OK but in LG L70 or bluestacks less than 30% is OK.
anyone knows the reason and solution?
Thanks
Well, without any code it is hard to tell (and your question is very broad!). I also have to bite my tongue in order to not go raging against Cordova (again).
But from my (luckily) poor experience with Cordova you have do deal with different WebViews and their different implementations.
I recommend you to get the Android WebView version of your device and test your app with this in mind. May you find similarities like "Everything goes wrong in WebView versions below 3.2.1" and modify your app accordingly to your findings.
First make sure you don't have any errors in your html / css by using the online validators.
Second, make sure the CSS you are using is available on the version of Chrome / Android that those devices have (www.caniuse.com). Make sure you are using the browser specific prefixes where needed (i.e new versions of Chrome would not need, but older Chrome/Webview would).
In my experience that will find many of the issues with a Cordova app, especially on Android. Most likely your CSS is not taking into consideration all the variation among mobile browsers. It is not easy to do unless you have done it before.
Another way to ease these issues on Android is to use the Crosswalk plugin. Since you are using VS 2015 it is real easy and available in the config.xml editor to add. This will increase build time / size of the app, but it is just about necessary for serious Android hybrid app development. What crosswalk does is package a new up to date version of Chromium with your app. It makes many issues like you are seeing go away, plus it gives you a lot of newer web APIs (webrtc for example) on the devices.
One last option is to use a tested / supported library like ionic (can just use their CSS if you want and not full stack), jQuery mobile, Onseen UI, etc... You can use this together with Crosswalk to get a very consistent experience on all the Android devices / versions.
Yesterday I tried using Phonegap with a web app that uses angularjs and angular material. The performance is very slow on my device (ASUS Zenfone 5 running 5.0) including the animations and keyboard input which takes about a second before a character shows when typing. I've researched about Phonegap's performance and some says that I should try to use Crosswalk Project but still, the performance isn't good.
To my curiosity, I built an android app which uses the Android native WebView that uses WebChromeClient and the performance is better than a Phonegap + Crosswalk, but why? Isn't Phonegap also uses the Android native WebView then just load the site as an asset?
As far as I know, Phonegap/Cordova use the Chrome webview. By using Crosswalk, you ensure that you always use the latest Chrome webview, independent of what Chrome version is actually installed on your phone.
It could (but I think it's unlikely) lead to a difference in performance. What I expect however, is that some Cordova plugin you loaded is the culprit. I've seen (and read about) plugins that just drop the performance of your whole app.
EDIT:
I've only done one experiment with Angular Material myself, and I wasn't experiencing any real performance issues at the time, but I did read some people writing about it being slower than plain Ionic.
My suggestion would be to try to build an Ionic app (it's just plain Angular with performance optimizations and some handy directives). If you want to have Material Design for it, you can try Ionic Material. I made the switch to that, because I found some very hard to track issues with Angular Material, and it didn't follow the Ionic way of doing things.
Ionic Material has to easy to access documentation yet, but their Demo is full of code examples
I built an android app with ionicframework and cordova.
But when i try to run on my Samsung Galaxy S4 the app is really slower than the same code in the webbrowsers of my phone.
How can i expect to have the same perfs ?
I've tried :
android:hardwareAccelerated="true"
this.appView.getSettings().setRenderPriority(RenderPriority.HIGH);
this.appView.getSettings().setPluginState(android.webkit.WebSettings.PluginState.ON_DEMAND);
<uses-sdk android:minSdkVersion="14" android:targetSdkVersion="19" />
With the last 3.6 cordova version
How can i do to have the same performance as i can see on the phone browser (with meta app-capable for example) ?
It's hard to tell as you haven't provided code or a sample.
If you're not using the latest Android 4.4 KitKat, chances are you're using a really old WebView.
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.
This article goes deeper in the problem and it's worth reading.
If you want to achieve the same performances you have in your web browser you can replace your web runtime using Crosswalk.
Crosswalk can be easily integrated with Cordova.
With ionic framework you can simply:
ionic browser add crosswalk
If you'd like to specify a different version of Crosswalk, run ionic browser list to see which browsers are available and what versions. Then run:
ionic browser add crosswalk#10.39.235.15
Nick Raboy has written an interesting article which will guide you through all the step you need to take to integrate Crosswalk with Cordova + Ionic Framework.
Very helpful is the video with explains everything in a simple way.
Crosswalk can also be used in Shared Mode:
"Shared mode" allows multiple Crosswalk applications to share one
Crosswalk runtime. If the runtime is not already installed in the
device, it will be downloaded either from the Google Play Store, or
from a download location specified by the developer. When using this
feature, the Crosswalk library is not included in the application's
package, making it significantly smaller.
Producing a significant smaller APK file size.
It is not yet integrated in ionic framework and There is no road map to include this feature.
On a 1+1 I get the same performance through crosstalk as through the native webview. Unfortunately both these options are not quite as responsive as when the same app is tested on a 'venerable' iPhone 5s. So just using crosstalk might not be enough, but you could get lucky :)
I'm writing a game app that twists SVG graphics until they cry "Uncle!". The program works OK on an iPad (safari/webkit) when hosted from a web server, for which no more need be said here. It also works OK on an Android tablet when hosted from a web server, as long as a recent version of Chrome (like v.25 or later) is used.
The program doesn't access the internet at all, but plays with its SVG graphics, runs Javascript and stores status in HTML5 localStorage().
If I run the program on the "default browser" of older Android tablets the SVG graphics don't get handled correctly, thus my requirement for a recent version of Chrome on the tablet.
I have just created an APK for my app, and find that it doesn't use the Chrome browser when I install it on my really-new Android tablet. Rather, it seems to use a browser embedded within the APK, or at least called from the APK for which remnant libraries exist in the tablet.
My aim with the APK is to make my code run displayed by a recent webkit browser, which seems to mean running in the Chrome environment.
For my question, I need to change something. But what?
embed a Chrome browser in my APK?
tell the APK to use the tablet's Chrome browser?
give up using APK to distribute the program?
???
Do my dear readers have a clue for me?
Thanks,
Jerome.
I would recommend Crosswalk, however, since 19th of March 2017, it has been declared EOL (more info below). Still, it's by far the most stable solution out there, our team currently uses it in a production application. Put simply, it packages a Chromium based webview inside your apk and it's backed by Intel. You can use it starting from Android 4.X.
Official sales pitch:
Crosswalk is a web runtime for ambitious HTML5 applications. It provides all the features of a modern browser, combined with deep device integration and an API for adding native extensions. It is especially suited to mobile devices, with support for both Android and Tizen.
For Cordova 4.0.0 and higher there is an official Crosswalk plugin, making it really easy to get up and running: https://github.com/crosswalk-project/cordova-plugin-crosswalk-webview
If you have your Cordova project running, all you need to do is
cordova plugin add cordova-plugin-crosswalk-webview --save
to add the Crosswalk webview plugin. The next build will fetch all dependencies and package everything nicely.
Android 4.4.x
On Android 4.4 your hybrid app will run on a Chromium based WebView, however, it will be stuck on the same version forever (if I'm not mistaken it's Chromium 33). In my opinion it would be best to use Crosswalk here as well.
Android 5.0+
If you code for Android 5.0 and above, the Chromium WebView will be updated through Google Play. More info here: http://developer.android.com/about/versions/lollipop.html#WebView
CrossWalk version 20 and up
CrossWalk will drop support for Android 4.0.X starting with version 20. If you really need to keep 4.0.X in your support matrix, do not upgrade. I would recommend to build another APK for Android 5.X and above which no longer includes CrossWalk at all. More info on this
Crosswalk v23 is the last release (EOL)
Crosswalk has decided to release one last stable version in January of 2017, version 23. This ends official support for Crosswalk and leaves bugfixes and such to the community. More info in the blogpost
Notice!
I found that running my mobile hybrid app had better graphical performance on Crosswalk than when I relied on the system webview (tested on a Sony Xperia ZL, which is on Android 5.x, so the webview is updated through the play store). Why that is, I've no idea yet, maybe Crosswalk configures the Webview in certain ways? This needs further investigation.
try https://github.com/thedracle/cordova-android-chromeview
its a new project and needs more work but combines the chromeview project with cordova to embed chromium in a cordova android application
This looks like a promising option: Crosswalk + Cordova.
Benefits:
Use Cordova API
Use Crosswalk API
Cordova will use Crosswalk as its webview
Crosswalk does not use the Android webview, its based on Chromium
Github repo: https://github.com/crosswalk-project/crosswalk-cordova-android.
Updated answer for 2014: Android 4.4 and newer use Chrome webview by default. This is currently based around Chrome version 30.
One option would be to launch the Chrome browser with a link to the appropriate site.
This isn't a great user experience, but might get you some of the way there.
You can check for and launch the Chrome Browser with something along the lines of:
String url = "http://www.totallyawesomeurl.com";
String packageName = "com.android.chrome";
Intent browserIntent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
browserIntent.setPackage(packageName);
browserIntent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
List<ResolveInfo> activitiesList = context.getPackageManager().queryIntentActivities(
browserIntent, -1);
if(activitiesList.size() > 0) {
// Found the browser on the device, launch it
context.startActivity(browserIntent);
} else {
// The browser isn't installed, so we should prompt the user to get
Intent playStoreIntent = new Intent(Intent.ACTION_VIEW);
playStoreIntent.setData(Uri.parse("market://details?id="+packageName));
playStoreIntent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
context.startActivity(playStoreIntent);
}
It's worth noting that Chrome for Android is only available for ICS devices and above, so you might want to ensure you set the minimumTargetSDK to 14 and perhaps switch to using Opera for older version of Android if you site works in Opera which has package name "com.opera.browser"
It turns out that my Javascript was wrong. Things work OK on old browsers when I avoid a certain bug. I found it by being able to load an ancient version of Safari for Windows.
My problem was something like this:
var newValue = parseInt("030");
This returned 24, because "030" is base 8, right?
I changed things to force the base, and things are now OK:
var newValue = parseInt("030", 10);
For our Android app, we would like to embed our own browser/rendering engine. The most likely candidate for this, is Webkit/Chromium. We are looking for something similar to WebView, essentially, but backed by a browser (version) that we control.
Background
Significant parts of our app consist of web page fragments embedded in the view (served by the app itself). We try to do this as transparently as possible (from a visual/user experience standpoint). So far, we have been using WebView for this and that works for the most part. Except when it doesn't.
Some phone vendors have unfortunately decided to tweak the standard Android browser here and there. In some cases, this breaks our app or makes the fact the we embed a web page more noticeable.
Our Idea
We'd like to have a component similar to WebView but where we control what version of Webkit/Chromium (or some other rendering engine) is being used. It wouldn't necessarily have to be the latest and greatest version. It is more important that we can get our app to work consistently across as many Android devices as possible.
So far
Our research so far has not turned up anything useful. We have found three dead attempts to port Webkit to NDK (the bare Webkit for Android port uses functionality not available in the NDK and thus not to app developers):
Webkit Android port by Company 100 (no updates for over two years)
mogo-browser (their last revision was to delete all source code)
NDK Webkit (officially abandoned by its author)
Looking on StackOverflow, we have also found a number of similar questions, most of which being solved by pointing to WebView (we already do that, and it's not good enough)
Webkit component for Android
Embed basic WebKit + V8 in my app
Embedding a newer version of WebKit with Android app
We are currently investigating whether Chromium for Android (or parts of it) can be turned into a library that our app could use. Has anyone else done this?
Update
After having a look at the chromeview project on GitHub (accepted answer), we decided that we'd rather wait for Google to release a Chrome-based WebView on future Android devices. The Chromium rendering engine turns out to be fairly large (~40MB), which doesn't leave much space for the actual app :(
pwnall/chromeview · GitHub
https://github.com/pwnall/chromeview
ChromeView works like Android's WebView, but is backed by the latest Chromium code.
You should all check out the Crosswalk project. Sponsored by Intel, and in active development. They pull the Chromium sources and promise to make all new Chromium features available in Crosswalk within 6 weeks.
Crosswalk is a web runtime for ambitious HTML5 applications. It provides all the features of a modern browser, combined with deep device integration and an API for adding native extensions. It is especially suited to mobile devices.
Crosswalk supports Android 4.0 and newer, on ARM and Intel architectures.
Within in one hour of finding this project, I had my Cordova/Phonegap app running on an Android phone with Crosswalk. I'm glad I don't have to adjust my Javascript code to respect the shortcomings of the (pre-4.4) android.webkit.WebView.
https://crosswalk-project.org
Without WebKit there is a GeckoView. Sure it adds over 20Mb of libs to the project.
Nowadays, GeckoView seems an alternative to consider
I tried to use lastest code version of Chromium to build a custom WebView and it's successful.
I will give my approach but not the source code here right now.
Eventually, the size of custom WebView library is about 30MB, quite big for some small app. But it's wonderful because can support perfectly from Android 4.0.
This below is my method:
fetch source code of chromium and build web_view_apk (AndroidWebView test shell) follow this instruction https://www.chromium.org/developers/how-tos/android-build-instructions
use apktool to decompile the apk file of Aw Shell above. https://ibotpeaches.github.io/Apktool/
create your project with res, lib folder as same as decompiled project.
Manifest file is located in /src/android_webview/test/src/org/chromium/shell
src folder: you find the classes in chromium project source code which are respective the files in smali folder of decompiled project.
I will update my code later, but you can try my guide now if don't want to wait.
I would consider Chrome custom tabs:
https://developer.chrome.com/multidevice/android/customtabs