Writing your first Firefox OS app. Nearly two years ago, Mozilla announced “Boot to Gecko” (a.k.a. B2G), a project whose primary goal was to provide a standalone web-centric operating system in which the preferred (and in fact, only) platform for application development is the HTML5 stack. In essence, this operating system would have filled a gap that prevented web developers from writing true native apps. This announcement was met with a real sense of excitement from the mobile developer community.
Firefox OS, as it would soon be appropriately named, captivated and excited web developers because of Mozilla's embrace of the HTML5 stack. No more picking and choosing between Objective C and Java—HTML5 would be a first class citizen. In theory, with minimal tweaks to existing HTML5 web apps, developers could port these same apps to Firefox OS in no time (much like PhoneGap developers have been doing for other platforms). Figure 1. The following is a simplified example of Robert Nyman's Introducing Web Activities post. <! Developers | Firefox Marketplace | This page describes the Firefox OS Simulator for developers targeting Firefox OS 1.2 or later.
If you're developing apps for Firefox OS 1.1, then you should check out the documentation for the Firefox OS 1.1 Simulator instead. The Firefox OS Simulator is a version of the higher layers of Firefox OS that simulates a Firefox OS device, but runs on the desktop. This means that in many cases, you don't need a real device to test and debug your app. It runs in a window the same size as a Firefox OS device, includes the Firefox OS user interface and built-in apps, and simulates many of the Firefox OS device APIs.
The Simulator is packaged and distributed as a Firefox add-on. Once you've downloaded it and installed it in Firefox, you can run it, push apps to it, and attach the developer tools to it, using the App Manager. Installation To install the simulator, click the button below. Install Simulator To start the Simulator, see the instructions in the App Manager documentation. The Simulator UI. Quick Start | Developers. Open web apps give web developers exactly what they've wanted for years: a cross-platform environment dedicated to installable apps created with just HTML, CSS, and JavaScript — with Firefox OS being the first dedicated open web apps platform. This guide aims to get you up and running quickly with a basic architecture and build instructions so that you can create the next great app!
If you'd like to follow along with this guide, you can download our quick start app template. Find more out about what this contains by reading our Apps template guide. App Structure Packaged vs. Hosted Apps There are two types of open web apps: packaged and hosted. For the purposes of this guide, you'll create a hosted app which will live at your localhost address. App Manifests Every Firefox app requires a manifest.webapp file at the app root. A basic manifest is all you need to get started. App Layout & Design Web APIs JavaScript APIs are being created and enhanced as quickly as devices are. Tools & Testing. Writing a web app for Firefox OS - Mozilla. Firefox OS apps are just Web apps written with HTML, CSS, and JavaScript. You publish them on the Web like you would publish any other Web site. In order to make the Web site installable as a Web app on the device, you just have to garnish them with a manifest and hook up an install button as explained below.
The following topics are recommended starting points: Of course, feel free to dive even further into Open Web Apps! Installing the Web app With the app and manifest published on the Web, you need to make Gecko aware of it. To install an app, call the navigator.mozApps.install API. Note: the Install button could also be in an app market, such as the Firefox Marketplace, but it's often very handy to have an "Install as web app" button on the main page of your site. Now visit your web site in the Firefox OS browser app and tap the install button. Document Tags and Contributors. Getting started with app development - Apps. Developers. App development API reference - Apps. The following is a list of code-level reference documentation you'll likely need in developing a Firefox OS app.
For lightning-fast search and browsing of Web APIs and methods, try dochub.io, a site that uses MDN's API to provide a rapid lookup of almost every feature the Web platform has to offer. Foundations of a Firefox OS app A Firefox OS app is simply an Open Web App. App manifest The manifest describes your app. This guide explains how the manifest works and how to create one. App Installation and Management APIs The programmatic interface you use for installing apps and managing them. Working offline Strategies and technologies you can use to ensure that your app works when there's no network connection available.
Types of apps This article explains the types of apps: hosted, privileged, and certified. App permissions Access to device APIs is key to creating many useful apps. Layout and structure The building blocks of responsive design Media queries Mobile first Flexible boxes CSS transforms.