Found 89 pages:

# Page Tags and summary
1 App Center Apps, Mobile, Modern web apps, Progressive web apps, Web Development
Learn how to create modern web apps using the latest web technologies and ideas — web apps that will have super powers in the latest modern browsers, but still provide an acceptable user experience in less able browsers.
2 After the purchase NeedsContent
This page is a placeholder for future content.
3 App developer tutorials Apps, NeedsContent
Here is a list of tutorials to help you with app development:
4 Audio and video app tutorials Apps, Landing
These tutorials are for audio and video apps:
5 Debugging the app Debugging, Error Console, Example, Firefox OS, WebApp runtime
Enable Error Console with -jsconsole to debug your app inside the WebApp runtime.
6 General app development tutorial Apps, Marketplace
Here is a tutorial for creating a Twitter-based Web application that will show tweets from selected geographical areas. The tutorial describes how to create an app, write a manifest file for it, and submit it to the Firefox Marketplace.
7 App code Apps
Outside of the different colors and imagery that apps use, an app's design isn't necessarily dynamic: the principles of designing a flexible app are largely the same. But the style and tools a developer uses in coding an application is a completely different story. Numerous libraries and frameworks are available for coding mobile apps.
8 App design Apps
There are many considerations to ponder before designing your web app.
9 Configuring your development environment Apps
Before you can dive into creating your web application, you need to make sure you have the tools required.
10 Create your app! Apps
Using open Web technologies to create rich, powerful applications for numerous devices is a fun, rewarding, and potentially profitable process. The open Web provides the tools needed to make app creation possible, while Mozilla provides an excellent marketplace for showcasing and distributing your app. Use the information provided in this document to create your incredible app and share it with the world!
11 Creating the Area Tweet app Apps
With all of the design goals and coding standards laid out, it's time to get into the coding of our app.
12 Debugging the app Apps, Firefox OS
For debugging an app the first step is, of course, to use a full-capabilities desktop browser such as Firefox with all its available tools. But once the app is installed on a platform (cf. Platform-specific details of app installation) it becomes a native app, it is run from inside the webapp runtime and things get more complicated.
13 Foundations of an HTML5 Web app Apps
An Open Web App is basically an HTML5 app. While the role of HTML, CSS, and JavaScript are obvious to some, let's do a quick recap of how each plays its own important role in an HTML5 app.
14 Testing the app Apps
App testing is of immense importance, especially when supporting multiple platforms and devices. The number of tests and types of testing needed depend on the devices and platforms supported. Test types include:
15 Your app development environment Text editors, Web developer tools
Before you can dive into creating your web application, you need to make sure you have the tools required.
16 Media demo app tutorial Apps, NPR, Tutorial
This is a tutorial on the "NPR demo" app.
17 Weather app tutorial Apps
This tutorial tells you how to build an example app called weatherme.
18 App layout Apps, Design
Creating an effective layout for a modern web site or app is a challenge. In some ways, your job is easier - CSS generally has much more solid, consistent support across browsers and platforms than it used to, so you no longer have to rely on as many horrible hacks. But in other ways, it is harder; there are so many devices around these days that can access the Web, with different browsers, screen sizes, resolutions, processing power, and usage contexts (for example is the device portable, will it have a network connection?)
19 Getting started with app development Apps
Web apps are apps built using standard Web technologies. They work in any modern Web browser, and can be developed using your favorite tools. Some characteristics that distinguish Web apps from websites: Apps are installed by a user, they are self-contained and don't always require the chrome of a browser window, and they can be built to run offline. Gmail, Twitter, and Etherpad are Web apps.
20 Identity integration for apps Apps, BrowserID, Identity, NeedsContent, Persona
Mozilla's open solution for user identity, BrowserID (part of Mozilla Persona), is used in several ways in the apps ecosystem, most of which require no action from app developers (other than logging in to the Firefox Marketplace).
21 Index Apps, Index
Found 89 pages:
22 Progressive web apps Apps, Modern web apps, Progressive web apps
Progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform web applications. These apps work everywhere and provide several features that give them the same user experience advantages as native apps. This set of docs tells you all you need to know about them.
23 Add to Home screen Manifest, PWA, Progressive web apps, Service Worker, add to home screen, icon
Add to Home screen (or A2HS for short) is a feature available in modern smartphone browsers that allows developers to easily and conveniently add a shortcut to their Home screen representing their favorite web app (or site) so they can subsequently access it with a single tap. This guide explains how A2HS is used, and what you need to do as a developer to allow your users to take advantage of it.
24 How to make PWAs installable Installable, PWAs, Progressive web apps, a2hs, add to home screen, js13kGames, progressive
In this article, we learned about how we can make PWAs installable, using web manifest and Add to home screen.
25 How to make PWAs re-engageable using Notifications and Push Notifications, PWAs, Progressive web apps, Push, js13kGames, progressive
Having the ability to cache the contents of an app to work offline is a great feature. Allowing the user to install the web app on their home screen is even better. But instead of relying only on user actions, we can do more, using push messages and notifications to automatically re-engage and deliver new content whenever it is available.
26 Introduction to progressive web apps Introduction, PWAs, Progressive web apps, js13kGames, progressive
This article provides an introduction to Progressive Web Apps (PWAs), discussing what they are, and the advantages they bring over regular web apps.
27 Making PWAs work offline with Service workers Offline, PWAs, Progressive web apps, Service Workers, js13kGames, progressive
In this article we took a simple look at how you can make your PWA work offline with service workers. Be sure to check out our further documentation if you want to learn more about the concepts behind the Service Worker API and how to use it in more detail.
28 Progressive loading Loading, PWAs, Progressive web apps, js13kGames, progressive
In previous articles we covered APIs that help us make our js13kPWA example a Progressive Web App: Service Workers, Web Manifests, Notifications and Push. In this article we will go even further and improve the performance of the app by progressively loading its resources.
29 Progressive web app advantages PWA, Progressive web apps, advantages, concepts
Progressive web apps should have all of the advantages listed in the sections below.
30 Progressive web app structure App shell, PWAs, Progressive web apps, Service Workers, Streams, Structure, js13kGames, progressive
Now we know the theory behind PWAs, let's look at the recommended structure of an actual app. We will start with analyzing the js13kPWA application, why it is built that way, and what benefits it brings.
31 Rec Room - Accessing Phone APIs and Hardware Apps, Design, Development, Firefox OS, Quickstart
WebAPIs are simply JavaScript APIs that allow applications to interact with mobile device features. There are a number of WebAPIs available for accessing device hardware (battery status, device vibration hardware, camera, etc.) and data (calendar data, contacts, etc.). Though many of these APIs are still being iterated on — and some are still working towards stabilization — there are strategies available for checking compatibility so we can leverage these APIs and build feature-rich applications.
32 Rec Room - Data Management and Offline Apps, Design, Development, Firefox OS, Quickstart
When developing for mobile devices, we face some unique challenges around storing and maintaining user data. Mobile users are likely going to be travelling in and out of connected areas, which means we must have a solid strategy for handling offline data. In this chapter, we'll go over techniques for detecting connectivity and how to persist application data at appropriate times regardless of a user's connection.
33 Rec Room - Networking Apps, Design, Development, Firefox OS, Quickstart
In order to communicate with a web service, we can specify a `systemXHR` permission in our application manifest. In our podcasts app, we have this permission set to allow us to fetch and download podcasts. In our episode model, app/scripts/models/episode_model.js, we can see how to put XHR to use:
34 Rec Room - User Interface and Layout Apps, Design, Development, Firefox OS, Quickstart
FirefoxOS leverages HTML and CSS for user interfaces. The website Building FirefoxOS, produced by Mozilla partner Telefonica, provides reusable UI widgets, as well as CSS for common app layouts, transitions, etc. The site contains numerous other resources, including a Photoshop stencil kit, fonts, icons and much more.
35 Security guidelines Apps, Security
All Firefox OS apps use standard web technologies like HTML, JavaScript, CSS and SVG, but sensitive app permissions are restricted to privileged apps, which are delivered in a signed archive through the Firefox Market, rather than being deployed dynamically by an arbitrary web server. The purpose is to allow these apps to be reviewed from a security and quality perspective, to ensure they can be trusted with increased permissions levels. This section is intended to guide developers in writing secure packaged apps.
36 Web app basics Apps, B2G, Firefox OS, Mobile
No summary!
37 Web app fundamentals Apps, Firefox OS, Guide, Mobile
This page lists topics useful for building webapps; each page includes workflows, tutorials, references, examples, and other useful information.
38 App functionality: task categories
This page describes and links to the sub-pages we have that cover the development of different categories of app functionality, or "things you will want your app to do".
39 Audio and Video Delivery Audio, HTML5, Media, Video
Whether we are dealing with pre-recorded audio files or live streams, the mechanism for making them available through the browser's <audio> and <video> elements remains pretty much the same. Currently, to support all browsers we need to specify two formats, although with the adoption of MP3 and MP4 formats in Firefox and Opera, this is changing fast. You can find compatibility information in the following places:
40 Adding captions and subtitles to HTML5 video HTML5, Media, WebVTT, captions, subtitles, track
In other articles we looked at how to build a cross browser video player using the HTMLMediaElement and Window.fullScreen APIs, and also at how to style the player. This article will take the same player and show how to add captions and subtitles to it, using the WebVTT format and the <track> element.
41 Creating a cross-browser video player Apps, HTML5, Video, full screen
This article describes a simple HTML5 video player that uses the Media and Fullscreen APIs and works across most major desktop and mobile browsers. As well as working fullscreen, the player features custom controls rather than just using the browser defaults. The player controls themselves won't be styled beyond the basics required to get them working; full styling of the player will be taken care of in a future article.
42 Cross-browser audio basics Apps, Audio, Guide, HTML5, Media, events

This article provides:

  • a basic guide to creating a cross-browser HTML5 audio player with all the associated attributes, properties, and events explained
  • a guide to custom controls created using the Media API
43 H.264 support in Firefox Apps, Codec, Firefox, Firefox OS, H.264, Reference, Video, codec support
This article explains the state of support for the H.264 video format in Firefox/Firefox OS, including code examples, tips and tricks.
44 Live streaming web audio and video Guide, adaptive streaming
Live streaming technology is often employed to relay live events such as sports, concerts and more generally TV and Radio programmes that are output live. Often shortened to just streaming, live streaming is the process of transmitting media 'live' to computers and devices. This is a fairly complex and nascent subject with a lot of variables, so in this article, we'll introduce you to the subject and let you know how you can get started.
45 Media buffering, seeking, and time ranges Apps, Buffer, HTML5, TimeRanges, Video, buffering, seeking
Sometimes it's useful to know how much <audio> or <video> has downloaded or is playable without delay — a good example of this is the buffered progress bar of an audio or video player. This article discusses how to build a buffer/seek bar using TimeRanges, and other features of the media API.
46 Setting up adaptive streaming media sources Audio, HLS, HTML5, HTTP Live Streaming, MPEG-DASH, Video, adaptive streaming
Let's say you want to set up an adaptive streaming media source on a server, to be consumed inside an HTML5 media element. How would you do that? This article explains how, looking at two of the most common formats: MPEG-DASH and HLS (HTTP Live Streaming.)
47 Video player styling basics Apps, Guide, Media, Styling, Video
In the previous Cross browser video player article we described how to build a cross-browser HTML5 video player using the Media and Fullscreen APIs. This follow-up article looks at how to style this custom player, including making it responsive.
48 Web Audio playbackRate explained Apps, Audio, Media, Video, playbackRate
The playbackRate property of the <audio> and <video> elements allows us to change the speed, or rate, at which a piece of web audio or video is playing
49 Writing Web Audio API code that works in every browser API
You probably have already read the announcement on the Web Audio API coming to Firefox, and are totally excited and ready to make your until-now-WebKit-only sites work with Firefox, which uses the unprefixed version of the spec.
50 Audio and video manipulation Audio, Canvas, HTML5, Reference, Video, Web Audio API, WebGL, developer recommendation
The ability to read the pixel values from each frame of a video can be very useful.
51 Control basic data flow through your apps Beginner
The core of every web app is its internal and external data flow. As the web has evolved, the complexity of these data flows has increased. Understanding these data flows will help you build better, and more efficient web apps.
52 Developing game apps Apps, Games, páginas_a_traducir
references and guides provide information useful to developers creating game apps using open Web technologies.
53 Gather and modify data API, Contacts, File, Geolocation, Guide, Storage, Web Activities, WebAPI, camera, data, getusermedia
The following flowchart illustrates the typical workflow for retrieving data from the device hosting an open web app:
54 Keep it level: responding to device orientation changes Apps, Device Orientation, Firefox OS, devicemotion, deviceorientation
Game development is doubtless the most interesting area in which motion and orientation data are useful: for example you might think of using this data to control the direction of characters, vehicles or balls, and make them jump.
55 Near or far? Responding to proximity Call, Device, Guide, Mobile, Proximity, Proximity API, Sensor
As we have seen above, Low Energy Messenger hides clickable/tappable DOM elements when the ear is near to the device during a call. In Firefox OS certified applications it's possible to do something more by using the PowerManager.screenEnabled property, with which you can control the device's screen and turn the screen off and on for real. Have a look at the Power Management API documentation for more details about it.

56 Optimizing for high and low network speeds API, Apps, Guide, Network Information API
The Network Information API provides information about the system's connection. The specification defines a connection object, a type property and a typechange event.
57 Plotting yourself on the map Apps, Geolocation, Google Maps, Maps, OpenLayers, OpenStreetMap
There are plenty of online maps available these days. To get an idea of the global and local map services available, have a look at this list. This article will focus on the most used one (Google Maps) and on the most open one (OpenStreetMap).
58 Responding to light conditions API, Ambient Light, Apps, CSS, Christmas, Firefox, HTML
Ambient light sensors are used in a variety of functions such as adjusting display brightness to a comfortable level.
59 Retrieving Battery status information API, Battery, Battery Status API, Firefox OS, Web app
In the context of Open Web Apps, knowing the battery status can be useful in a number of situations:
60 Updating phone contacts from the Web API, Apps, Contacts, Firefox OS, Geolocation, mozContacts
The Contacts API is part of the WebAPI, and provides a simple interface to manage contacts stored in a device's system address book.
61 Modern web app architecture Apps, Architecture, Ember, Frameworks, Guide, MVC, Tools
There are many different ways to build an open web application, including a lot of different tool choices, and a lot of new theory to learn. This series introduces you to the types of tools you will likely come across as you learn about modern web app development, then takes you through the theory behind Model View Controller (MVC), the most common type of app architecture used on the Web. With the theory covered, we will then take you through a set of tutorials that allow you to build your own MVC app from the ground up.
62 Controllers App, Architecture, Controller, Ember
Technical review completed.
63 Creating an Ember app Apps, Command Line, Ember, Ember CLI
We are going to create a simple MVC app called world-clock, which will display the local time, update it every second, and allow you to choose additional timezones to display. You can view a demo of the app, and check out the complete source code on Github.
64 MVC architecture Apps, Architecture, Controller, Ember, MVC, Model, Tutorial, View
Model View Controller (MVC) is a software architecture pattern, commonly used to implement user interfaces: it is therefore a popular choice for architecting web apps. In general, it separates out the application logic into three separate parts, promoting modularity and ease of collaboration and reuse. It also makes applications more flexible and welcoming to iterations.
65 Models and application data Adapter, Apps, Data Store, Ember, Routes, data, models
Here we'll finish off our world-clock app, adding functionality that enables users to choose additional timezones to display when they click on the timezones link. This will help users schedule meetings with friends in diverse locations such as San Francisco, Buenos Aires, and London. We'll use Ember Data and the LocalForage library to store our data in an IndexedDB instance so the app is usable offline, and the Moment Timezone library to provide timezone data.
66 Publishing your app Apps, Ember, GitHub, Guide, build, gh-pages, production, publication
If you are comfortable with using GitHub, one great option for hosting your application (especially if you want to put it up somewhere for others to test) is GitHub Pages. Using our World Clock application as an example, we'll build our files for production and commit them to a gh-pages branch in our git repo.
67 Styling your Ember app Apps, CSS, Ember, Fonts, Guide, Images, Styling
The app structure created by Ember CLI when you first generated your app contains a public directory. The contents of this directory are copied over unchanged to the root of the dist folder when you serve your app with ember serve, so this is where you should put assets to be used in your app, like images and fonts. You should use the usual good practices for storing these, such as having separate images and fonts directories.
68 Views and templates Application, Apps, Ember, Links, Routes, Templates, views
Technical review completed.
69 Performance Apps, Firefox OS, Performance
Articles related to Open Web App/Firefox OS performance.
70 App performance validation Apps, B2G, Firefox OS, Performance, Testing, Validation
Editorial review completed.
71 CSS and JavaScript animation performance Animation, Animations, CSS, FPS, JavaScript, Performance, Transitions
Browsers are able to optimize rendering flows. In summary, we should always try to create our animations using CSS transitions/animations where possible. If your animations are really complex, you may have to rely on JavaScript-based animations instead.
72 Optimizing startup performance Apps, Games, Performance
Regardless of platform, it's always a good idea to start up as quickly as possible. Since that's a universal issue, we won't be focusing on it too much here. Instead, we're going to look at a more important issue when building Web apps: starting up as asynchronously as possible. That means not running all your startup code in a single event handler on the app's main thread.
73 Performance fundamentals Apps, Firefox, Gecko, Guide, Performance
Performance means efficiency. In the context of Open Web Apps, this document explains in general what performance is, how the browser platform helps improve it, and what tools and processes you can use to test and improve it.
74 Power Bash, CodingScripting, Guide, Mobile, Mozilla
FxOS Powertool! is a command-line-based, power testing framework that is useful to optimize client software/applications for power consumption. The tool collects data from multiple tests, and outputs them with basic statistics calculations. This page walks you through how to use this tool with examples.
75 Nexus 4 Harness Guide, Mobile
To use FxOS Powertool! for a power consumption test on the LG Nexus 4 phone, follow this guide to set up a battery harness.
76 UI Synchronicity
UI Synchronicity describes the way a user interface reacts to user interaction, whether that be in a blocking or non-blocking manner.
77 Platform-specific details of app installation Apps, páginas_a_traducir
Gaia (the Firefox OS user interface) includes a marketplace link on the second homepage, and apps can be installed in this way. Default apps included with Gaia are stored in the Gecko profile on the device as an offline cache of the Web app at /data/local/OfflineCache/*.
78 User input and controls Screen Orientation, contenteditable, drag and drop, fullscreen, keyboard, mouse, pointer lock, touch, user input
Modern web user input goes beyond simple mouse and keyboard: think of touchscreens for example. This article provides recommendations for managing user input and implementing controls in open web apps, along with FAQs, real-world examples, and links to further information for anyone needing more detailed information on the underlying technologies. Relevant APIs and events include touch events, Pointer Lock API, Screen Orientation API, Fullscreen API, Drag & Drop and more.
79 Touch Gestures and Events Draft, Gestures, touch, user input
Touch Screen/ Gestures are the most popularly used technology to make user experience more smart and simple. Touch pads/screens make gaming more interactive and fun, and are being used widely all over the globe.
80 User notifications API, Notifications, Vibration, alarm
Here's the typical workflow for managing notifications:
81 Checking when a deadline is due Apps, Date, Example, Firefox OS, IndexedDB, deadline
A screenshot of the sample app. A red main title saying To do app, a test to-do item, and a red form for users to enter new tasks
82 Detecting when to notify users Guide, Notifications, Vibration, alarm, events
Events are the standard programmatic way in which we respond to the various happenings in an application. Event handlers can be attached to objects so that when an occurrence of an event is detected, we can respond to that event with some kind of code. Some events have been around forever, and can be regarded as old classics. For example, a simple onclick handler to run a function when a button is pressed:
83 Good vibrarions: harnessing the vibration API for user feedback NeedsContent
vibration content
84 Notifying users via the Notification and Vibration APIs Apps, Firefox OS, Notifications
In case you didn't read the previous article, here is a quick recap on the sample app we're looking at. We're looking at To-do list notifications, a simple to-do list application that stores task titles and deadline times and dates using IndexedDB, and then provides users with notifications when deadline dates are reached, making use of the Notification and Vibration APIs. You can download the To-do list notifications app from github and play around with the source code, or view the app running live.
85 Using Alarms to notify users API, Alarm API, Apps, Firefox OS, Notification API, Notifications, alarm
The example referred to throughout this article is To-do List Alarms, a to-do list example that stores to-do list information (task and time and date task is due) in an IndexedDB instance. When a to-do list task is stored, the Alarm API is used to store an Alarm reference in the system, which is handled by the same application. When the alarm is due, a system notification is shown to notify the user of this, which works whether the application is open at the time or not.
86 Using the full screen: Full screen API explained NeedsCompatTable, NeedsContent, NeedsExample
full screen api
87 User services NeedsExamples
In this section we look at APIs designed to facilitate common user services, such as taking payments and login functionality.
88 Utilities Deprecated
No summary!
89 Working offline IndexedDB, Offline, appcache, localStorage, localforage
The following diagram illustrates the typical workflow of an offline app. The entry point is when the app is downloaded/installed and then launched — navigated to in the case of an online web app, and installed and opened in the case of an installable app (e.g. on Firefox OS.) At this point the standard behaviour should be to store the assets and initial dataset for the app on the device, if possible, after which the app can be used, storing its dataset offline and periodically syncing with the dataset on the server.

Document Tags and Contributors

Tags: 
Contributors to this page: necrophcodr, fscholz
Last updated by: necrophcodr,