zetalab - development and consulting

Porting the WORTOMAT App to Firefox OS - Lessons Learned

Recently I took part in the Firefox OS developer program and after some weeks I got notified that they will send me a free Geeksphone Keon. I had an HTML5 version of WORTOMAT kind of finished, or so I thought, because it was the requisite of taking part in the developer program. In the end it took quite some work to make the app run smoothly on the Keon.

First of all I had to adapt the UI concept to the small screen size. I took an approach similar to Windows Phone, where you have several screens you can navigate to by swiping. Instead of implementing my own scroller I took a look at several javascript libraries and finally opted for BXSlider, which was easy to use and performed well. Another library I already made use of for the browser version was JQuery Notify to implement Toast style notifications.

It’s a known problem that browser manufacturers implement an artifical delay for events on smartphones to cope with touch events. For most apps this is quite annoying because the app doesn’t react immediately to user input. There are many solutions to this problem, but after some research I took the easy route of using a polyfill named FastClick by the Financial Times Labs. It intercepts all events and removes the artificial delay. I guess it comes with a bit of a performance penalty compared to a hand coded solution, but it was ok with me and it was so easy to use: just include “fastclick.js” and attach its handler to the HTML body.

What makes an HTML5 app an HTML5 app? Apart from the obvious basics, using the standards of the HTML5 doctype, CSS3 and other stuff, there’s quite a difference between various flavours. I guess, in the end, you cannot call a Firefox OS app a genuine HTML5 because it supports it’s own WebAPI, that offers device support missing in HTML5 proper: vibration, screen orientation, power management, battery status, sensors and so on. It’s comparable to functionality offered by Titanium or Phonegap, but focused on FirefoxOS (so far). For instance you can lock the screen in an orientation of you wish to do so:

if (“lockOrientation” in screen) {

screen.lockOrientation(‘portrait’);

I still had some problems with the screen layout, though, because for instance, when the user enters text, the on-screen keyboard will appear and reduce the available space for the layout of the game screen. Unfortunately it does not automatically scale back, when the keyboard disappears. To cope with this and similar situations I implemented an event handler that responds to “resize” events. In the handler you have to implement an event filter to have the handler respond at a slower rate.

The central tool for developing Firefox OS apps is the App Manager add-on that requires at least Firefox 26 (i.e. Aurora). It’s used for managing HTML5 apps on the phone or in the provided simulator. There’s also a debugger that is similar to Firebug, where you can inspect HTML elements, styles and debug scripts. All in all it works quite well, although in the end I did most of my development inside Chrome on the Desktop.

The biggest challenge was implementing the word checker function. I already had the app working in a way where it checked the entered words on the server through a web service. But then I wanted to make it work offline, just as the Windows Phone, iOS and Android versions of WORTOMAT. Altogether there are several hundred thousand words to save on the phone with its limited resources, while in practice there are only two ways to store the word list on the phone anyway: IndexedDB and localStorage, which both have their own drawbacks. And lookup needs to fast, that is in a fraction of a second. In the end I gave up on this and stuck to checking words online, because I could not get it to work in a satisfactory way. Maybe I will try to partition the word lists in a clever way and implement some kind of Trie storage or similar, but right now it was just too much work for a free app.

After finishing development and testing you need some additional files for packing the app, for instance a manifest file. Among other stuff it includes references to application icons, you have to provide for the phone desktop and the marketplace. I had some problems finding out what sizes are really required, so I carried on by trial and error until I had finally figured it out. So I guess my manifest file has more icons than are absolutely required but at least it worked out and passed the manifest checker of the Marketplace.

{

“name”: “WORTOMAT”,

“version”: “1.0”,

“orientation”: “portrait”,

“description”: “word puzzle - find words, have fun.”,

“launch_path”: “/mobile”,

“icons”: {

“30”: “/mobile/wortomat-30.png”,

“32”: “/mobile/wortomat-32.png”,

“60”: “/mobile/wortomat-60.png”,

“90”: “/mobile/wortomat-90.png”,

“120”: “/mobile/wortomat-120.png”,

“256”: “/mobile/wortomat-256.png”,

“128”: “/mobile/wortomat-128.png”

},

“developer”: {

“name”: “zetalab”,

“url”: “http://zetalab.de" },

“default_locale”: “en”

}

There are two types of HTML5 apps on Firefox OS. One is a packaged app, but I went with a self-hosted app, where you only provide a link to application files. You need an own subdomain for every app you are hosting.

If you want to make use of caching the application files, you need an additional cache manifest, but beware when you are still developing and changing files, it might become a bit tedious and you might have to clear the cache manually. And, if you want to be able to load files over the network, you need to include the following line in the appcache manifest:

NETWORK:

*

When you are done, you upload the URL to the Firefox OS Marketplace and have to wait some days for approval (WORTOMAT in Firefox Marketplace). Unfortunately there are still many countries missing. Also to date I could not find any statistics on downloads and so on, so I guess you have to track that on your own server.

In the end it was kind of fun and interesting but also quite a lot of work to get the app to work in a satisfactory way. That the Keon is quite weak performance-wise doesn’t really help, but I guess therefore it makes for a good testing platform. HTML5 is a quite powerful foundation for writing phone apps, but to make full use of the device capabilities you still need to use platform specific APIs. Also it is still in a constant state of flux and manufacturers seem to change their implementations at will (cf. the full-screen problem in iOS 7), so it will take a lot of work to get a truly cross-platform HTML5 app to work. It will be interesting to see when the mobile browsers catch up to the level of support desktop browsers like Chrome offer, including WebGL.