Integrating Chromium WebView with Ionic framework

[shivanik]

Hi i’m new to ionic. I created a sample app and ran it on Nexus 4 (Android 4.4) as well as samsung galaxy S3 (Android 4.1 ICS). I integrated Facebook and had a page displaying a big list of friends with their profile pic (about 450). I see that the scrolling is much faster in nexus 4 than in samsung galaxy. I did some googling and found out that on Android 4.4, the default WebView uses Chromium WebView but on Android 4.1 it uses CordovaWebView.

I would like to get the same performance for the samsung phone and embed Chromium inside the code generated by ionic platform. Has anyone tried this ? Please help.

[alon_gubkin]

Check out Crosswalk.

[Calendee]

Also, Searching showed these other topics that might be of interest.

Did anyone try Crosswalk or CocoonJS with Ionic?

Cordova uses the default WebView. Crosswalk and CocoonJS use Chromiun to render the app, which is said to improve speeds on Android. Did someone already try to port his app over and did some somparisons? CocoonJS is in private beta right now and the documentation to use Cordova apps with Crosswalk is… well… a little complicated (escpecially since I build my project with CLI and not with Eclipse).

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

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 Ch…

Ionic for production apps

@coen_warmer yes Crosswalk is Android 4.0 and up, the Android APIs appear to be the reason why. As previously mentioned the beta is the better release to use. It’s Chrome 34, supports external debugging from chrome inspect (enough of a reason to use Crosswalk) and all the other nice modern apis, hello websockets and webworkers. Latest Cordova plugins work fine, I’m using Camera, File, Device, Barcode Scanner, a custom plugin that accesses Bluetooth among others. I’m using Crosswalk Cordova 5.…

[shivanik]

Thanks all for your reply. One more question, is there any other way to optimise really long lists in HTML5 so that scroll is smoother on lower Android versions as well. I tried implementing infinite scroll but thats not making too much difference as well.
Is there a way to compile the app code much more closer to Native ?

[shivanik]

Or can we fine tune ionic somehow to perform better for scrolling really big lists

[peter]

Yes infinite scroll was just added! Checkout collection-repeat which was just added in Beta 2!

[shivanik]

Thanks…thats made the scroll so much better. I tried this code pen code

Collection-Repeat: 1.0.0-beta.9

on Nexus 4 (android 4.4) as well as on Samsung Galaxy S3 (android 4.1)…on the samsung phone, it seems to hang mid-way during the scroll. IT looks like some kind of bug.
You can try cloning it from here:
git clone https://gist.github.com/11531038.git

[shivanik]

The logs show the following error when the list scroll hangs:

D/CordovaLog(20585): http://code.ionicframework.com/1.0.0-beta.3/js/ionic.bundle.js: Line 32999 : Uncaught TypeError: Cannot set property ‘webkitTransform’ of undefined
E/Web Console(20585): Uncaught TypeError: Cannot set property ‘webkitTransform’ of undefined:32999

[peter]

I would suggest creating a new topic on the forum since this has deviated from the original one.

[andy]

Could you create an issue for this @shivanik?

Build software better, together

[shivanik]

Created the issue. Thanks