Has anyone integrated an Ionic project with Crosswalk or Android ChromeView?

ionic-v1
1

And if so…Care to share how you did it?

Some background for the uninitiated: Cordova on Android 2.3 all the way up to Android 4.3 uses the stock Android browser to display apps. These browsers offer varying levels of compatibility and speed with modern websites- leading to a ton of debugging of Ionic apps built for older Android platforms. By using a library such as Crosswalk or Android ChromeView you’re running your app within an up to date version of Chrome, without the user having to have Chrome installed as an app on their phone. This, from what I have gathered tremendously improves speed and cuts down on issues such as taps and gestures not registering.

So I’ve read a couple of people have implemented it in their projects. I think it would be tremendously helpful for the whole community (as well as cutting down on the number of bug reports for the devs) if we could have some easy to follow steps on how to integrate this within our existing projects.

Anyone who was successful care to share?

2

I’ve never used it myself, but @mquadrat posting something about this a while ago. Maybe you should get in touch with him about it and get some advice

3

Other thread in ionic forum

4

I know the thread @mquadrat, I was hoping somebody could provide some instructions on the forum. I know it would certainly cut down on support requests / bug reports if people start using these libraries instead of the stock Android browser in their Android builds.

5

Yeah I was also hoping for some advice. Seems like we have to figure it out on our own :wink: Not sure when I find a few hours to test it out. I’m very busy at the moment.

6

Well, I haven’t tackled it yet, but when I get around to deploying on Android I certainly intend to use Crosswalk myself if Ionic hasn’t yet rolled it (or ChromeView) into the cli.
I may play around with that sooner than I planned if others are interested. I think it’s going to be crucial for supporting Android. The stock web view on pre 4.4 devices is a donkey.

7

It’s pretty painless to migrate the code from ‘assets’ over to the CrossWalk preferred location if you use the CrossWalk ./bin/create command to use as a template. The biggest pain point was adapting to the workflow it forces on you - specifically using the ./bin/build and ./bin/run in the dev cycle (instead of cordova/ionic prepare/build/run) and switching from the ‘cordova’ binary to ‘plugman’ to manage plugins. Coincidentally CrossWalk solved a myriad of problems with elements that are generated dynamically that are missing (or rather disabled/invisible) on the device but appearing in a emulator or hosted environment.

8

Could you provide a tutorial or blog post explaining each step ? It would help a lot of people.

9

It’s literally covered in length on the CrossWalk website.
Edit: added links
Create Sample App WIth Crosswalk Cordova Android
Crosswalk Cordova Android

1 Like
10

Thanks for the links !
Unfortunatly, I have a BUILD failed error with the Hello world app :confused:
I’ve posted on the intel forum : https://forums.html5dev-software.intel.com/viewtopic.php?f=34&t=5884

11

I am not having any problems using Eclipse. The end result you should have are three projects (CordovaLib, xwalk, and the App). CordovaLib and xwalk are Libraries for the App project. In order for me to use the Angular Eclipse plugin I create a symlink to the assets folder (in my case www) and create a new Javascript project in Eclipse (for a total of four projects). With this setup I can run Ripple and deploy to emulator/device as well as jump into the Java source while building out the application.

12

I resolved my issue by using the last beta version. Everything is so fluid now ! :smiley:

13

Did you switch from the Canary branch to the Beta branch? What version of were you having issues with?

14

I had issues with the last stable version and I switch to the last beta which works very well.
I made the change after reading this post.

15

If you want to build project again using “ionic build android” you can follow these steps:

  1. Migrate project to CrossWalk as given on their website. Follow eclipse steps instead of replacing cordova library. (keep cordova library file on platform\android as it is, don’t replace)
  2. I noticed that it changes project.properties file (when you import project in eclipse and change the dependencies)

I kept both project.properties file. (prior to project import in eclipse - projectC.properties, after import - projectT.properties)

I created android.sh file with following lines:

#!/bin/bash

mv platforms/android/project.properties platforms/android/projectT.properties
mv platforms/android/projectC.properties platforms/android/project.properties
ionic build android -d
mv platforms/android/project.properties platforms/android/projectC.properties
mv platforms/android/projectT.properties platforms/android/project.properties

now you can build project using this android.sh file and compile project in eclipse.

16

I can confirm Crosswalk improves the scrolling and transition animations. Tested on Galaxy S4 4.4.2.

In Eclipse you import the crosswalk framework folder as a project. I used the Cordova Android (ARM) stable version.
Then Eclipse in project properties of the app, remove CordovaLib from Libraries and add Cordova and xwalk_core_library. Don’t forget to add Wifi and Network state permissions to Android manifest file.

It would be great if ionic CLI would support this.

17

I also used Crosswalk on a Galaxy S3, and solved many problems like phonecalls and various performance enhancements, specially on video. All the app feels much more responsive, and more native.

My way is probably the simplest: install all comand-line apps necessary (only needed to install python in my case, already had Ant and Java).

Then download a crosswalk-cordova zip (I used an 8 beta version, had zero problems).

Create a new app using the new template project. Then replace the <new app>/www content with your current Ionic <app>/www contents, and execute .\cordova\run.

I also can’t wait for Ionic to use it on the CLI.

18

If anyone is still facing issue in packing Ionic app with Crosswalk, check my response on below thread.
I use IntelXDK to package Ionic app with crosswalk and its simple few clicks, no command line required. I hope below link will help many, let me know if you face any issues in following the instructions.

19

I also packaged my ionic project with Intel XDK and crosswalk, however I didn’t see any animation performance improvement.

What improved my animation perf a little bit was using bindonce fix. It worked fine for a small list which used to suck with default ng-repeat. But when I use a slide animation for a view with resolve, it lags as usual.

I believe Android animation performance should be Ionic Team’s number 1 priority at this point.

20

I agree. Android needs focus. The performance is crap. I have the very latest Samsung Alpha and it lags horribly. While on iOS it feels like an app.

Please work on the Android native feel!

1 Like