Chapter 7
Chrome Web Store
7.1 Source Code
All the distribution project files and examples are available at the website http://HTML5GameEnginesBook.com/. All the code, graphics, and sound are licensed free for personal and commercial use (MIT and CC-BY-3.0).
7.2 Introduction
If you have followed the guides in any of the previous chapters, then you have successfully written a game that can run on nearly all computers and mid-to-high-range mobile devices being manufactured in 2012 (except, perhaps, Turbulenz).
But there is slight caveat to that statement: The player has to be online and direct their browser to the site serving the game libraries every time they want play. This inconvenience is the main motivation for an entire third part to this book. After all, the game is just JavaScript and media files. Once the web server hands over the files, its job is done. The player could disconnect immediately.
The purpose of Part III is to look at various ways to get the game into the hands of players. We want the player to be able to find and install the game without having to visit our obscure website every time they want to play it. We want the player to be able to find our game through all the major app centers they already know and trust. We want the player to be able to play the game even if they aren’t online.
In this chapter, we will look at distributing our game as a desktop app through the Chrome Web Store. In this example, we will be using MechaJet from Part II (page 75), but any game supported by Chrome will do (which is all of our example games).
7.3 Chrome Web Store
Chrome Web Store can best be described as “Google Play but for apps on the web.” It has also been described by critics as “a solution looking for a problem [64].” Looking at just purely a technical spec list, the critics may be correct. After all, why ask the user to install an app when the actual site is just a bookmark away?
Yes, perhaps internet power users have little need for an app store for their web apps, but let’s ignore the critics for a brief moment and look at the bigger picture. The Chrome Web Store has significant gains beyond giving us the simple “offline mode”. That’s gravy. What it really gives us is yet another avenue for users to find (and possibly buy) our game. With an API (application programming interface) that’s so easy to use, a potential audience of hundreds of millions of users (the store is available on every new desktop Chrome browser tab), and a registration fee of just $5 [65], there is simply no reason to leave our game out of it.
7.4 From Web App to Chrome App
7.4.1 Getting Started
Chrome Web Store apps begin life as a normal web app. This may seem obvious, but if you are coming from the land of Android or iOS development, you often create the app first and then the website second. With the Chrome Web Store, create the web app first. We’ve done that already with MechaJet. With our fully functioning web app, we will now make it into a Chrome app. The first step is:
- Give the app a permanent home.
This can be a subdomain of a normal domain (like myapp.blogger.com) or the root domain. Google will ask you to verify ownership of the site. There are various ways to verify ownership. The easiest method is to upload an .html file they give you. Having a website for the app is not a technical requirement. This is for Google to tie your app to a site.
The next step is:
- Create icons and images.
Submitting to the Chrome Web Store requires several images:
- App icon that is 128 × 128 named “icon 128.png”.
- At least 1 screenshot that is 1280 × 800 or 640 × 400.
- At least one promotional banner that is 440 × 280.
See the Tools Appendix on page 175 for image software that may help you in creating these icons. These images all have associated guidelines beyond just pixels. Also, the app submission page requires text and other requirements. Expect to spend a day creating images and gathering information to submit your app. For now, we are only concerned with bundling up our app into a developer package. For that, we only need the app icon.
Next step is:
- Create a Manifest.
Those who have worked with Android development will be familiar with the term “manifest”. It is a file that makes declarations about the overall app package. Google Play requires it for Android apps, and Chrome Web Store requires it for Chrome apps. The Chrome Store version is much easier. It is simply a JSON file. There are several items that are required.
- Name of app
- Description of app
- Version of app
- manifest version, which is currently “2”
- Icon we mentioned earlier
- A launch specification (either local_path or web_url)
The manifest.json used in our example is printed in Listing 7.1. It is the bare minimum required to package the app and let it run locally.
{
" name ": " HTML5 Game Engines Book Demo ",
" description ": " MechaJet demo game ",
" version ": " 0.0.0.1 ",
" manifest_version ": 2,
" icons ": {
" 128 ": " icon_128 . png "
},
" app ": {
" launch ": {
" local_path ": " index . html "
}
}
}
Listing 7.1. Chrome manifest.json.
Our app would be classified as a “Packaged App.” Chrome also supports “Hosted Apps” for online games. This may actually be more fitting for your needs if your game needs a lot of server-side management. The user will visit our site and Chrome can store the necessary information to be able to play portions of the game offline. To get you started, Listing 7.2 is an example of such a manifest.
{
" name ": " HTML5 Game Engines Book Demo ",
" description ": " MechaJet demo game ",
" version ": " 0.0.0.1 ",
" manifest_version ": 2,
" icons ": {
" 128 ": " icon_128 . png "
},
" app ": {
" urls ": [
" *:// chrome . html5gameenginesbook . com /"
],
" launch ": {
" web_url ": " *:// chrome . html5gameenginesbook .com/"
}
},
" offline_enabled ": true ,
" permissions ": []
}
Listing 7.2. Chrome web app manifest.json.
The difference between “Packaged App” versus “Hosted App” is mostly one of permissions. If your app requires extension-level changes to the browser experience and always-on functionality (such as notifications), you will need a packaged app.
Our Chrome app is now finished. The next step is to install it.
7.4.2 App Development
“App Development” is different from the Chrome Developer Tools mentioned on page 39. To enable the app developer mode in Chrome, click the “Customize” icon in the top right and then navigate to Tools → Extensions. Then enable Developer Mode.
From there, you can load your unpacked extension. This will immediately tell you if your manifest JSON is well-formed and valid. If you are having problems http://jsonlint.com/ is a nice free JSON validation tool.
Go to your apps tab and you should see your 128 × 128 app icon. Click it, and if all is well, you will be taken to your game in full offline glory! From this extension page is also where you pack your extension into a “.crx” for distribution. You also can click to reload an unpacked extension to help your development.
7.5 Summary
With just 14 lines of additional code, a few extra images, and the help of Chrome, we turned our HTML5 game into a desktop app that can be played offline. Submitting it to the Chrome Web Store will give us access to millions of Chrome users. As of May 2013, there are 750 million desktop and mobile Chrome users [82].
In the next chapter we will look at the more involved task of using Ejecta to package MechaJet into an app that can go into the Apple App Store for distribution to iOS devices.