Posted on by & filed under Content - Highlights and Reviews, Programming & Development.

codeA guest post by Rob Lauer, a Product Manager for Telerik who has a passion for hybrid mobile app development and the open web. In his other life he raises two kids, plays Ultimate Frisbee, and (for better or worse) is an avid Wisconsin Badger fan. Rob can be reached at @rdlauer.

In the previous Part 1 post we learned about a new mobile operating system from Mozilla called Firefox OS. We also created our first Firefox OS app using the HTML, CSS, and JavaScript skills we know and love – and used JavaScript to interface with a native device feature. This post is going to build on what we learned last time and dive into important topics like the different types of Firefox OS apps, how you can easily distribute your app to end users, and why we should even consider Firefox OS as a relevant platform in today’s mobile world.

Types of Firefox OS Apps

Isn’t an app just an app? The answer is yes…and no. With Firefox OS you are always developing your apps with HTML5, but there are different types of apps that correlate with various device APIs you can access, and how you distribute the app itself. Let’s take a look at our options.

Hosted Apps

A “hosted app” is essentially your HTML5 application hosted on a web server, but executed within the context of a Firefox OS device. Users need to have an Internet connection to access your app and, due to security considerations, you are limited in the scope of Web API calls that the app may make. We will tackle this in more depth in a future post, but see Mozilla’s documentation for a quick description of which APIs are available for which types of apps.

Hosted apps are great when you want the traditional web model for updating your app. To make an update you just upload the updated files – that’s it. The next app type is a bit different.

Packaged Apps

Packaged apps are simply hosted apps that are zipped up in an archive and made available for download to the device directly (similar to the traditional mobile app distribution model). Packaged apps have access to considerably more Web APIs and they achieve some performance gains since all of the assets are installed on the device and not downloaded when needed from a remote server. It’s important to remember that packaged apps are assumed to function without requiring network access!

Packaged apps do require the creation of an additional app manifest file. For example, if you zipped up your app into an archive, you would need to create the following manifest file before you could distribute it:

Be sure to save this as app_package.webapp (you can name this whatever you want though).

There are actually three different types of packaged apps: plain, privileged, and certified. In a future post we’ll look more closely at these types of apps because they relate directly to the Web APIs that you may access.

Now let’s see how you can distribute these apps to your growing audience of Firefox OS users.

Firefox OS App Distribution

There are two ways to distribute your Firefox OS apps, regardless of which type of app you have created: the Firefox Marketplace and publishing on your own web server.

Much like the traditional iOS and Android app stores, the Firefox Marketplace is a clearinghouse of apps. It is a great place to upload your app if you want the familiar app store distribution model. In addition, the marketplace can take payments for you if you’d like to charge for an app – and they support both hosted and packaged apps. You need to use the Firefox Marketplace if your app uses Web APIs that are tagged as “privileged.”

And yes, you may also do it yourself! You can upload your hosted app or packaged app (that doesn’t require privileged API access) to your own web server and distribute it from there. The obvious advantage with going this route is having absolute control over your app – you can even take advantage of SEO if you have search engines index your hosted app assets!

How does a Firefox OS user actually install a packaged app from your web site though? Like most everything else with Firefox OS, it’s incredibly easy. You may use the following JavaScript to prompt a user to install the app.

First you’ll want to use feature detection to make sure the client is a Firefox OS device:

Now you need to prompt the user to install the app:

Now that we have learned how to develop a simple Firefox OS app and distribute it, the obvious question now is, “why?”

Why Should I Develop for Firefox OS?

Whether or not you develop for a new mobile OS that is just starting to gain traction is a difficult decision to make. In my opinion, it’s important to look to the future and realize:

  • Over half of all mobile phones purchased last year were still feature phones – so there is a lot of potential for future low-cost smartphones (of which Firefox OS devices will be).
  • 2 BILLION people are coming online globally via mobile in the next few years.
  • Mozilla is focusing their initial launch efforts on emerging markets like Latin America and parts of Europe and Asia that are flooded with feature phones.

So, you can see that there is a lot of potential in getting Firefox OS devices into the hands of new users. There is also the possibility that Firefox OS takes over for the cheap and under-powered Android 2.x devices that exist in today’s US and European markets.

Aside from these facts though, keep in mind that developing for Firefox OS is fun and easy – plus it’s a good feeling knowing that you’re helping to directly support the open web.

Look below for some great JavaScript resources from Safari Books Online.

Not a subscriber? Sign up for a free trial.

Safari Books Online has the content you need

Eloquent JavaScript is a guide to JavaScript that focuses on good programming techniques rather than offering a mish-mash of cut-and-paste effects. The author teaches you how to leverage JavaScript’s grace and precision to write real browser-based applications. The book begins with the fundamentals of programming—variables, control structures, functions, and data structures—then moves on to more complex topics, like object-oriented programming, regular expressions, and browser events. With clear examples and a focus on elegance, Eloquent JavaScript will have you fluent in the language of the web in no time.
Learning JavaScript Programming Video teaches you the basics of programming with JavaScript, the worlds most used programming language. The tutorial is designed for the absolute beginner – no prior JavaScript programming experience is required in order to get the most out of this video training. You will start with learning what programming is, and specifically, what JavaScript is, how it it used, and its limitations. You will discover variables and data types, and how to take input and create output. Craig covers conditions, loops, arrays, sorting, functions, paramaters and debugging. You will even learn advanced concepts such as OOP, string manipulations, regular expressions and other programming patterns.

Tags: android, CSS, Firefox OS, html5, iOS, Javascript, PhoneGap, SEO, Web APIs,

One Response to “Developing Your First Firefox OS App, Part 2”

  1. priya

    I really love the HTML5 approach since this will allow me to add Firefox OS versions of my current projects without problem…
    One great feature of the Firefox Developer Tools is the responsive view mode. You can turn this one on by opening the developer tools and clicking the responsive mode icon. This will result in the current page becoming re-sizable in the browser without losing the developer tools or having to resize the window: