Firefox OS 2.5 Developer Preview, an experimental Android app

Today we have made Firefox OS 2.5 available worldwide. We are also making an early, experimental build of the OS — Firefox OS 2.5 Developer Preview — available for developers to download on Android devices. This latest version of Firefox OS delivers exciting features including:

  • Add-ons: Just like the add-ons we’ve come to love in desktop browsers, Firefox OS add-ons can extend just one app, several, or all of them, including the system app itself.
  • Private Browsing with Tracking Protection: A new Firefox privacy feature, Tracking Protection allows users to control how their browsing activity is tracked across many sites.
  • Pin the Web: Pin the Web removes the artificial distinction between web apps and web sites and lets you pin any web site or web page to your home screen for later usage.

To find out more about all aspects of the release, visit Firefox OS v2.5.

Firefox OS 2.5 Developer Preview is an app that lets you experience Firefox OS as an alternate home screen on your Android device without having to re-flash and replace your Android installation. To give it a try, visit Firefox OS 2.5 Developer Preview, right from your Android device.

Firefox OS 2.5 developer preview homescreenAndroid apps alongside Web apps on the homescreen

Firefox OS 2.5 developer preview CalendarFirefox OS Calendar with Android navigation bar

Firefox OS 2.5 developer preview top sites viewFirefox OS Browser landing page

What is the Firefox OS 2.5 Developer Preview?

You’ve asked how to get involved with the Firefox OS open source project. To date, it’s only been possible to download and explore the latest versions of Firefox OS on specific hardware, such as the Flame device. We’re now working on making Firefox OS more widely available. The Firefox OS Participation Hub provides up-to-date information on getting involved with Firefox OS . The B2G-installer add-on lets you flash a full port of Firefox OS on to an Android device (Note: Firefox OS is under development. Don’t expect it to be bug-free or completely stable.)

Re-flashing existing hardware means losing user data as well as access to Android apps that you may depend on. There’s always an inherent risk of rendering your hardware inoperable, i.e., bricking your device. Firefox OS 2.5 Developer Preview avoids these issues by replacing the Android home screen with the Gaia (UI) layer of Firefox OS. Effectively you can use Firefox OS while still having full access to your Android apps. Firefox OS 2.5 Developer Preview makes Firefox OS available to more developers, testers, localizers, and supporters of the Open Web around the world.

If you’re curious to see what Firefox OS is all about, or just interested in testing out new features, the Firefox OS 2.5 Developer Preview app makes it very simple to get started with very little risk involved. By downloading the app, you can experience Firefox OS and explore many of its capabilities, without flashing hardware. If you decide you’re done trying it out, the app can be removed as simply as any other app. If you’re interested in becoming a code contributor or bug reporter, the app makes it dramatically easier to get involved.

What’s the catch?

As a full operating system, Firefox OS has its own task manager, utility tray, navigation buttons, settings, and more. Running on top of Android means that these elements of the operating system may come into conflict with those same system functions on Android. Android launchers were never designed to enable replacement of these operating system functions. As a result we employ various workarounds, where possible, to avoid delivering a poor user experience. For example, Android uses a back button as a primary navigation method. Firefox OS does not. While we are trying to mitigate these issues, the current edition of the Firefox OS 2.5 Developer Preview app should be considered experimental and will most likely contain bugs. We can certainly use your help in discovering, reporting, and fixing issues.

Hacking on the Firefox OS 2.5 Developer Preview

We’d love for you to play with the Firefox OS 2.5 Developer Preview — to scratch your own itch, test an idea, or contribute to the project by improving performance or finding interesting solutions to the conflict problems with Android system functions mentioned above. With that said, if you are interested in hacking on the app, instructions for building it from scratch can be found here. Alternatively, you can make use of WebIDE in the Firefox Developer Edition browser to start making changes directly to the layout and composition of apps in Firefox OS Developer Preview.

Get involved without coding

