Screencast series: App Basics for Firefox OS

In this series you’ll learn:

• How to build your first application for Firefox OS.
• How to debug and test your application both on your desktop and a real device.
• How to get it listed in the Firefox Marketplace.
• How to use the APIs and special interfaces Firefox OS offers a JavaScript developer to take advantage of the hardware available in smartphones.

Code and development environment

In addition to the screencasts, you can download the accompanying code samples from GitHub. If you want to try the code examples out for yourself, you will need to set up a very simple development environment. All you need is:

• A current version of Firefox, which comes out of the box with the developer tools you need — we recommend getting Firefox Aurora or Nightly if you really want to play with the state-of-the-art technology.
• A text editor — in the screencasts we used Sublime Text, but any will do. If you want to be really web native, you can try Adobe Brackets.
• A local server or a server to push your demo files to. A few of the demo apps need HTTP connections instead of local ones.

Introducing the series

The series features Jan Jongboom (@janjongboom) and Sergi Mansilla (@sergimansilla) of Telenor Digital, and Chris Heilmann (@codepo8) of Mozilla; it was shot in three days in Oslo, Norway at the Telenor head office in February 2014.

Here are the three of us telling you about the series and what to expect:

Section 1: Building your first Firefox OS app and getting it published

In Section 1's five screencasts we show you how to build a Firefox OS application, how to debug and test it on your computer — and on a real device, and how to get it listed in the Firefox Marketplace. This may sound like a lot of work, but you will soon find out that if you already know how to build a website, you are 90% of the way there already.

More than a website

Firefox OS applications are HTML5 applications. In essence, these use the same technologies as websites do. You can start writing a website and turn it into an app simply by giving it a manifest file (see The app manifest for more details). This tells Firefox OS that you are writing an app and allows you to:

• List the app in the marketplace.
• Get access to the hardware of the device it runs on, to gather information such as Geolocation and Device Orientation.
• Much more!

In essence, HTML5 applications are supercharged websites and should follow the same rules, such as:

• Progressive enhancement: Test to see if what you want to use is really available before trying to access it.
• Adapting to their environment: For example using media queries and responsive images to optimize apps for different screen sizes, resolutions and available network speeds.
• Using HTML, CSS and JavaScript as the core technologies.

The main difference is that for a web page to become a great application, you should very much consider mobile users. This means first and foremost that your application should:

• Work offline.
• Allow your users to do one thing and have an interface that makes that easy.
• Play nicely with the battery life, and processor speed.

In many cases, this means you need to slim your web page down a bit and simplify the interface. The good news is that all your users will benefit from that.

The app manifest

The App Manifest in Firefox OS is a simple JSON file that tells the operating system about your app. In essence, this is what turns a web page into an Open Web App. In it, you define the name in different locales and you ask the operating system to get access to various services and hardware. You can also define the preferred orientation of your app and — if needed — lock it.

More information about the manifest and tools that can help you:

• The Open Web Apps Manifest Validator — also available as an API.
• The MDN documentation on the Open Web Apps Manifest — includes information on how to serve a manifest from your own server.

The App Manager

The simplest way to get started with Firefox OS is to try out the App Manager. This tool stands alongside the Firefox developer tools for desktop and allows you to connect to a Firefox OS simulator running on your computer, or a real Firefox OS device if you have one available. From there, you can play with Firefox OS, install apps straight onto the simulator or real device, and debug them as they are running on Firefox OS — seeing the live changes immediately without needing to uninstall or update apps.

The following video provides first steps with using the App Manager along with the simulator:

More information about the App Manager:

• The App Manager documentation on MDN.
• Introductory blog post on Mozilla Hacks.

Testing on a Real Device

Testing your applications in the simulator is nice, but it only gets you as far as a simulated environment can. If you want to test the performance of the app interaction, or react to things like device orientation, you need a real device. Together with the developer tools and the App Manager, you can use the device and get detailed insight into what happens to your application as you use it.

Publishing to Marketplace

The Firefox OS Marketplace is the most convenient place to list your application and make it available to people on their devices and the Web. The Marketplace also allows you to list your app for other platforms like Firefox Desktop and Firefox for Android. You can also allow users to rate your app, give you feedback, and buy your application using a simple checkout process. Getting your app listed is simple:

• Submit the marketplace URL to your manifest file.
• Add a description of your app (which also helps people to find it amongst the many other available apps.)
• Provide screenshots or videos to demonstrate your app's functionality.
• Pick a category for your application.
• Provide us with an email address to contact you on.
• Provide end users with a link to your privacy policy and a support web site.
• Provide a content rating for your application.

Applications submitted to the Marketplace are reviewed by Mozilla's app review team and you will be notified of the state of your submission within a few days. If there are issues with your application you will get a validation message during the submission but you might also get a human readable explanation of what is wrong and how to fix it.

Section 2: Advanced Firefox OS topics

In the first few videos we introduced you to Firefox OS and how to build your first app. We also covered how to debug your application on desktop — and on a real device — and how to get your app listed in the Firefox Marketplace. In the remaining five videos we’ll deep-dive into the technologies that enable Firefox OS apps to go that extra mile and give you access to the functionality that makes developing for a smartphone or tablet interesting to developers. Whilst some of these technologies are currently only working in Firefox OS, they are all open source and submitting as standards proposals. Working with these APIs today will mean you are ready for other devices and platforms emerging in the near future.

Web APIs

Smartphones are full of great technology — cameras, accelerometer, and GPS to name but a few. The problem was that all of these were not accessible by web technologies — if you wanted to access them, you needed to write native applications. To fix this, Mozilla and partners defined a set of APIs to allow developers to reach deep into the hardware of a mobile devices using JavaScript in a secure manner. These are called Web APIs and are defined in the open and available for others to implement. Firefox OS is the first platform that uses them; the below screencast explains more:

More information about Web APIs:

• The Wiki Page describing the ongoing work and state of implementation — also includes links to standards they are based on.
• Posts on Mozilla Hacks dealing with the subject of WebAPIs.

Web Activities

Web Activities are an alternative way to access the hardware of a device. Instead of getting an API to speak to the device directly, Web Activities allow you to create an ecosystem of applications on the device that talk to each other and share capabilities. For example, instead of trying to access the camera directly, your app can use a Web Activity to ask for an image and the user of the device can use their favourite application to take a photo, which is then returned to the app that requested it.

Instead of asking the users for access to their hardware (which is important in terms of security), you allow them to use applications they already trust to carry out such functions. Furthermore, you can register your application as the go-to application for certain tasks in the operating system. You can think of Web Activities as being equivalent to right/Ctrl + clicking on a file in a Desktop OS and choosing which application to open the file with. You are given several choices, plus on option to tell the OS to always use this app to open this file type from now on.

Web Activities allow apps to talk to each other — on the device, without any need for a server in between. All they transmit from one app to the other is the final data.

More information about Web Actitivies:

• The Web Activities Wiki Page
• Web activities reference on MDN
• An Introduction to Web Activities on Mozilla Hacks

Push Notifications

Push Notifications — invoked using the SimplePush Web API — are a way to make applications wake up when a device receives a certain message. This allows you to build applications that can stay closed — thus saving battery — until they are needed. Notifications created this way also have the benefit of carrying no data, thus Mozilla will never get the information of your app and attackers won't be able to listen in.

More information about Push Notifcations using SimplePush:

• The SimplePush Wiki Page
• Simple Push guide on MDN
• An introduction to SimplePush on Mozilla Hacks

Offline functionality

Apps are not much use if they don't work offline. That's partly why users prefer installed apps to just opening a browser and looking for content on their device's web browser; the term "web application" even sounds like it needs a web connection to be usable. Our users will be offline sometimes — on a plane, underground or with no data left on their SIM — and we need to ensure that our apps are still usable when this happens. HTML5 offers a few technologies that allow for offline functionality, mainly AppCache and DOMStorage.

More information about offline functionality:

• The DOMStorage Wiki page.
• The AppCache Wiki page.
• Using IndexedDB — for advanced storage on the client.
• LocalForage is a wrapper used in Firefox OS to provide the simplicity of DOMStorage along with the power of IndexedDB (explained in detail in this Mozilla Hacks post.)

Where to find more

We hope that this video series gave you a clear introduction to building your first open web apps. If you are interested in learning more, there are a few resources and channels you can use:

• The MDN App Center features information on how to design and build good open web apps.
• The MDN Marketplace zone contains detailed instructions how to get your app listed in the Firefox Marketplace, different publishing options, and handling payments.
• The Hacks Blog features weekly articles on Firefox OS apps (featuring Mozilla staff and third party developers like you), and cutting edge technologies — this is a great place to get an insight into what will come in the next versions of Firefox and Firefox OS.
• The MDN Firefox OS zone and B2G Wiki have in-depth information about the Firefox OS operating system.
• We are on IRC a lot — simply use irc.mozilla.org and find us in #devrel, #b2g, #openwebapps or #marketplace.

Hope to see you there,

Chris, Sergi and Jan