Customize Crosswalk for Cordova project
I’m working on a Ionic project which is deployed to mobile devices via Cordova. For performance and compatibility, I introduced Crosswalk, which is a library embedding a Chrome into the app.
It’s working great and as expected. There is only one problem: the size is too big. It comes about 20MB for each architecture, so ARM and x86 need 40MB, while my app itself is only 10MB.
Fortunately, with Crosswalk-lite, the library size can be reduced by ~50%. The price is disabled features, and decompression at the first time of boot after installed. On my old Galaxy Nexus, the decompression takes ~20 seconds.
Crosswalk-lite seems in immature state, lacking customizations, including the ability to set the title and content of the prompt during the decompression, which is important to me that I want to comfort the users, using Chinese.
I followed the instruction, and successfully compiled a library with customized decompression prompt. I’m writing down some outdated steps, and missing caveats.
Compilation Steps
- Get a nice machine. I used a VPS with 8 cores and 16GB memory. It gonna use a lot of resources to compile chromium.
- Follow steps in Linux Build Instructions — Prerequisites, mainly download depot tools and install dependencies.
- Follow steps in Build Instructions (Android), checking out latest chromium code. I used
--no-history
parameter to get a shallow clone, so it’s much smaller. - Run
build/install-build-deps-android.sh
for more dependencies. - Clone Crosswalk source as described here, using gclient. Use crosswalk-lite branch in the url (appending
@origin/crosswalk-lite
). - Set XWALK_OS_ANDROID, configure chromium.gyp_env file (setting
target_arch=ia32
generates a library with both ARM and x86 support, settingtarget_arch=arm
generates a library with only ARM support). - Change anything you need in src/xwalk. In my case, I changed the string of
IDS_CROSSWALK_INSTALL_TITLE
andIDS_DECOMPRESSION_PROGRESS_MESSAGE
inruntime/android/core/strings/xwalk_app_strings.grd
. - Let the compilation begins! We’ll need
ninja -C out/Release xwalk_core_library
, andninja -C out/Release xwalk_core_library_aar xwalk_shared_library_aar
. It took 0.5~1 hour in my VPS. (Theaar
file seems just a zip file, so to combine different architectures, unzip, copy, and zip again should do, according to XWALK-1930). - All we need is the generated
xwalk_core_library.aar
insrc/out/Release
.
Usage Steps
- According to Developing with Crosswalk AAR, use
mvn install:install-file
to installxwalk_core_library.aar
into local mvn repository. The version is specified in parameters and will be used later. - In
config.xml
of the Ionic project, updatexwalkVersion
to the version we just made up and used. - In the generated
platform/android
, editcordova-plugin-crosswalk-webview/xxx-xwalk.gradle
, findrepositories
block, and addmavenLocal()
. (The cordova doc is wrong, the url should not be deleted.) It’s like
repositories {
maven {
url xwalkMavenRepo
}
mavenLocal()
}
and the dependencies
block, with the full version info.
dependencies {
compile 'org.xwalk:xwalk_core_library_canary:(version without parenthese)'
}
-
Build and install the apk.
-
<preference name="loadUrlTimeoutValue" value="60000" />
seems necessary inconfig.xml
, otherwise, the decompression will use up the time and the page won’t load, though it’ll work in next boot.
TODO:
- Cordova plugin
cordova-plugin-crosswalk-webview
needs work to support customized libraries. - There may be code setting timeout for device ready. The first try to load contents may be error-prone. It may be a good idea to refresh somehow after decompression.