There are many ways to get involved without contributing code. The easiest way is to install Firefox OS 2.5 Developer Preview on your Android device and file bugs when you run into problems or discover things that don’t work as expected. If you’re looking for other ways to help, visit our Firefox OS Participation Hub.

Supported devices

The current build will only work on ARM-based devices. It will not work on x86 devices.

Final thoughts

We are very excited about the Firefox OS 2.5 Developer Preview app. We’ve worked hard to produce a Firefox OS experience for Android users. As with all things at Mozilla, this effort is very much a community effort and we welcome all forms of constructive feedback and suggestions for making the experience better.

Got questions about running Firefox OS on new hardware or devices? Try the dev-fxos mailing list or #fxos on IRC. Thanks!

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Building Firefox Hub Add-ons for Firefox for Android

The Firefox Hub APIs allow add-ons to add new panels to the Firefox for Android home page, where users normally find their top sites, bookmarks and history. These APIs were introduced in Firefox 30, but there are more features and bug fixes in Firefox 31 and 32. You can already find some of these add-ons on, and there is some boilerplate code on github to help you get started.



There are two main parts to building a Firefox Hub add-on: creating a home panel, and storing data to show in that panel. Home panels consist of different views, each of which displays data from a given dataset.

Creating a new home panel

To create a home panel, first use the Home.panels API to register a panel. The register API takes a panel id and an options callback function as parameters. This options callback is called to dynamically generate an options object whenever a panel is installed or updated, which allows for dynamic locale changes.

