Build a hybrid application for Android

    imageMany people believe that hybrid applications may not have good performance, especially in terms of page construction (that is, they have low FPS). This is a misconception. If you skillfully assemble the application, then you can achieve good performance. The article describes an example of building such a hybrid application for Android in Windows 7 (although for iOs it will be almost the same).

    Suppose we have a ready-made HTML5 application in which the image is completely output through the Canvas element (I used the Phaser framework, 50 moving sprites). On the PC, this application runs without problems (60 FPS). On top-end branded smartphones, too, everything is fine (50-60 FPS). But if we take a mediocre tablet, the result will be just awful (3-15 FPS), even despite the good characteristics of the device.
    Therefore, our goal is to create a completely ready-to-publish apk with good performance indicators.

    At the moment, there are many tools to achieve this goal. The most popular of them are:
    • Cordova
    Ludei
    the Intel the XDK

    Project Ludei (Cocoon.js) makes building applications in the cloud, is simple enough to understand the concept. I advise you to pay attention to the CocoonJS Launcher App client application, which makes it easy to debug the application directly on the device. This can be very helpful when developing the application. But I do not recommend using this service to build the application, because There are a lot of bugs and a proprietary splash screen is added to the application.

    Intel XDK is a great tool I recommend starting with. Building an application is also done in the cloud. In fact, Intel XDK is a convenient GUI for Cordova with a full set of settings, plug-ins and an emulator.

    With Cordova, building is already done on your computer. This approach has only two advantages:
    • Assembly is faster;
    • The latest versions of components are used.
    There is a drawback:
    • It is necessary to organize the environment.
    In the article, we will consider just the latter option, since there are mainly problems with it, and since in the end you will switch to it anyway.

    So, let's begin. Install:
    1. Node.js
    2. git client
    3. Java Development Kit (JDK) 7
    4. Android Studio

    Next, open the Android SDK Manager and install:
    • Android 5.1.1 (API 22) platform SDK
    • Android SDK Build-tools version 19.1.0 or higher
    • Android Support Repository (Extras)

    Then we will generate a set of keys for signing apk in Android Studio. To do this, select Build> Generate Signed APK from the menu . In the window that opens, click Create new . A new window will open in which we enter all the data (of course, we remember the data ourselves).
    image
    After all, you can close Android Studio and never open it again.

    Then you need to change the PATH environment variable:
    1. Click on the "Start" menu in the lower left corner of the desktop, right-click on My Computer, and then click Properties .
    2. Click the Advanced System Settings button in the left column.
    3. In the dialog that opens, click Environment Variables .
    4. Select the PATH variable and click edit.
    5. Add the following to your PATH, depending on where the SDK was installed (I have f: \ AndroidSDK ), for example: 6. Save the value and close both dialog boxes. And only now, in fact, install Cordova. Open the command line and run: Then create your project. To do this, execute the command of the following form: This command has the following parameters:

    C:\Users\Root\AppData\Local\Android\sdk\tools;c:\Program Files\Ant\bin;C:\Users\Root\AppData\Roaming\npm;f:\AndroidSDK\platform-tools;f:\AndroidSDK\tools





    npm install -g cordova



    cordova create projectDirectory com.companyName.appName AppName


    projectDirectory - the directory of your project.
    com.companyName.appName - indicates the identifier of your project in the reverse format of domain names.
    AppName - indicates the display name of the application.
    All these parameters can be easily changed later in the config.xml file.
    After the command is executed, your project directory will be created. This directory will contain the www directory, which will contain the default application page files. Delete the contents of this directory and copy the files of your web application into it. Start file name index.html.

    Next, we work already in the project directory.

    cd hello

    Before you can build a project, you must specify a set of target platforms. In the article I will only consider Android. We will execute a team that will add the ability to build a project for this platform. After executing the command, the projectDirectory \ platforms \ android directory will appear and you can build debug.apk (debug package). The assembly of the debug package is carried out by the command: Now we will add the automatic signature of the package. Cordova signs the package with Gradle. Therefore, we can immediately set the key settings. To do this, in the projectDirectory \ platforms \ android directory, create a text file release-signing.properties in which write the following settings:

    cordova platform add android



    cordova build android




    storeFile=../../ keystore.jks
    storeType=jks
    keyAlias=myalias
    keyPassword=passwordhere
    storePassword=passwordhere

    As you understand, you need to use the data that was specified when creating the keys.

    Next, we will conduct the first test - we will collect a signed apk for publication. It takes several minutes to complete the command. At the end of the construction, we can find the finished apk in the projectDirectory \ platforms \ android \ build \ outputs \ apk directory . We will test the resulting apk on an average tablet and ... we will again get terrible results (5 FPS). At this point, many developers lose hope. After such a breakdown, they either run to www.ludei.com (because there, at least the result is something sane), or join the “asshole army” who are convinced that the hybrid application sucks. In fact, it is too early to lose hope. There is such a wonderful project -

    cordova build android --release





    Crosswalk . Using this project, you can embed the Google Chrome browser in your native Android application and play your project in it. The benefits are obvious: good browser performance and device OS independence.
    In Cordova, the Crosswalk project is added as a plugin. So it's time to expand our application with plugins. This is done very easily. At the command prompt launched from the project directory, run the following commands: The ability to set the startup screen saver will be added to the project. Be sure to install this plugin. Further you can add plugins according to your requests. Here are just a few of them: (the plugin adds the ability to control vibration) (the plugin adds the ability to determine the localization of the device)

    cordova plugin add cordova-plugin-splashscreen




    cordova plugin add cordova-plugin-vibration



    cordova plugin add cordova-plugin-globalization



    cordova plugin add cordova-plugin-inappbrowser

    (the plugin adds the ability to make requests to the server)

    Well, finally, add Crosswalk: After installation , we will collect the next apk and try it on the device. We, most likely, will also get lousy results (15 FPS) ... Here those who did not lose it during the first test lose hope. And these developers replenish the "army of assholes" who are convinced that the hybrid application sucks. But it’s too early to give up ... Here begins the "magic." For the Google Chrome browser, there is a special GPU-blacklist that restricts the use of WebGL. This is another buggy feature from Google. Why is it buggy? Firstly, the function limits not only the WebGL engine, but also significantly reduces the performance of the Canvas engine.

    cordova plugin add cordova-plugin-crosswalk-webview








    Secondly, although the function is called the “GPU blacklist”, it works like a “white list”. That is, if you have a top-end branded smartphone, then it is on this list and your application works great. And if you have some kind of “Chinese” (or even a branded non-top phone), then it is no longer on the list, and, accordingly, the application performance is low.
    Google explains this by caring for users. Like, on non-top branded smartphones, the browser can work unstably. Yeah, of course ... According to my observations, all this "instability" boils down to closing the application at extremely high loads (for example, the simultaneous creation of 200-300 objects).

    To achieve maximum performance. Turn off this feature. To do this, create in the directory projectDirectory \ platforms \ android \ assetstext file xwalk-command-line in which there will be only one line: That's it. Again, we collect the next project and experience ... As a result, excellent performance (50-60 FPS). The result is achieved. What's next? And then it remains to configure the configuration file , icons and screensavers . With this, I think you can handle it yourself. By the way, the start screen saver supports 9-patch Image technology . To do this, you just need to add the number 9 to the file name. As you can see, hybrid applications in skilled hands can have high performance. I hope this article helps you in creating them. Have a good day.

    xwalk --ignore-gpu-blacklist






    Also popular now: