Porting Chrome* Apps to Mobile Using Crosswalk and Apache Cordova*

Chrome* Apps can run on any platform where Chrome is available, which covers almost all of the desktop platforms out there. This is not the case for mobile platforms, which often use a different app hosting model and have their own app stores. As Chrome apps are built using browser based technologies, we could technically just repackage them into mobile apps using the Apache Cordova* project and submit to app stores. Though, this process is not easy or straightforward as chrome apps are built using some notion of Chrome apps concepts like app life cycle, manifest, content security policies and so on.

Chrome Apps for Mobile project solves this problem by providing a set of tools to easily convert your existing Chrome Apps to Mobile platform of your choice. Please refer to the project site for full details - https://github.com/MobileChromeApps/mobile-chrome-apps .

Chrome Apps for Mobile uses Crosswalk by default, enabling access to the latest web APIs and performance enhancements. Crosswalk project, started by Intel's Open Source Technology Center, is a standalone HTML5 runtime providing access to latest web standards and experimental APIs. Please refer to the following link for details - https://crosswalk-project.org/documentation/about.html. The full list of Web APIs can be found here https://crosswalk-project.org/documentation/apis/web_apis.html

Though Chrome Apps for Mobile project is still in developer preview, we found that it already has enough functionality to fully port existing chrome apps to mobile platforms. As with any porting, there are some limitations. Please check this list of APIs and Libraries to see their current working status - https://github.com/MobileChromeApps/mobile-chrome-apps/blob/master/docs/APIsAndLibraries.md

Before embarking on porting your existing Chrome app to mobile platforms, get familiar with the tools using a sample application. The cca tool from Chrome Apps for Mobile project has all the functionality needed to convert an app to a mobile platform. There are additional tools available as well - live deploy/testing (CADT) tool, and a specialized IDE (CDE) for development.

We will walkthrough the basic process of converting a Chrome app into a mobile platform using the cca tool.

If you do not have a sample Chrome app, go ahead and create a basic Chrome app using the instructions at https://developer.chrome.com/apps/first_app, or use the “hello-world” sample from https://github.com/GoogleChrome/chrome-app-samples/tree/master/samples/hello-world.

We will make some minor changes to the hello-world app, to see how the app works on different platforms. We will use the Chrome runtime ‘getPlatformInfo’ method to detect OS information at runtime.

Create an ‘osinfo.js’ in hello-world project folder, with below code snippet.

document.addEventListener('DOMContentLoaded', function () {
    chrome.runtime.getPlatformInfo(function (info) {
        var div = document.getElementById("osinfo");
        div.innerHTML = info.os;
    });
});

And modify the index.html so we can show the underlying OS information.

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Hello World</title><link href="styles/main.css" rel="stylesheet"><script src="osinfo.js"></script></head><body><h1>Hello, World! <br /> Your OS is '<span id="osinfo"></span>' !</h1></body></html>

With these changes, the sample Chrome app will look as shown in the screenshot below.

Let’s convert this app into a mobile app, using the Chrome Apps for Mobile Project.

Create the mobile app using the cca tool.

The ‘cca’ tool provides several options to create a mobile app. We will use the “—copy-from” option, which simply creates a separate project folder for the mobile app with sources from given folder.

Make a copy of the “hello-world” chrome sample, and point to it in “cca” invocation as shown below. Before invoking “cca” for the first time, run “checkenv” to ensure you have all the tools configured properly.

2. Run the mobile app!

cca emulate android

That is all we have to do. The “cca” tool takes care of automatically converting the Chrome manifest entries and wires everything up to create an Android* app. Please see below screenshot.