Use The Ionic CLI To Integrate Crosswalk Into Your Project

Not too long ago I wrote a very popular tutorial for integrating Crosswalk into your Ionic Framework mobile application.  Since then, the guys at Ionic released version 1.3.2 of their CLI and it makes the process even easier than I had previously demonstrated.

The CLI integration is still beta and there is a lot of confusion around it, but this article should clear things up in regards to its usage.

Let’s start by creating a fresh Ionic Framework project:

Notice in the above set of commands I included the iOS platform.  Although Crosswalk has nothing to do with iOS, I left it in there to demonstrate that your application can still contain both platforms.

At this current stage, we aren’t using the Crosswalk runtime.  To add it, run the following command from your Terminal or command prompt:

When you build your Android project, it will now be using the Crosswalk runtime.

By default, your binary APK file will contain both x86 and arm7 architectures.  This will result in a large file size.  Optionally, you can build split binary APK files with the following command:

This will result in an x86 file as well as an arm7 file.

Like mentioned in my previous tutorial, the Crosswalk runtime offers a huge performance boost to your Android application for devices that run an Android version less than KitKat 4.4.4.

Track the progress of this CLI feature because it will probably get a lot better once it is out of beta.

A video version of this article can be seen below.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.

  • I have been trying for weeks to add crosswalk to my ionic project, but with no success. I’m in windows platform.

    • What kind of errors do you get? I don’t use Windows, but I can try my best to help.

      Regards,

  • Jordi Alcover

    Hei Nic, your tutorials are awesome !!!
    could you talk sometime about how to make an android app larger than 50 mb using crosswalk, thanks in advance and great keep up your great work

    • Thanks for the compliments, but I have a question. What purpose would a tutorial on making a 50MB Crosswalk application serve that this one wouldn’t?

      • Jordi Alcover

        As the crosswalk itself is about 36 mb when you make an app that contains some graphics you easily reach the limit size from google play of 50 mb. I know it’s quite tricky to get the file expansion to work, that’s why I asked/suggested you that issue.
        thanks in advance

  • Earl

    Hi!
    I think it could be useful to know this: http://forum.ionicframework.com/t/differences-between-apk-sizes-uncompressed-minified/15687/12It doesn’t creare two apks by default and even if you tun the command: BUILD_MULTIPLE_APKS=true ionic build android
    In order to create two apks you have to create a new file 🙂

    • The link you posted cannot be viewed and I don’t understand what you’re trying to say. Can you please try again?

      Regards,

      • Earl

        http://forum.ionicframework.com/t/differences-between-apk-sizes-uncompressed-minified/15687/10
        Can you read it now?
        btw i asked why i didn’t get two apks when i run the command: BUILD_MULTIPLE_APKS=true ionic build android
        The answer was:
        Two have two separate architecture builds, it requires a gradle.properties file in yourplatforms/android directory.
        In this file, place the following:
        cdvBuildMultipleApks=true

        • Makes sense. Looks like they made this change in 1.3.3 and my article is based on 1.3.2. Because it is still beta, things change quicker than I can track.

          Thanks for sharing this information!

          Regards,

  • DaniloOliveira28

    Hello Nic,

    At the beginning of Ionic Crosswalk release I could not follow these instructions, I was getting a lot of errors so I followed your previous tutorial. Now, I think that they fixed some problems and I can generate the apks.!

    Well, we are uploading our app to store. what do you think, what is best?
    1-> Upload just one apk with ~50-60mb?
    How can I generate just one apk?

    2-> Upload multiple apks, one for each architecture.
    Can I do this? Do you have some good reference in how to achieve this?

    Thanks you!

    • Per one of the other comments:

      https://www.thepolyglotdeveloper.com/2015/02/use-ionic-cli-integrate-crosswalk-project/#comment-1838644971

      The CLI has changed a bit since writing this article. If you follow those instructions you will either get one or two APK files depending on if you set the tag to true or false.

      You can upload multiple APK files per Google Play project, so it is up to you if you’d rather save yourself time and upload one, or upload two smaller versions.

      Also, that sounds a bit scary if you’ve got an app that is 60MB even with Crosswalk. You may consider compressing your assets and making them mobile friendly.

      Regards,

  • t pankaj kumar

    Hi Nic,
    i had build two application
    1) with Ionic + Crosswalk .
    2) Ionic without Crosswalk .
    The problem i’m getting with Ionic with Crosswalk is that when im trying to press back button on main page(the one that came from sample i.e “tabs”) the entire emulator crashes.
    But im not getting any sort of problem with Ionic without Crosswalk.
    can you please help me ?
    Thank you !

    • What do the logs say?

      If the logs are Java related, I think it is probably a bug with Crosswalk that should be brought up with them. If the logs are JavaScript related, you might have other errors in your code.

      Let me know.

      Regards,

      • t pankaj kumar

        The problem i found is that im getting this error only on Ubuntu machine,When i created the same on Windows machine every this is fine.
        Thank you for the reply 🙂

        • It shouldn’t matter between Windows and Ubuntu. I use Ubuntu myself and never run into any issues.

          You sure there are no permission issues in your current Ubuntu setup?

          Regards,

          • t pankaj kumar

            The actual problem is that the android emulator crashes when ever i open chrome for android browser.So the same happening with crosswalk runtime on ubuntu machine.The only solution is to switch to windows machine.
            Thank you.

          • I’m not sure how that makes sense, but I guess whatever works is the way to go.

            Regards,

  • c3p0

    Thanks a bunch Nic. Great stuff as always.

  • Bon Lemuel Dela Cruz

    Hi Nic, my app crashes upon running it on device. Help please.

  • Hi there!

    I can successfully install cross walk via ‘ionic browser add crosswalk’, but after building it for android nothing changes, the apk size stays the same.

    Do you have any ideas on why this is hapenning?

    • You might want to open an issue ticket with the Ionic guys. Could be a bug.

  • Ludgero Parreira

    Hi Nic. x86 and arm7 architectures have to be included on the final apk right, the one we send to the play store ?

    • Ludgero Parreira

      sorry, you talk about that on the video. Thanks.

  • Varo A. Benavides

    You deserve to be president.
    Thanks for all this amazing Ionic tutorial