App Development API Reference

  • Revision slug: Web/Apps/Reference
  • Revision title: App development API reference
  • Revision id: 422947
  • Created:
  • Creator: tx2z
  • Is current revision? No
  • Comment

Revision Content

The following is a list of code-level reference documentation you'll likely need in developing a Firefox OS app. For more guides, tools, videos, and Firefox OS app ecosystem content visit the Firefox Marketplace Developer Hub. 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.
Letting your app work 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. You need privileged or certified apps for access to sensitive device APIs. Privileged and certified apps are packaged apps.
App permissions
Access to device APIs is key to creating many useful apps. Here is what's available and how to access them.

Layout and structure

Responsive design
Your app should be able to adjust to different display sizes and capabilities of whatever device it's used on. This guide will help you learn how to do this.
Media queries
One of the most important technologies in responsive app design is the media query. Media queries allow your app to respond to screen size, resolution, device orientation, and many other environment variables using declarative CSS rules or JavaScript listeners. Also see Using media queries and MediaQueryList.
Flexible boxes
CSS flexible boxes let you configure your app's user interface to automatically adjust the positioning and sizes of elements based on the size and orientation of the display.

Drawing and animation

CSS transforms
CSS transforms let you rotate, scale, and zoom HTML content, taking advantage of hardware acceleration where available, all without relying on JavaScript code.
CSS transitions
CSS transitions let you animate changes to your CSS. Once a transition effect is configured, changes to your CSS occur over a period of time instead of instantaneously. This makes it possible to easily and efficiently create a wide variety of visual effects in your apps.
CSS animations
CSS animations let you animate changes to your document on a more fundamental level, using keyframes to precisely configure the animation effect. This also lets you create looping animation effects rather than effects that happen just once, as is the case with transitions, all without relying on JavaScript.
HTML canvas
The HTML {{HTMLElement("canvas")}} element provides a 2D graphics workspace for you to draw in. This has many uses, including 2D games.
WebGL
WebGL is a Web-friendly version of OpenGL ES that lets your app offer hardware-accelerated 3D graphics.
SVG
Scalable Vector Graphics (SVG) is a technology that lets you draw graphics using vectors instead of bitmapped images. This is great for scalability, presenting diagrams and charts, and for high-quality, scalable user interfaces.

Firefox OS device APIs

These are emerging Web platform standards and device APIs crucial to Firefox OS app development and to Open Web Apps.

The following table gives the app manifest permissions for hosted and privileged apps. For more information see App permissions.

{{Page("/en-US/docs/Apps/App_permissions", "Hosted app and privileged app permissions")}}

General Web APIs

Elements, events, network requests, storage and other standard Web APIs

Network requests - send and receive data with XMLHttpRequest
{{domxref("XMLHttpRequest")}} is the DOM API used to send and receive information using HTTP, including for downloading files.
DOM events
The event reference provides a complete list of all the events that can be sent and received to interact with DOM objects.
Touch events
This documentation covers touch events in particular, which of course you are likely to encounter when developing apps for touchscreen devices.
Online & offline events
Allows your app to dynamically respond to changes in network connection availability.
History
Travers and manipulate the historical view state of your app with various commands - helpful in rewinding or advancing the user's current view
Audio
Embedding and manipulation of audio content with the HTML5 Audio Tag
Video
Embedding and manipulation of video content with the HTML5 Video Tag
Geolocation
Enables your app to request the user's current location and listen for location changes.
Screen orientation
Listen for high-level screen orentation changes between various portrait and landscape positions.
Device orientation
Allows your app to detect granular device orientation changes from on-device sensors.
IndexedDB
A database access layer for Web apps that provides a scriptable interface for storing and retrieving large sets of data on the user's device.
Storage
The Storage API family provides various way to persistently store limited amounts of simple data on a user's device.
  • localStorage
  • sessionStorage
  • Blob - An object that represents a file-like object of immutable, raw data. The data contained can be manipulated and mutated into several common formats (images, etc).
Web workers
Allows apps to run JavaScript code (which cannot touch the DOM or window object) in background threads to optimize performance and unblock UI rendering

Firefox Marketplace services

These documents and guides will help you learn how to publish your app and manage it on the Firefox OS Marketplace.

Submission API
The Submission API lets you validate your app, update your app, and fetch information about the apps available to be installed.
Payment API
The Payment API lets you get information about and process in-app purchases as well as to simply get information about what pricing tiers are available.
Marketplace API
All Marketplace-related documentation is centered here.

Revision Source

<p>The following is a list of code-level reference documentation you'll likely need in developing a Firefox OS app. For more guides, tools, videos, and Firefox OS app ecosystem content visit the <a href="https://marketplace.firefox.com/developers/" title="https://marketplace.firefox.com/developers/">Firefox Marketplace Developer Hub</a>. For lightning-fast search and browsing of Web APIs and methods, try <a href="http://dochub.io">dochub.io</a>, a site that uses MDN's API to provide a rapid lookup of almost every feature the Web platform has to offer.</p>
<h3 id="Foundations_of_a_Firefox_OS_app">Foundations of a Firefox OS app</h3>
<p>A Firefox OS app is simply an <a href="/en-US/docs/Apps" title="/en-US/docs/Apps">Open Web App</a>.</p>
<dl>
  <dt>
    <a href="/en-US/docs/Apps/Manifest" title="/en-US/docs/Apps/Manifest">App manifest</a></dt>
  <dd>
    The manifest describes your app. This guide explains how the manifest works and how to create one.</dd>
  <dt>
    <a href="/en-US/docs/JavaScript_API" title="/en-US/docs/JavaScript_API">App Installation and Management APIs</a></dt>
  <dd>
    The programmatic interface you use for installing apps and managing them.</dd>
  <dt>
    <a href="https://marketplace.firefox.com/developers/docs/apps_offline" title="https://marketplace.firefox.com/developers/docs/apps_offline">Letting your app work offline</a></dt>
  <dd>
    Strategies and technologies you can use to ensure that your app works when there's no network connection available.</dd>
  <dt>
    <a href="https://marketplace.firefox.com/developers/docs/packaged" title="https://marketplace.firefox.com/developers/docs/packaged">Types of apps</a></dt>
  <dd>
    This article explains the types of apps: hosted, privileged, and certified. You need privileged or certified apps for access to sensitive device APIs. Privileged and certified apps are packaged apps.</dd>
  <dt>
    <a href="/en-US/docs/Apps/App_permissions" title="/en-US/docs/Apps/App_permissions">App permissions</a></dt>
  <dd>
    Access to device APIs is key to creating many useful apps. Here is what's available and how to access them.</dd>
</dl>
<h3 id="Layout_and_structure">Layout and structure</h3>
<dl>
  <dt>
    <a href="/en-US/docs/Web_Development/Mobile/Responsive_design" title="/en-US/docs/Web_Development/Mobile/Responsive_design">Responsive design</a></dt>
  <dd>
    Your app should be able to adjust to different display sizes and capabilities of whatever device it's used on. This guide will help you learn how to do this.</dd>
  <dt>
    <a href="/en-US/docs/CSS/Media_queries" title="/en-US/docs/CSS/Media_queries">Media queries</a></dt>
  <dd>
    One of the most important technologies in responsive app design is the media query. Media queries allow your app to respond to screen size, resolution, device orientation, and many other environment variables using declarative CSS rules or JavaScript listeners. Also see <a href="/en-US/docs/DOM/Using_media_queries_from_code" title="/en-US/docs/DOM/Using_media_queries_from_code">Using media queries</a> and <a href="/en-US/docs/DOM/MediaQueryList" title="/en-US/docs/DOM/MediaQueryList">MediaQueryList</a>.</dd>
  <dt>
    <a href="/en-US/docs/CSS/Using_CSS_flexible_boxes" title="/en-US/docs/CSS/Using_CSS_flexible_boxes">Flexible boxes</a></dt>
  <dd>
    CSS flexible boxes let you configure your app's user interface to automatically adjust the positioning and sizes of elements based on the size and orientation of the display.</dd>
</dl>
<h3 id="Drawing_and_animation">Drawing and animation</h3>
<dl>
  <dt>
    <a href="/en-US/docs/CSS/Tutorials/Using_CSS_transforms" title="/en-US/docs/CSS/Tutorials/Using_CSS_transforms">CSS transforms</a></dt>
  <dd>
    CSS transforms let you rotate, scale, and zoom HTML content, taking advantage of hardware acceleration where available, all without relying on JavaScript code.</dd>
  <dt>
    <a href="/en-US/docs/CSS/CSS_transitions" title="/en-US/docs/CSS/CSS_transitions">CSS transitions</a></dt>
  <dd>
    CSS transitions let you animate changes to your CSS. Once a transition effect is configured, changes to your CSS occur over a period of time instead of instantaneously. This makes it possible to easily and efficiently create a wide variety of visual effects in your apps.</dd>
  <dt>
    <a href="/en-US/docs/CSS/CSS_animations" title="/en-US/docs/CSS/CSS_animations">CSS animations</a></dt>
  <dd>
    CSS animations let you animate changes to your document on a more fundamental level, using keyframes to precisely configure the animation effect. This also lets you create looping animation effects rather than effects that happen just once, as is the case with transitions, all without relying on JavaScript.</dd>
  <dt>
    <a href="/en-US/docs/HTML/Canvas/Tutorial" title="/en-US/docs/HTML/Canvas/Tutorial">HTML canvas</a></dt>
  <dd>
    The HTML {{HTMLElement("canvas")}} element provides a 2D graphics workspace for you to draw in. This has many uses, including 2D games.</dd>
  <dt>
    <a href="/en-US/docs/WebGL" title="/en-US/docs/WebGL">WebGL</a></dt>
  <dd>
    WebGL is a Web-friendly version of OpenGL ES that lets your app offer hardware-accelerated 3D graphics.</dd>
  <dt>
    <a href="/en-US/docs/SVG" title="/en-US/docs/SVG">SVG</a></dt>
  <dd>
    Scalable Vector Graphics (SVG) is a technology that lets you draw graphics using vectors instead of bitmapped images. This is great for scalability, presenting diagrams and charts, and for high-quality, scalable user interfaces.</dd>
</dl>
<h3 id="Firefox_OS_device_APIs">Firefox OS device APIs</h3>
<p>These are emerging Web platform standards and device APIs crucial to Firefox OS app development and to Open Web Apps.</p>
<p>The following table gives the app manifest permissions for hosted and privileged apps. For more information see <a href="/en-US/docs/Apps/App_permissions" title="/en-US/docs/Apps/App_permissions">App permissions</a>.</p>
<p>{{Page("/en-US/docs/Apps/App_permissions", "Hosted app and privileged app permissions")}}</p>
<h3 id="General_Web_APIs">General Web APIs</h3>
<p>Elements, events, network requests, storage and other standard Web APIs</p>
<dl>
  <dt>
    <a href="/en-US/docs/DOM/XMLHttpRequest" title="/en-US/docs/DOM/XMLHttpRequest">Network requests - send and receive data with XMLHttpRequest</a></dt>
  <dd>
    {{domxref("XMLHttpRequest")}} is the DOM API used to send and receive information using HTTP, including for downloading files.</dd>
  <dt>
    <a href="/en-US/docs/DOM/DOM_event_reference" title="/en-US/docs/DOM/DOM_event_reference">DOM events</a></dt>
  <dd>
    The event reference provides a complete list of all the events that can be sent and received to interact with DOM objects.</dd>
  <dt>
    <a href="/en-US/docs/DOM/Touch_events" title="/en-US/docs/DOM/Touch_events">Touch events</a></dt>
  <dd>
    This documentation covers touch events in particular, which of course you are likely to encounter when developing apps for touchscreen devices.</dd>
  <dt>
    <a href="/en-US/docs/Online_and_offline_events" title="/en-US/docs/Using_geolocation">Online &amp; offline events</a></dt>
  <dd>
    Allows your app to dynamically respond to changes in network connection availability.</dd>
  <dt>
    <a href="/en-US/docs/DOM/Manipulating_the_browser_history" title="/en-US/docs/DOM/Manipulating_the_browser_history">History</a></dt>
  <dd>
    Travers and manipulate the historical view state of your app with various commands - helpful in rewinding or advancing the user's current view</dd>
  <dt>
    <a href="/en-US/docs/HTML/Element/audio" title="/en-US/docs/IndexedDB">Audio</a></dt>
  <dd>
    Embedding and manipulation of audio content with the HTML5 Audio Tag</dd>
  <dt>
    <a href="/en-US/docs/HTML/Element/video" title="/en-US/docs/IndexedDB">Video</a></dt>
  <dd>
    Embedding and manipulation of video content with the HTML5 Video Tag</dd>
  <dt>
    <a href="/en-US/docs/Using_geolocation" title="/en-US/docs/Using_geolocation">Geolocation</a></dt>
  <dd>
    Enables your app to request the user's current location and listen for location changes.</dd>
  <dt>
    <a href="/en-US/docs/Mozilla_event_reference/orientationchange" title="/en-US/docs/IndexedDB">Screen orientation</a></dt>
  <dd>
    Listen for high-level screen orentation changes between various portrait and landscape positions.</dd>
  <dt>
    <a href="/en-US/docs/Mozilla_event_reference/deviceorientation" title="/en-US/docs/IndexedDB">Device orientation</a></dt>
  <dd>
    Allows your app to detect granular device orientation changes from on-device sensors.</dd>
  <dt>
    <a href="/en-US/docs/IndexedDB" title="/en-US/docs/IndexedDB">IndexedDB</a></dt>
  <dd>
    A database access layer for Web apps that provides a scriptable interface for storing and retrieving large sets of data on the user's device.</dd>
  <dt>
    <a href="/en-US/docs/DOM/Storage" title="/en-US/docs/DOM/Storage">Storage</a></dt>
  <dd>
    The Storage API family provides various way to persistently store limited amounts of simple data on a user's device.
    <ul>
      <li><a href="/en-US/docs/DOM/Storage#localStorage" title="/en-US/docs/DOM/Storage#localStorage">localStorage</a></li>
      <li><a href="/en-US/docs/DOM/Storage#sessionStorage" title="/en-US/docs/DOM/Storage#sessionStorage">sessionStorage</a></li>
      <li><a href="/en-US/docs/DOM/Blob" title="/en-US/docs/DOM/Blob">Blob</a> - An object that represents a file-like object of immutable, raw data. The data contained can be manipulated and mutated into several common formats (images, etc).</li>
    </ul>
  </dd>
  <dt>
    <a href="/en-US/docs/DOM/Using_web_workers" title="/en-US/docs/IndexedDB">Web workers</a></dt>
  <dd>
    Allows apps to run JavaScript code (which cannot touch the DOM or window object) in background threads to optimize performance and unblock UI rendering</dd>
</dl>
<h3 id="Firefox_Marketplace_services">Firefox Marketplace services</h3>
<p>These documents and guides will help you learn how to publish your app and manage it on the Firefox OS Marketplace.</p>
<dl>
  <dt>
    <a href="http://firefox-marketplace-api.readthedocs.org/es/latest/topics/submission.html" title="http://zamboni.readthedocs.org/en/latest/topics/api/submission.html">Submission API</a></dt>
  <dd>
    The Submission API lets you validate your app, update your app, and fetch information about the apps available to be installed.</dd>
  <dt>
    <a href="http://firefox-marketplace-api.readthedocs.org/es/latest/topics/payment.html" title="http://zamboni.readthedocs.org/en/latest/topics/api/payment.html">Payment API</a></dt>
  <dd>
    The Payment API lets you get information about and process in-app purchases as well as to simply get information about what pricing tiers are available.</dd>
  <dt>
    <a href="http://firefox-marketplace-api.readthedocs.org/en/latest/" title="http://zamboni.readthedocs.org/en/latest/topics/api.html">Marketplace API</a></dt>
  <dd>
    All Marketplace-related documentation is centered here.</dd>
</dl>
Revert to this revision