Publishing an HTML5 Mobile App, Part 3/5: Distribution and Marketplaces

You are reading a copy of this article! Visit the original on Code Planet.

The most tedius port when dealing with each marketplace is acquiring screenshots, especially with iOS.

iOS / App Store

Cost: $100 / year | Release Approval: 8 Days | Update Approval: over 7 Days ???

If you want to release apps on the iOS App Store, it’s going to cost you $100 per year. For some people that’s not a lot of money. If you’re a small developer that number could be prohibitive. There’s another one-time-fee that many overlook, and that is the purchase of an Apple computer. If you’re like me you’ve already got a MacBook Pro. If you’re not like me, you can pick up a Mac Mini for $500.

I submitted SGoL to the App Store on August 26th, and it was approved September 3rd (8 days later). I submitted an update on September 12th, but still haven’t heard back (at least 7 days). Keeping these numbers in mind and knowing that Apple may very well deny your application can be important to big companies with press releases. However if you’re an indie game developer the scheduling may not be a big deal. I got lucky and was approved on my first try, YMMV.

At one point I had an issue with my account (Apple calls it an iTunes Connect account for some crazy reason) and I had call Apple Developer support. Apparently my account was fused into another developers account, and their customer database had some referential issues. Another phone call and two hours later I was able to log in. I didn’t have any issues like this with the other marketplaces, however my accounts on the other marketplaces were much newer.

Capturing screenshots for iOS is a pain in the ass. You’re going to want to set aside some time to do this. Each device “screen class” which you want your application to run on will need at least one screenshot. These screenshots need to be the exact dimensions. The device resolutions I was targeting were represented by the iPhone 4s, iPhone 5, iPhone 6, and iPhone 6+. Since I owned an iPhone 5 I took screenshots from the device, but the others required a lot of time in the iPhone Simulator.

With four device screen classes and five images per device that ended up being 20 screenshots. Luckily the Simulator (which otherwise isn’t running at native resolution on my device) has a convenient button for capturing screenshots. And of course, capturing them from the device is as easy as holding power and Home.

Android / Google Play Store

Cost: $25 / once | Release Approval: ASAP | Update Approval: ASAP

When launching my application on August 17th it was immediately approved and available in store. Iterating and getting a dozen new versions into the store was also immediate. Of course this meant I spent less time polishing each build before submitting, and submitted a broken build once or twice (hey, it worked on my machine!)

I own an Android device and was able to take the important screenshots for it. However for more exotic devices I had to run an Emulator. I wasn’t able to find a method for taking screenshots at the native device resolution, which meant I had to take normal screenshots and carefully crop. Google isn’t checking exact dimensions (how can they with thousands of devices in each screen class?) For other devices I would take screenshots of browser windows and use that instead.

Building an application for Android requires a few steps to get it working. When submitting to Apple, the Xcode IDE does all the heavy lifting instead. Personally I prefer issuing commands (it means I get to automate everything in a shell script!)

Here’s a breakdown of my android build script:

#!/bin/sh

# keytool -genkey -v -keystore thomashunter-mobile.keystore -alias thomashuntermobile -keyalg RSA -keysize 2048 -validity 10000
jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore thomashunter-mobile.keystore ./platforms/android/build/outputs/apk/android-release-unsigned.apk thomashuntermobile
rm ./platforms/android/build/outputs/apk/strategic-game-of-life-signed.apk
zipalign -v 4 ./platforms/android/build/outputs/apk/android-release-unsigned.apk ./platforms/android/build/outputs/apk/strategic-game-of-life-signed.apk

Well isn't that one complex shell script?! The first, commented out keytool command only needs to be executed once. It generates a .keystore file which you’ll need to keep for signing purposes. The jarsigner command will apply your key against the APK file (which contains compiled java jar’s, hence the name). After that I remove the old signed APK (otherwise the next step fails) and finally we run zipalign, which as far as I can tell moves a bunch of stuff around inside the APK (one would think that would need to happen after signing).

Building and submitting an Android application can be done from any computer, whether it’s Apple with OS X, Windows, or Linux.

Firefox OS / Firefox Marketplace

Cost: $0 | Release Approval: 12 Days | Update Approval: ASAP

The approval period required for the Firefox Marketplace was surprisingly long, being submitted on July 15th and approved on July 27th (12 days later). My guess is that they’re understaffed. Once an application is approved, and assuming you’re hosting it on your own servers (which I am; there’s an option to upload a zip but rumor has it that is going away), updates don’t require a submission. You can literally update your application by changing files on your server.

Firefox OS requires that you setup a manifest.webapp file at the root of your application which describes some meta information required by the OS. This includes permissions, name, version, etc. Here’s a copy the SGoL manifest.webapp file:

{
  "name": "Strategic GoL",
  "version": "0.8.1",
  "description": "Strategic Game of Life: Blah blah blah...",
  "launch\_path": "/apps/sgol/index.html",
  "icons": {
    "128": "/apps/sgol/images/meta/app-128.png"
  },
  "developer": {
    "name": "Thomas Hunter II (@tlhunter)",
    "url": "https://thomashunter.name"
  },
  "default\_locale": "en",
  "type": "web",
  "chrome": { "navigation": false },
  "fullscreen": "true"
}

I have a friend who works at Mozilla, and after visiting the office one day and promising to develop apps for it, he hooked me up with a free Flame phone. These are rather hard to come by though. In fact, buying a Firefox OS phone in the United States is all but impossible. This will have massive negative effects on developer adoption, and I hope Mozilla figures this out soon.

The Elusive Flame running Strategic Game of Life
The Elusive Flame running Strategic Game of Life

I was able to take screenshots from the physical device and use those for submission. Luckily I didn’t have to bother using different devices and resolutions.

Being able to submit an application to the Firefox Marketplace for free is awesome, however if you’re self hosting that means you will need to pay the price of a server. I already have a server so this isn’t an issue, but keep it in mind. Also, if your server ever goes down then your users will not be able to use your app. Even if you have been diligent about enabling offline mode / caching, new users won’t be able to download your app for the first time if your server is down.

Web

Of course, uploading files and hosting them on your own server will cost whatever you are paying for hosting. Changes are immediate and there’s no marketplace fees as there’s no real marketplace. You will be in charge of finding your own users. There are some web game marketplaces out there like Kongregate and Clay.io (although they may be dead).

There’s also a manifest file used by Chrome, which is different than the version used by Firefox OS, even though both are supposed to be based on some sort of standard. Here’s an example of the SGoL manifest.json file:

{
  "name": "Strategic Game of Life",
  "short_name": "Strategic GoL",
  "version": "0.8.1",
  "description": "Strategic Game of Life: Blah blah blah...",
  "icons": [
  {
    "src": "./images/meta/app-66.png",
    "sizes": "66x66",
    "type": "image/png"
  },{
    "src": "./images/meta/app-76.png",
    "sizes": "76x76",
    "type": "image/png"
  },{
    "src": "./images/meta/app-120.png",
    "sizes": "120x120",
    "type": "image/png"
  },{
    "src": "./images/meta/app-152.png",
    "sizes": "152x152",
    "type": "image/png"
  }
 ],
 "start_url": "./index.html",
 "display": "fullscreen",
 "author": "Thomas Hunter II (@tlhunter)",
 "default_locale": "en",
 "manifest_version": 2
}

The content is essentially the same as what is used by Firefox OS, though things have been renamed and munged a bit. The cool thing about the Chrome version is that it doesn’t require special content type headers, something which will make hosting Chrome apps on shared servers easier than Firefox OS apps.

Discussion:
Thomas Hunter II Avatar

Thomas is the author of Advanced Microservices and is a prolific public speaker with a passion for reducing complex problems into simple language and diagrams. His career includes working at Fortune 50's in the Midwest, co-founding a successful startup, and everything in between.