Although there are many developers that say that create your mobile project with hybrid technologies is a condemnation for the performance of the application, that isn't totally true. When they talk about performance, they must be talking about the hardware specifications of the device, because an HTML5 cordova based application can satisfy almost all the performance requirements of a basic application. Then will come the fight about "Native is a lot better" or "Writing with HTML,JS,CSS will make the development process a lot faster" and so on. Well, getting off topic about the issue of the hardware, let's imagine that we all have the Samsung Galaxy S7 Edge with top upgrades etc. but we work in a simple application (yep, we cannot compare the speed of a game built with native code and a game with HTML ... or maybe yes, but still reading) built with the latest and best optimized JS and CSS frameworks. This application will run without any "performance" issue. Now, we have a not so new, but not so old, samsung device with Android 4, the application will run too without performance issues, however, the same design and application layout built with CSS and JS that works with the new Samsung, seems to look the same that your application tested in Internet Explorer 8 (I mean, not so exaggerated but it simply doesn't look so well or works as it should with the current code).
Think about it, not everyone can buy a last-generation device, but we need that our app behaves the same on all devices ... a lot of code, test and time if you want to write code that works on every version of the installed WebView of the device. Fortunately, for those ones that want a functional solution, we recommend them to use the Crosswalk Project in their cordova apps.
The Crosswalk Project is an open source, web application runtime built with the latest releases of Chromium and Blink from Google. The project's goal is to provide the most up-to-date and innovative capabilities to web applications including experimental APIs and extendibility. No developer wants old, outdated devices to prevent them from using awesome new Javascript APIs, that's why Crosswalk exists. Give your users the latest version of the web by using the Crosswalk Project as your app’s embedded browser.
Advantages and disadvantages
Although the project sounds very promising and sounds perfect, is worth to say the advantages and disadvantages of its use:
Advantages
- You can debug your application remotely even in old android versions (which is impossible with).
- Use all the features available in modern web browsers: HTML5, CSS3, JavaScript.
- Improve the performance of your HTML, CSS, and JavaScript.
- Get consistent, predictable behavior by reducing Android device fragmentation.
Disadvantages
- Architecture dependent, each cordova application will needs at least two APKs, one is for IA architecture and another is for ARM architecture.
- The APK size increases considerably (2MB empty cordova project but with crosswalk 30MB in x86 and 27MB in armv7).
If you understand the advantages, disadvantages and you still want to use Crosswalk in your project, then let's get started !
Implementing Crosswalk
To replace the default WebView of the device with Crosswalk is so easy as install it in the same way you do with a cordova plugin.
1. Create a cordova project
Open a new terminal and navigate to the folder where your project will be created (in this case in the Desktop):
cd C:\Users\<MY-USERNAME>\DesktopAnd create a new cordova project (or it can be already an existent project)
cordova create sandbox com.mycompany.sandbox SandboxThen navigate to the project folder (in this case sandbox):
cd sandboxNow you're located in the directory of your cordova project with the console.
2. Add the Android platform
You need to install a platform for your cordova project, in this case Android. To install the platform use the following command:
cordova platform add android --save3. Install Crosswalk
Once the platform has been installed, proceed to install the Crosswalk view in your cordova project executing the following command:
cordova plugin add cordova-plugin-crosswalk-webviewWait till it's installed and finally, test your empty application either in your device or emulator:
cordova run android --device
REM or in the emulator
cordova run android --emulatorCongratulations, you've just implemented and replaced the device WebView by the Crosswalk Webview. To see the generates APKs navigate to the APK folder (\YOUR-CORDOVA-PROJECT\platforms\android\build\outputs\apk) and you'll find the android-x86-debug.apk and android-armv7-debug.apk files. When the development of your application is ready and you want to publish it in Google Play, you may want to read this article about how to submit multiple APKs in Google Play here.
We recommend you finally to visit the Crosswalk Project in the homepage here and the documentation for more information.
Happy coding !
