1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
Firefox OS still isn't an official release and thus far no phones have been made other than the developer devices from Geeksphone. However, judging by how hard it is to buy one of those devices, developers are clamoring to get their hands on anything running Firefox OS.
The Geeksphone site seems to be perpetually out of both the Keon (91€) and the Peak (149€), but if you're one of the fortunate few to have purchased a Geeksphone device you're probably itching to get started building Firefox OS apps.
The first step is to head over to the Mozilla website and sign up for a developer kit.
Just kidding, there's no developer kit. There are also no developer fees and no new programming languages to learn. You can start building apps for Firefox OS today, using nothing more than HTML, CSS and a generous helping of JavaScript.
Using the free, widely understood languages of the web stack means that the barrier to entry for potential Firefox OS developers is very low.
As Daniel Appelquist of Mozilla's Firefox OS partner Telephonica says in a <a href="https://hacks.mozilla.org/2013/06/firefox-os-for-developers-the-platform-html5-deserves/">recent video interview</a>, "it changes the economics of app development because it's cheaper to get into the game as an app developer. You don't need as many tools. You don't need to join expensive developer programs. You can start developing with what you have right now."
That's all well and good to say, but just how easy is it to actually build a Firefox app?
As it turns out, it really is that easy. As easy in fact as throwing together a webpage.
However, as with a webpage, if you want your app to actually do something useful you'll likely need to dive into JavaScript (and possibly some server-side tools depending on what you want your app to do).
The first step in building an app for Firefox OS is determining which sort of app you want to build. There are two options, packaged apps and hosted apps. A packaged app is what it sounds like, all of your app's assets -- HTML, CSS, JavaScript, images, manifest, etc -- are packaged up in a zip file which becomes the means of distribution. A hosted app keeps all of its assets on the server and more or less functions (from a developer viewpoint) like a website.
Both types of apps need a valid manifest file and both can be listed in the Firefox Marketplace. In the case of packaged apps you'll upload a zip file to the marketplace. Hosted apps just provide a URL and the Firefox Marketplace links to the install location.
For testing reasons it's easiest to start off creating a hosted app that lives on your local network. If later you decided you'd prefer to package it up, it's not hard to convert between the two.
To start with I went even simpler than that, creating nothing more than a manifest file for my website. A manifest file is just a simple JSON files which essentially tells Firefox OS, hey, here's an app, and sets a few variables.
I started with the very basic ten-line example file you'll find on the <a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Manifest">Mozilla Developer Network</a> (home to the best <a href="https://developer.mozilla.org/en-US/docs/Web/Apps">documentation on Firefox OS</a>) and tweaked it to fit my site. Impressed with the simplicity of creating an app, I uploaded the file, browsed to my install page and... nothing.
The devil, as always, is in the details. In this case the detail is that Firefox OS manifest files need to be served as content type application/x-web-app-manifest+json, which just about no server on the web will do out of the box. It's worth noting though that GitHub will serve it properly, which is handy for hosting apps from GitHub Pages. To add the necessary content type to other servers, see <a href="https://marketplace.firefox.com/developers/docs/quick_start">the Mozilla Dev Center</a>.
Once the technical side was taken care of, everything else worked just fine. I created a basic page to install my app (which just points to the aforementioned manifest file). Now would be the time to build a mobile interface for your site. My site happens to already use CSS @media queries to handle different screen sizes so everything already worked. Of course my app is just, well, my website, which is not very exciting, but if you've got a Keon or a Peak and want to see what it's like to install an app, feel free to <a href="http://luxagraf.net/firefoxos-install/">try it out</a>.
In fact, not only is my test app not very exciting, it's not much of an app at all. At this stage it's little different than a home screen shortcut. But if you already have a functioning web app, say an HTML5-based game, adding a manifest file and creating an install script is all it takes to turn your web app into an installable Firefox OS app.
A manifest file and a simple install script is also a good place to get started with Firefox OS apps because it gets the two things unique to the platform out of the way. You now have what amounts to a container for your app. Before you start building everything from scratch though, be sure to check out the <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/UX">Firefox OS style guide</a> (wholely optional) and what Mozilla calls "<a href="https://hacks.mozilla.org/2013/02/firefox-os-building-blocks-to-the-rescue/">Build Blocks</a>", reusable interface elements for developers.
But to build an actually useful app you'll want to dive into the various JavaScript APIs that make up the core of Firefox OS's functionality.
Using the APIs is a two-fold process. First you have to build out your app using the APIs and then you need to list any restricted APIs your app uses in your manifest file. When the user installs your app they'll get a chance to approve the permissions you ask for, for example if your app asks for location data the user first needs to agree to give your app access (users can change those permissions at any time in the settings app).
There are quite a few very useful APIs for developers, but perhaps the most important is the offline storage API. Firefox OS apps may be made of HTML, CSS and JavaScript, but the good ones are not web apps in the sense that they need internet access. Obviously some Firefox OS apps will always need to be online, just as there are plenty of apps for iOS and Android that are useless without a fast internet connection. There is, however, no need to require a network connection just because you've built an app with HTML. Even if your app uses the network -- syncing edited files to a user's Dropbox account for example -- you'll still likely want to store the data locally and only upload when access is available.
What's perhaps most exciting (and challenging) for developers at this stage is that the guide essentially ends here. Once your container is built the only limitation on your app is the web. You have all the freedom of the web to build anything you want without worrying about whether or not it will be approved by big name app stores (if you want to get in the Mozilla Marketplace there is an approval process, but it's nothing like Google Play or Apple's notoriously restrictive App Store). Even better as a web app developer, Firefox OS finally offers access to the kinds of APIs you need to build compelling apps.
The result is a kind of wild west of app development where the possibilities are only now being explored. If you missed the app gold rushes on iOS and Android because you didn't want to learn a new programming language or your ideas didn't fit the mold of what was declared possible, Firefox OS wants you.
Of course Firefox OS is an unproven platoform. There's always the chance that you'll be pouring your energy into something that never takes off. Firefox OS could go the way of Web OS. Or it could follow in the Firefox web browser's footsteps, slowly but surely gaining traction around the world. Even in the worst case scenario you'll still have a fully functional web app. Having scratched the surface of Firefox OS app development though I'm inclined to agree with Mozilla which is calling Firefox OS "the platform HTML5 deserves".
|
