One of the most critical phase of game/app development, is it’s distribution. Android has Play Store and iOS has App Store. Similarly, Google provides a store to distribute your HTML5 powered Apps and games.

Google’s Chrome Store publishes Web Apps for its Chrome Web Browser and it’s all new operating system Chrome OS. Chrome OS is an HTML5 based operating system.

Distributing your HTML5 Games and Apps through such platforms can surely provide you with a huge audience. We tried to port our HTML5 sample ‘The Chat App’ to this platform and it ran perfectly on it. The source code for the ported sample is available here.

You do not require any extra effort to port your Apps/Games to this platform other than simply creating a Manifest File. Chrome Web Store has a particular format for it’s Manifest File, which each developer has to follow in order to have his App on the store.

Chrome Web Store

Unlike Firefox Marketplace which targets mobile users, Chrome Web Store is currently available for desktop versions of chrome browser and chrome OS. It requires manifest.json file.

Chrome Web Store can have two types of Web Apps – normal Web Apps and Packaged Apps. Normal Web Apps are links to hosted Web Apps whereas Packaged Apps look and feel like native desktop Apps. Packaged Apps do not open in a new tab in chrome browser, rather they have their own window like any other native App.

To create a web App, you require a manifest.json file which looks like this:

{
"name": "The Chat App",
"description": "A Chat application powered by AppWarp",
"version": "0.0.0.1",
"manifest_version": 2,
"icons": {
"128": "icon_128.png"
},
"app": {
"urls": [
"http://appwarp.shephertz.com/wp-content/themes/twentytwelve/Demo/html5chat/"
],
"launch": {
"web_url": "http://appwarp.shephertz.com/wp-content/themes/twentytwelve/Demo/html5chat/"
}
}
}

Here you need to specify the web_url, to define what web page will be opened when user clicks the App’s icon. The ‘urls’ section in ‘app’ defines the domain that the App will be accessing. Other keywords – name, description,etc are self explanatory just like in Firefox OS.

Packaged Apps are slightly different. You need to create an additional JavaScript File which will run in background and control your App. The Manifest File looks like this:

{
"name": "Packaged Chat App",
"description": "Chat Application powered by AppWarp",
"version": "0.1",
"app": {
"background": {
"scripts": ["background.js"]
}
},
"icons": {"128": "icon_128.png" }
}

Here, ‘background’ section defines the scripts that will run in background. In our example, background.js is responsible for creating the window.

The code of background.js is:

chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('index.html', {
'bounds': {
'width': 1024,
'height': 600
}
});
});

chrome.app.runtime is the namespace for runtime provided to your App to control it. We have added a listener to onLaunched event which executes as soon as a user launches the App. This event further creates a window with size 1024×600 and loads the index.html.

To run your App, Click the ‘Customize and Control Google Chrome’ Button on the top right side of Chrome Web Browser and select Extensions in the Tools option. In Extensions panel, click the load unpacked extension and select the folder which contains the manifest and App files.

You will see your App in the Apps’ section of your Chrome Web Browser and you can access it from there.

This is how you can build Apps for the Chrome Store. Once you have developed your App, you can go to their developer’s page and submit your App.

Our AppWarp HTML5 SDK is 100% compatible with such platforms, so go on and start creating multiplayer games for these platforms too.

If you have any questions or need any further assistance, please feel free to write us at support@shephertz.com