Writing and deploying a small Firefox OS application

For the last week I’ve been using a Geeksphone Keon as my only phone. There’s been no cheating here, I don’t have a backup Android phone and I’ve not taken to carrying around a tablet everywhere I go (though its use has increased at home slightly…) On the whole, the experience has been positive. Considering how entrenched I was in Android applications and Google services, it’s been surprisingly easy to make the switch. I would recommend anyone getting the Geeksphones to build their own OS images though, the shipped images are pretty poor.

Among the many things I missed (Spotify is number 1 in that list btw), I could have done with a countdown timer. Contrary to what the interfaces of most Android timer apps would have you believe, it’s not rocket-science to write a usable timer, so I figured this would be a decent entry-point into writing mobile web applications. For the most part, this would just be your average web-page, but I did want it to feel ‘native’, so I started looking at the new building blocks site that documents the FirefoxOS shared resources. I had elaborate plans for tabs and headers and such, but turns out, all I really needed was the button style. The site doesn’t make hugely clear that you’ll actually need to check out the shared resources yourself, which can be found on GitHub.

Writing the app was easy, except perhaps for getting things to align vertically (for which I used the nested div/”display: table-cell; vertical-alignment: middle;” trick), but it was a bit harder when I wanted to use some of the new APIs. In particular, I wanted the timer to continue to work when the app is closed, and I wanted it to alert you only when you aren’t looking at it. This required use of the Alarm API, the Notifications API and the Page Visibility API.

The page visibility API was pretty self-explanatory, and I had no issues using it. I use this to know when the app is put into the background (which, handily, always happens before closing it. I think). When the page gets hidden, I use the Alarm API to set an alarm for when the current timer is due to elapse to wake up the application. I found this particularly hard to use as the documentation is very poor (though it turns out the code you need is quite short). Finally, I use the Notifications API to spawn a notification if the app isn’t visible when the timer elapses. Notifications were reasonably easy to use, but I’ve yet to figure out how to map clicking on a notification to raising my application – I don’t really know what I’m doing wrong here, any help is appreciated! Update: Thanks to Thanos Lefteris in the comments below, this now works – activating the notification will bring you back to the app.

The last hurdle was deploying to an actual device, as opposed to the simulator. Apparently the simulator has a deploy-to-device feature, but this wasn’t appearing for me and it would mean having to fire up my Linux VM (I have my reasons) anyway, as there are currently no Windows drivers for the Geeksphone devices available. I obviously don’t want to submit this to the Firefox marketplace yet, as I’ve barely tested it. I have my own VPS, so ideally I could just upload the app to a directory, add a meta tag in the header and try it out on the device, but unfortunately it isn’t as easy as that.

Getting it to work well as a web-page is a good first step, and to do that you’ll want to add a meta viewport tag. Getting the app to install itself from that page was easy to do, but difficult to find out about. I think the process for this is harder than it needs to be and quite poorly documented, but basically, you want this in your app:

And you want all paths in your manifest and appcache manifest to be absolute (you can assume the host, but you can’t have paths relative to the directory the files are in). This last part makes deployment very awkward, assuming you don’t want to have all of your app assets in the root directory of your server and you don’t want to setup vhosts for every app. You also need to make sure your server has the webapp mimetype setup. Mozilla has a great online app validation tool that can help you debug problems in this process.

Timer app screenshot

And we’re done! (Ctrl+Shift+M to toggle responsive design mode in Firefox)

Visiting the page will offer to install the app for you on a device that supports app installation (i.e. a Firefox OS device). Not bad for a night’s work! Feel free to laugh at my n00b source and tell me how terrible it is in the comments :)

11 thoughts on “Writing and deploying a small Firefox OS application

  1. Hi Chris. I’ve made a similar app for Firefox OS and other modern browsers. Check out https://github.com/alefteris/timerx3 . The UI is not as simple or sleek as yours, but I used some of the same APIs as you did. For example the Page Visibility API, which I had to combine it with onblur/onfocus events for desktop browsers. Also the Notifications API. The interesting thing about that is that Firefox OS implements an older version of the spec, so I had to take care of that. As for a way to bring the app in the foreground, when the notification is clicked, see https://github.com/alefteris/timerx3/blob/master/app/scripts/main.js#L182 (had to ask in a few Mozilla IRC channels to figure it out). I didn’t use the Alarm API, but I’m interested to look if I can use it only when the app is running in FIrefox OS, since there is no support in desktop browsers. A few issues I haven’t yet resolved is the audio being muted when the app is in the background. I have seen some docs about AudioChannels API, but haven’t figured out how to use it. Finally I tried to optimize the app as much as I could (with the help of yeoman and a few grunt plugins). It’s just 3 requests, 2 of them for the audio file.

    • Thanks a lot for the tip about notifications, I’ve updated my app accordingly :) I swear I tried that, but I must’ve got the syntax wrong – your code is very clear and really helped me understand!

  2. With a little work, you can get most of the functionality to work in Firefox for Android too, even as an App. I see that “navigator.mozSetMessageHandler” is not supported in any other platform, but you can “if check” around that. Firefox for Android does still support the older version of Notifications you are using.

    Chris Peterson might have Alarms API working before too long as well :)

  3. Hi,
    Nice app!

    I have myself a peak and there the screen is significantly larger which actually make it harder to spin the number (I can send you a photo if you like). I have found out that there is quite a difference between the peak and the FF-OS simulator actually, I do not know a way around this atm.

  4. Me too have a keon and i am trying to use it as primary phone.
    Have you any suggestions to build my own image?
    A question as user …., it is possible to use my own music file as a ringtone?

    thx!

  5. Hi,

    I am working on a todo-list app.
    I am facing trouble in scheduling an alarm for adding a notification in the notification-panel.

    Any help would be really appreciated.

    • Gonna need a bit more than that to go on to help :) What issues are you running into specifically? Does the source code for this timer app help? Last time I tried, alarms didn’t work on the simulator, have you tried on a real device?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">