function optionsCallback() {
  return {
    title: "My Panel",
    views: [{
      type: Home.panels.View.LIST,
      dataset: ""
Home.panels.register("", optionsCallback);

You must always register any existing panels on startup, but the first time you want the panel to actually appear on the user’s home page (e.g. when your add-on is installed), you also need to explicitly install the panel.


You can modify the options callback function to customize the way data is displayed in your panel. For example, you can choose to display your data in a grid or a list, customize the view that is displayed when no data is available, or choose to launch an intent when the user taps on one of the items.

Storing data for the panel

To actually show something in your new home panel, use the HomeProvider API to store data. This API allows you to asynchronously save and delete data, as well as register a callback to allow the browser to periodically sync your data for you.

The HomeProvider API gives you access to HomeStorage objects, which you can interact with to save and delete data from a given dataset. These methods are designed to be used with Task.jsm to execute asynchronous transactions within a task.

let storage = HomeProvider.getStorage("");
Task.spawn(function() {
}).then(null, Cu.reportError);

In Firefox 31, we expanded the save API to support replacing existing data for you, which is convenient for periodically refreshing your dataset.

function refreshDataset() {
  let items = fetchItems();
  Task.spawn(function() {
        yield, { replace: true });
  }).then(null, Cu.reportError);
HomeProvider.addPeriodicSync("", 3600, 

This code snippet will ensure that our dataset is refreshed once every 3600 seconds (1 hour).

What’s new in Firefox 32 Beta

In addition to bug fixes, Firefox 32 also adds a few more features to the set of Firefox Hub APIs.

Refresh handler

In addition to support for periodically updating data, we also added support for “pull to refresh”, which gives users the power to manually refresh panel data. To take advantage of this feature, you can add an onrefresh property to your view declaration.

function optionsCallback() {
  return {
    title: "My Panel",
    views: [{
      type: Home.panels.View.LIST,
      dataset: "",
      onrefresh: refreshDataset

With this new line added, swiping down on your panel will trigger a refresh indicator and call the refreshDataset function. The refresh indicator will disappear after a save call is made for that dataset.

Authentication view

We added support for an authentication view, to make it easier for your add-on to use data that requires authentication. This view includes space for text and an image, as well as a button that triggers an authentication flow. To use this feature, you can add an auth property to your panel declaration.

function optionsCallback() {
  return {
    title: "My Panel",
    views: [{
      type: Home.panels.View.LIST,
      dataset: ""
    auth: {
     authenticate: function authenticate() {
        // … do some stuff to authenticate the user …
       Home.panels.setAuthenticated("", true);
     messageText: "Please log in to see your data",
     buttonText: "Log in"

By default, the authentication view will appear when your panel is first installed, and the authenticate function will be called when the user taps the button in the view. It is up to you to call setAuthenticated(true) when the user successfully completes an authentication flow, and you can also call setAuthenticated(false) when a user becomes unauthenticated. This authentication state will persist between app runs, so it is up to you to reset it if you need to.

Future work

We have ideas about ways to expand these APIs, but please let us know if there is anything you would like to see! We’re also always looking for new contributors to Firefox for Android, and we’d love to help you get started writing patches.

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Testing Your Native Android App

It’s an interesting time to be a web developer!

For years Apps have been eating the web and now we are seeing the Web eat the OS. Mozilla is pushing for a world where you can write standards-based, Open Web Apps. These apps should install as native apps and just work, regardless of the platform.

Packaged App on Firefox OS

With the new Firefox for Android, we will now automatically convert your Open Web App into a native Android app.

Packaged App on Android

But how can you test you app on Android, before you submit it to the Marketplace?

We have a new tool to add to your lineup!

Introducing mozilla-apk-cli

If you have NodeJS as well as zip/unzip installed, then you can use our new command line tool to build testable .apk installers.

mozilla-apk-cli is a command-line application, so the commands below would be run from a terminal application.

Getting setup is easy:

npm install mozilla-apk-cli

This will give you a new program mozilla-apk-cli available in ./node_modules/.bin/

You can also globally install with

npm install -g mozilla-apk-cli

I’ll assume you put ./node_modules/.bin in your path or installed globally.

Open Web Apps come in three flavors and the CLI can build them all:

  • hosted app
  • packaged app zip file
  • packaged app from a directory of source code

Let’s assume you have a packaged app you are working on.
You have a directory layout like this:


You can build a testable Android app with the following:

mozilla-apk-cli ./www my_test_app.apk

This will produce my_test_app.apk which can be side-loaded to your phone in either of the following ways:

  • Put in on the web and download/install form a browser on your Android device
  • Use adb to install the app
adb install my_test_app.apk

Setting up adb is out of scope for this blog post, but the Android SDK site has some good resources on adb.

adb using USB


Do not distribute this test .apk file!!!

If you change your app, rebuild and send the APK to your users, the update will fail to install. With each new version of your app, using Android’s app manager, you have to remove the test app before installing the 2nd version.

mozilla-apk-cli is only for testing and debugging your new Android app locally. When you are happy with your app, you should distribute the Open Web App through the Marketplace or from your website via an install page.

You don’t need to manage an .apk file directly. Just like you don’t need to manage Mac OS X, Windows or Linux builds for your Open Web App.

We’ve baked native Android support deeply into the Firefox for Android runtime. When a user chooses to install an Open Web App, the native app is synthesized on demand using the production APK Factory Service. This works regardless of the website or Marketplace you are installing the Open Web App from.

How does the CLI work?

Back to our new test tool. This tool is a frontend client to the APK Factory Service. It takes your code and sends it to a reviewer instance of the service. Reviewer as opposed to the production release environment.

This service synthesizes an native Android app, builds it with the Android SDK and lastly signs it with a development cert. As mentioned, this synthesized APK is debuggable and should not be distributed.

The nice thing about the service is that you do not have to have Java, ant, the Android SDK and other Android development tools installed on your local computer. You can focus on the web and test on whatever devices you have handy.

Hosted and Packaged Zip files

We just looked at how to test a packaged app which is a directory of source code. Now lets look at the other two modes. If you already have built your packaged app into a .zip file, use:

mozilla-apk-cli ./ my_test_app.apk

If you are building a hosted app, use:

mozilla-apk-cli http://localhost:8080/ my_test_app.apk

No Android Devices? No stress

Perhaps you are saying "Sounds cool, but I don’t have any Android devices… How am I supposed to test?"

Good point. We’re enabling this automatically.

On the one hand, don’t worry. One thing mobile first development has taught us, is that there are way more devices and platforms that you will ever have testing resources for. The web is about open standards and progressive enhancement.

Your web app is just going to be a little bit nicer as a native android app, fitting into the OS as the user expects.

It doesn’t use native UI widgets or anything like that, so extensive testing is not required. The rendering engine is gecko from the already installed Firefox for Android.

On the other hand… open standards and compatibility is a nice story, but as web developers, we know things tend to have platform specific bugs. I’d recommend the traditional grading of supported platforms and if Android is a high priority, definitely get a device, Firefox for Android and test your app.

As we make native experiences automatic across platforms (Android, Mac OS X, etc) we are all ears for feedback. What do you think?

mozilla-apk-cli Resources

The source code for the CLI tool is on GitHub. If you need a sample packaged app, here is a demo version. The source code for the APK Factory Service is also on GitHub.

Join us in with ideas, feedback and questions and please file bugs in Marketplace Integration.

Thanks to Wil Clouser for the illustrations.

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Firefox OS Apps run on Android

At Mozilla we believe that apps and browsing are best viewed as cooperative and symbiotic, each better when working together. We are working to strengthen that relationship by building an apps ecosystem that is built using the Web technologies that so many developers are already familiar with.

We built Firefox OS as a mobile OS that puts the Web and Open Web Apps at the centre of the mobile experience. The efforts to reduce the performance gaps between the Web and native are paying rich dividends and our work on exposing device capabilities to the Web via WebAPIs, have made web first app development a viable alternative to native platforms.

Build Open Web Apps, run out-of-the-box on Android

Now, with Firefox for Android 29, Mozilla is extending this open Open Web Apps ecosystem to Android. Over the past few months, we have been working on providing a “native experience” for Open Web Apps. What this means is that as a user, you can now manage your web app just like you would a native app. You can install/update/uninstall the app and the app will also show up in the App Drawer as well as the Recent Apps list.

As a developer, you can now build your Open Web App for Firefox OS devices and have that app reach millions of existing Firefox for Android users without having to change a single line of code!

Check out the video to see an Open Web App in action on an Android device,

Better yet, if you have installed Firefox for Android try one or build an app and submit it to the Marketplace.

We also recommend reading Testing Your Native Android App.

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Better integration for open web apps on Android

Up until now, developing web apps on mobile has been a little tricky.

After spending the time developing your app, getting your users to install it is difficult, especially when the concept of “installing a web app” is not very well defined.

The most popular method is synonymous with adding a shortcut to the homescreen. This is problematic on a number of fronts, not least because the management of web apps – especially around launching, switching between and uninstalling web apps – differs significantly from that of native apps.

The web app “exists” only on the homescreen, not in the app drawer.

When it’s running, it is not clearly marked in the Recent Apps list.

Even once you get something like a smooth user-flow of installing your app onto the user’s phone’s homescreen, you often find that your app is running in a degraded or out-of-date web view, missing out on compatibility or speed optimizations of a desktop class browser.

What we as developers would like is a modern, fast web runtime, which is kept up-to-date on our devices.

Wouldn’t it also be nice for our users to launch and manage their web apps in the same way as native apps?

Introducing APK Factory

We have been working on making web apps be real on the desktop for some time. On the desktop, if you install a web app, Firefox will repackage the app as a desktop app so that it will integrate perfectly with the rest of your system – as outlined in more detail in Progress report on cross-platform Open Web Apps.

That means being in the Start menu on Windows, or in the Launch Control screen on Mac OS X.

From Firefox 29, that will apply to Android too.

This means that as a web developer, you can rely on a modern, up-to-date web runtime on Android to run your web apps. Even better, that web runtime is provided by an ordinary Android app, which means it will stay modern and up-to-date, and you can finally say goodbye to the Android Browser.

A web app, called ShotClock. Notice its icon in the top right of the screen.

The user will experience your web app as if it is a real native Android app:

  • The app appears in the App Drawer, the Recent Apps list, with its own names and icons,
  • The app can be installed and uninstalled just like a native Android app,
  • The app can be updated just like a native Android app.

In the App Drawer

In the Recent Apps list: all these apps are web apps

Installed with certain permissions

Best yet, is that we make these changes without the developer needing to do anything. As a developer, you get to write awesome web apps, and not worry about different packaging needed to deliver the web app to your users.

So if you’re already making first-class apps for Firefox OS, you’re already making first-class apps for Android.

The Technical details

On Firefox, you can install an app using the window.navigator.mozApps.install(manifestUrl) method call. Any website can use this API, so any website can become an app store.

The manifestUrl is the URL of a manifest.json document which describes the app to your phone without actually loading the app:

  • The app’s name and description, translated into any number of languages.
  • The app’s icon, in various sizes for different pixel densities.
  • The permissions that the app needs to run.
  • The WebActivities that the app wants to register.
  • For packaged apps only, this provides a URL to the zip file containing the app’s code and resources.

On Firefox for Android, we implement this method by sending the URL to a Mozilla-managed service which builds an Android APK specifically for the app.

APKs created by the Factory use Android’s excellent Resource framework so that the correct icon and translation is displayed to the user, respecting the user’s locale or phone screen.

Web app permissions are rendered as Android permissions, so the user will have a completely native experience of installing your app.

For packaged apps, the APK also includes a copy of the packaged zip file, so that no extra networking is required once the app is downloaded.

For hosted apps, the first time the app is launched, the resources listed in its appcache are downloaded, so that subsequent launches can happen as quickly as possible, without requiring a network connection.

And if you want to detect if the app is running in a web app versus in a webpage, checking the getSelf() method call will help you:

if (window.navigator.mozApps) {
  // We're on a platform that supports the apps API.
  window.navigator.mozApps.getSelf().onsuccess = function() {
    if (this.result) {
      // We're running in an installed web app.
    } else {
      // We're running in an webpage.
      // Perhaps we should offer an install button.

Keeping your apps up-to-date

For hosted apps, you update your apps as usual: just change your app on your server, and your users will pick up those changes the next time they run your app. You can change as much as you want, and your users will get the latest version of the app each time they launch and connect to your servers.

For anything needing changes to the app’s manifest, your users will get an updated APK sent to them to update their existing installation.

For example, if you want to change the app’s icon, or even name, changing the app’s manifest will cause the APK Factory service to regenerate the app’s APK, and notify your users that there is a new version available for install.

For packaged apps, the same mechanism applies: change the app’s package zip file, then update the version number in the app’s manifest file, and the APK Factory will pick up those changes and notify your users that an updated app is available. Your users will get an notified that there’s a new APK to install. Simples.

Is that it?

This is an exciting project. It has very little web developer involvement, and no extra API for developers to use: however, it should represent a step forward in usability of web apps on Android.

Now that we have taken the step to generate APKs for web apps, this gives us a platform for further blurring the lines between web apps and apps. Check it out for yourself and help us improve the feature: get Firefox Beta from the Google Play Store, install apps from the Firefox Marketplace, and let us know what you think!

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Firefox 24 for Android gets WebRTC support by default

WebRTC is now on Firefox for Android as well as Firefox Desktop! Firefox 24 for Android now supports mozGetUserMedia, mozRTCPeerConnection, and DataChannels by default. mozGetUserMedia has been in desktop releases since Firefox 20, and mozPeerConnection and DataChannels since Firefox 22, and we’re excited that Android is now joining Desktop releases in supporting these cool new features!

What you can do

With WebRTC enabled, developers can:

  • Capture camera or microphone streams directly from Firefox Android using only JavaScript (a feature we know developers have been wanting for a while!),
  • Make browser to browser calls (audio and/or video) which you can test with sites like, and
  • Share data (no server in the middle) to enable peer-to-peer apps (e.g. text chat, gaming, image sharing especially during calls)

We’re eager to see the ideas developers come up with!

For early adopters and feedback

Our support is still largely intended for developers and for early adopters at this stage to give us feedback. The working group specs are not complete, and we still have more features to implement and quality improvements to make. We are also primarily focused now on making 1:1 (person-to-person) calling solid — in contrast to multi-person calling, which we’ll focus on later. We welcome your testing and experimentation. Please give us feedback, file bug reports and start building new applications based on these new abilities.

If you’re not sure where to start, please start by reading some of the WebRTC articles on Hacks that have already been published. In particular, please check out WebRTC and the Early API, The Making of Face to GIF, and PeerSquared as well as An AR Game (which won our getUserMedia Dev Derby) and WebRTC Experiments & Demos.

An example of simple video frame capture (which will capture new images at approximately 15fps):

navigator.getUserMedia({video: true, audio: false}, yes, no);
video.src = URL.createObjectURL(stream);
setInterval(function () {
  context.drawImage(video, 0,0, width,height);
  frames.push(context.getImageData(0,0, width,height));
}, 67);

Snippet of code taken from “Multi-person video chat” on nightly-gupshup (you can try it in the WebRTC Test Landing Page — full code is on GitHub)

function acceptCall(offer) {
    log("Incoming call with offer " + offer);
    navigator.mozGetUserMedia({video:true, audio:true}, function(stream) {
    document.getElementById("localvideo").mozSrcObject = stream;
    document.getElementById("localvideo").muted = true;
    var pc = new mozRTCPeerConnection();
    pc.onaddstream = function(obj) {
      document.getElementById("remotevideo").mozSrcObject =;
    pc.setRemoteDescription(new mozRTCSessionDescription(JSON.parse(offer.offer)), function() {
      log("setRemoteDescription, creating answer");
      pc.createAnswer(function(answer) {
        pc.setLocalDescription(answer, function() {
          // Send answer to remote end.
          log("created Answer and setLocalDescription " + JSON.stringify(answer));
          peerc = pc;

            "answer", {
              to: offer.from,
              answer: JSON.stringify(answer)
            function() { console.log("Answer sent!"); }
        }, error);
      }, error);
    }, error);
  }, error);
function initiateCall(user) {
    navigator.mozGetUserMedia({video:true, audio:true}, function(stream) {
    document.getElementById("localvideo").mozSrcObject = stream;
    document.getElementById("localvideo").muted = true;
    var pc = new mozRTCPeerConnection();
    pc.onaddstream = function(obj) {
      log("Got onaddstream of type " + obj.type);
      document.getElementById("remotevideo").mozSrcObject =;
    pc.createOffer(function(offer) {
      log("Created offer" + JSON.stringify(offer));
      pc.setLocalDescription(offer, function() {
        // Send offer to remote end.
        log("setLocalDescription, sending to remote");
        peerc = pc;
          "offer", {
            to: user,
            from: document.getElementById("user").innerHTML,
            offer: JSON.stringify(offer)
          function() { console.log("Offer sent!"); }
      }, error);
    }, error);
  }, error);

Any code that runs on Desktop should run on Android. (Ah, the beauty of HTML5!) However, you may want to optimize for Android knowing that it could now be used on a smaller screen device and even rotated.

This is still a hard-hat area, especially for mobile. We’ve tested our Android support of 1:1 calling with a number of major WebRTC sites, including,, and

Known issues

  • Echo cancellation needs improvement; for calls we suggest a headset (Bug 916331)
  • Occasionally there are audio/video sync issues or excessive audio delay. We already have a fix in Firefox 25 that will improve delay (Bug 884365).
  • On some devices there are intermittent video-capture crashes; we’re actively investigating (Bug 902431).
  • Lower-end devices or devices with poor connectivity may have problems decoding or sending higher-resolution video at good frame rates.

Please help us bring real-time communications to the web: build your apps, give us your feedback, report bugs, and help us test and develop. With your help, your ideas, and your enthusiasm, we will rock the web to a whole new level.

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)