O'Reilly

6 Things You Didn’t Know About Firefox OS

By on  
Firefox OS

Firefox OS is all over the tech news and for good reason:  Mozilla's finally given web developers the platform that they need to create apps the way they've been creating them for years -- with CSS, HTML, and JavaScript.  Firefox OS has been rapidly improving, adding features and APIs to provide device control and other standard mobile functionality.  Much is not known about Firefox OS, however, and here are a few items you may find interesting!

The Firefox Marketplace is Open Source

Everyone knows that the components of Firefox OS are open source.  Not many know this fact:  the Firefox Marketplace is a Django-based application, code-named 'zamboni', used not only for the Marketplace but also for AMO (Add-Ons). Like Firefox OS' gaia (the web-based operating system) zamboni is freely available on GitHub.  This means that you could fork zamboni, update the design, and create your own store for HTML5 apps!

You Can Buy a Test Device

Firefox Phone

Everything Mozilla does is open so it is common knowledge that you can create your own Firefox OS build if you have a supported device.  What many people may have missed is the announcement of a test device available for purchase from  Geeksphone.  While the Firefox OS Simulator does a good job of allowing users to test apps get the general gist of the platform, there's nothing like having a comparative-hardware device to test with.  Even if you don't plan on creating your own Firefox OS apps, it's still nice to have a test device around to test your own websites.

Loads of APIs are Being Implemented

For the skeptics who don't believe the HTML5 spec provides enough device control:  think again.  Mozilla has been rolling out dozens of WebAPI features to allow access to all types of device APIs:  Battery, Camera, Contacts, WebSMS, Storage, Vibration, Settings, Alarm, Browser, and many more.  Each API is either planned, in development, or completed, and may be available on different types of devices (desktop, tablet, mobile).  Bookmark the WebAPI chart to keep track of where each API is in its development stage!

Install Apps from Any Domain!

Mozilla doesn't hold users hostage when it comes to installing new apps; instead of needing to jump over to the device's app store app, Mozilla provides a JavaScript API for installing web apps from any allowed domains:

var manifestLocation = "http://areatweet.com/manifest.webapp"; // your domain here
var installRequest = navigator.mozApps.install(manifestLocation);

installRequest.onsuccess = function(data) {
    // App installed successfully!
};

installRequest.onerror = function(err) {
    // App couldn't be installed!
    console.log("Install error!");
};

It's incredibly liberating to allow installation from outside an app store; no more tyranny, no more unnecessary proprietary crap.

Web Activities!

The amazing Mozilla Hack Blog recently introduced Web Activities:  a system for adding context-specific controls within an app.  The screen where a user would see a Web Activity would look like this:

Activity Menu

Web Activities provide a system by which you can specify the desired input result and a callback based on the activity's success and failure.  Code for said activity and result could look like:

var pick = new MozActivity({
   name: "pick",
   data: {
       type: ["image/png", "image/jpg", "image/jpeg"]
   
}
});

pick.onsuccess = function () {

    // Create image and set the returned blob as the src
    var img = document.createElement("img");
    img.src = window.URL.createObjectURL(this.result.blob);
 
    // Present that image in your app
    var imagePresenter = document.querySelector("#image-presenter");
    imagePresenter.appendChild(img);
};
 
pick.onerror = function () {

    // If an error occurred or the user canceled the activity
    alert("Can't view the image!");
};

Web Activities are relatively new so they'll take a bit of playing around with to get the full picture of how they work and what role they can play for your app. Robert Nyman has created a Firefox OS Boilerplate App which shows how you can use these.

The Browser App is Created with... HTML, CSS, and JavaScript

All of Firefox OS' native apps are written with basic HTML, CSS, and JavaScript -- the same way you'll be creating your own apps.  Don't believe me?  Check out the source for yourself!  Browsers are a complex beast to create but Firefox OS' browser app shows that HTML, CSS, and JavaScript are ready for prime time device app performance!

There will no doubt be more information about Firefox OS on this blog.  The tidbits above should give you an advantage over other developers, allowing you to get started with advanced APIs, stores, and more!

O'Reilly Velocity Conference
Save 20% with discount code AFF20

Recent Features

  • Responsive Images: The Ultimate Guide

    Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today’s websites and devices become ever more varied, a plethora of responsive images...

  • Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube tutorial I've read is a bit...

Incredible Demos

