Experience In Developing And Installing Application For Firefox OS

written by Arief Bayu Purwanto on April 21, 2013 in Tips N Trick with 3 comments

A couple weeks ago, when I was bored in the office due to too many deadline, I procrastinate myself and throw away few good hours on cloning an android game using html + js. You guys can see the result here.

Few days ago, I few hours of free time and I though to my self, why don’t you spend it to convert that game info canvas and made it run on Firefox OS. So I began my journey to look for the best canvas game library for my situation. A couple searches and few download and testing, I ended up using GameJS.

The problem

After that, took me about 5-6 hours to port the game into GameJS and testing it into Firefox OS using simulator. The testing parts was OK. But, I have to spent another 3-4 hours to create installer because, honestly, this was my first time working with Firefox OS application development. Don’t worry, I’ll try to explain what goes wrong and what did I do to successfully create the web installer.

Web installer doesn’t actually install the game

This is what my installer look like on the first try:

<html>
	<head>
		<title>installing splat...</title>
		<script type="text/javascript">
var manifestUrl = "http://apps.freelancer.web.id/splat/installer.webapp";
var request = window.navigator.mozApps.install(manifestUrl);
request.onsuccess = function () {
  // Save the App object that is returned
  var appRecord = this.result;
  alert('Installation successful!');
};
request.onerror = function () {
  // Display the error information from the DOMError object
  alert('Install failed, error: ' + this.error.name);
};
		</script>
	</head>
	<body>
	</body>
</html>

This is the content of installer.webapp:

{
	"name": "Splat",
	"package_path" : "http://apps.freelancer.web.id/splat/Archive.zip",
	"version": "1",
	"developer": {
        "name": "Arief Bayu Purwanto",
        "url": "http://bayu.freelancer.web.id/"
    }
}

This looks innocent, but, every time I install the game, what I got was: the app always loading my own blog, not the actual game.

The solution is simple:

It turns out, to install packaged application, you need to call window.navigator.mozApps.installPackage, not just window.navigator.mozApps.install.

I fixed and the application is installed successfully.

Download failed when loading the application

I though, after application is installed in Firefox OS emulator, all is well and done. However, when I try to launch the game, it asked me to download the game. Weird, it is installed but I still need to download again. Oh well, let’s just download it. However, the OS said download failed. This happened every time and it’s frustrated me.

Let’s launch Firefox OS emulator console to see what is actually happened.
I test loading the game again and look at what is printed in emulator console and I see MISSING_MANIFEST. It turns out, this is caused by wrong zip structure.

What I have was:

    /splat/
       /index.html
       /manifest.webapp

While it should be:

    /index.html
    /manifest.webapp

Fixed the zip and tried the installation again. I still asked to download the app and failed :(. I look at emulator console and saw different error message: MANIFEST_MISMATCH. I’m not sure what is causing this error. So, I go to #b2g channel at irc.mozilla.org. There, I got the explanation that this usually caused by the difference value in name, dev info, etc between installer manifest and application manifest. So I checked again. Turns out, they are correct. My application name is different:

name in install manifest: Splat
name in application manifest: Splat!

After I fixed it, I do the whole installation process again. This time, my game is installed and loaded successfully!.

Conclusion

Developing apps for Firefox OS seems to be straigh forward, especially if you have html, css, javascript background. All of my problem listed here is a mere consequences of developing app for a very young platform that doesn’t have complete or comprehensive documentation, yet. In times, I believe the documentation will gets more completed and fellow developers will also share his experiences to complement the documentation.

If you guys want to see the codes, download/clone it on github. Or if you just want to try the game in Firefox OS (device or emulator), use this link.