Discussion

  1. Bob

    Well, not “finally”, webOS did this for a couple of years.

    • Tony

      Just what I was thinking. I wonder if it is possible to make an app work for webOS and FirefoxOS. It would definitely would be a bit easier since they both have HTML, CSS, and Javascript, but then they are different APIs.

    • Fabrice

      Firefox OS goes a bit further than webos actually. In WebOS, the cardview/window manager was not a web app. In Firefox OS, all the UI is pure content side html/css/js (ie, no privileged “chrome” code).

  2. ferongr

    Well, you can’t really install any app from any domain. Privileged apps are Marketplace only and the only alternative for users will be to push them over USB using remote debugging (something not implemented yet AFAIK). And about certified apps who knows…

    My Android device is more open than this currently.

    • Fabrice

      Pushing apps using the remote debugging protocol is implemented. We don’t have yet a very nice tool to help you push apps, but that’s coming. These apps can have any privilege level, including the “certified” one.

  3. goodfawkes

    ^ this OS is just starting out. When it’s out and ready, damn, it’s huge she said.

  4. Tim

    “What many people may have missed is the announcement of a test device available for purchase from Geeksphone.”

    call me impatient but these devices are absolutely not yet available for buying right now and I find these texts disappointingly misleading.

    Dont get me wrong, just can’t wait ;-)

  5. You can write apps for both webOS and Firefox OS, but accessing device APIs are different, so you generally need to write an abstraction layer or use something like PhoneGap (which also lets your app run on other platforms as well).

  6. The more I hear about FF OS, the more excited I get! I’m not a developer, but could definitely see myself writing code for this.

  7. akshay

    this os will be developer’s best friend

  8. Dave

    Really, Firefox OS certainly looks great and I love all the things I’m hearing about it. But at the end of the day, it still remains to be seen just how popular this thing will be in the open commercial market. I realize it will [hopefully] be easy to work with, but all the easiness in the world wont get me to push this onto my team’s plate if only a handful of people will actually own one.

    I’ll get excited once it becomes apparent that consumers are excited about it too :\

  9. Jan P.

    I’m really looking forward to FF OS. As a webdeveloper I find it simply great to be able to change the code easily to my needs or to develop whole apps with DHTML.
    BTW what’s the core OS running in the background, I guess it’s a minified version of GNU/Linux? If yes it should be possible to run command line applications as well?

    Regards from the Czech Republic!

  10. Folks,

    The current developer device is not the ones built by Geeksphone. The current one is called Flame and you can learn more about it at:

    https://developer.mozilla.org/pt-BR/Firefox_OS/Developing_Firefox_OS/Flame

  11. If don’t think so it will expand in the global market. because there are three awesome application OS available for mobile and smartphones.

  12. Is there a possibility that a marketplace application can access browser data, and modify pages of other websites?

    I’m guessing not because they’re built using HTML and JS…

    But I do feel that using JS, creating Keyloggers is possible.

    Hopefully I’m wrong.

    • Btw, I’m referring to using these apps on a Linux desktop.

  13. This is great! I absolutely love Firefox. I’m really looking forward to FF OS.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Prevent Chrome from Translating a Page

    A while back I shared my favorite Google Chrome extension:  Google Art Project.  I've enjoyed seeing beautiful art when I open a new tab -- it's brought genuine happiness to my day, however small that happiness may be.  About a week ago, however, the art presented had...

  • Create Any Type Of Website With These Multi-Purpose Themes

    We have selected what we believe are the very best multipurpose WordPress themes on the market today. Our list contains a number of best sellers, several newcomers that are proving to be highly popular, and a few themes that are ideal for creating the types of...

  • An Introduction to Static Site Generators

    Static site generators seem to have been becoming more and more popular recently, but they’re not one of those ephemeral novelty things that grow in popularity as quickly as they fall into oblivion shortly after. For over a decade, many different projects — 394 of...

  • Automated Tests for Visual Responsive Layouts

    Today it's all about testing. In 2015, many developers knows about TDD and I personally think that testing is one of the key for quality products. But what about testing in a Front-end environment? How do you guys write your tests for a responsive page or...

  • Getting Dicey With Flexbox

    What if you could build complex CSS layouts in minutes? Flexbox is a new CSS layout spec that makes it easy to construct dynamic layouts. With flexbox, vertical centering, same-height columns, reordering, and direction agnosticism are a piece of cake. There's a popular myth floating around that...