mozilla

Revision 351693 of App Development API Reference

  • Revision slug: Apps/Reference
  • Revision title: App developer reference
  • Revision id: 351693
  • Created:
  • Creator: dbuc
  • Is current revision? No
  • Comment

Revision Content

One truly great thing about developing open Web apps is that all the APIs are Web APIs. You can use the plethora of documentation already on MDN and elsewhere to learn how to build your app. This page presents a list of some of the most important and useful reference documentation you'll likely need while developing your apps.

Basics

These guides and references will help you with questions about creating your app, making it install and reside on devices, and so forth.

The app manifest
The manifest contains information describing your app. This guide explains how the manifest works and how to create one.
Using the application cache
This guide describes the HTML5 application cache, which your app can use to specify which of its resources should remain on the device as opposed to being loaded from a remote source.
Installing apps
The {{domxref("Apps.install()")}} DOM method is used to install an app. Learn how to use it in this reference page.

Design

These references and guides provide information useful when designing your app and building its user interface.

Layout and structure

Responsive design
Your app should be able to adjust to different display sizes capabilities based on the features available on whatever device it's used on. This guide will help you learn how to do so.
Media queries
One key technology toward responsive design is the media query; media queries let your CSS adapt in many ways to the capabilities of the device being used.
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 animating

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 is extremely useful for many purposes, including 2D games.
WebGL
WebGL is a Web-friendly version of OpenGL ES, which 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.

Code

DOM

XMLHttpRequest: Sending and receiving data using HTTP and HTTPS
{{domxref("XMLHttpRequest")}} is the DOM API used to send and receive information using HTTP, including for downloading files.
DOM event reference
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.
IndexedDB
An SQL database for Web apps; this provides a great way to store sets of data on the user's device.
Storage
The {{domxref("Storage")}} API provides a way to store small amounts of data on the user's device. This is often used for app preferences, for example.

Device interaction APIs

Camera API
The camera API lets you snap photos and video using the device's built-in camera.
WebAPI
The "WebAPI" suite of APIs provide access to nearly all the capabilities of the device, from files to network information.

Note: We will list the individual WebAPI links here directly instead of the landing page soon.

Publish

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

Note: These documents are not yet on MDN, but need to be!

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. I'm not convinced this particular link is really very useful.

Revision Source

<p>One truly great thing about developing open Web apps is that all the APIs are Web APIs. You can use the plethora of documentation already on MDN and elsewhere to learn how to build your app. This page presents a list of some of the most important and useful reference documentation you'll likely need while developing your apps.</p>
<h2 id="Basics">Basics</h2>
<p>These guides and references will help you with questions about creating your app, making it install and reside on devices, and so forth.</p>
<dl>
  <dt>
    <a href="/en-US/docs/Apps/Manifest" title="/en-US/docs/Apps/Manifest">The app manifest</a></dt>
  <dd>
    The manifest contains information describing your app. This guide explains how the manifest works and how to create one.</dd>
  <dt>
    <a href="/en-US/docs/HTML/Using_the_application_cache" title="/en-US/docs/HTML/Using_the_application_cache">Using the application cache</a></dt>
  <dd>
    This guide describes the HTML5 application cache, which your app can use to specify which of its resources should remain on the device as opposed to being loaded from a remote source.</dd>
  <dt>
    <a href="/en-US/docs/DOM/Apps.install" title="/en-US/docs/DOM/Apps.install">Installing apps</a></dt>
  <dd>
    The {{domxref("Apps.install()")}} DOM method is used to install an app. Learn how to use it in this reference page.</dd>
</dl>
<h2 id="Design">Design</h2>
<p>These references and guides provide information useful when designing your app and building its user interface.</p>
<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 capabilities based on the features available on whatever device it's used on. This guide will help you learn how to do so.</dd>
  <dt>
    <a href="/en-US/docs/CSS/Media_queries" title="/en-US/docs/CSS/Media_queries">Media queries</a></dt>
  <dd>
    One key technology toward responsive design is the media query; media queries let your CSS adapt in many ways to the capabilities of the device being used.</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_animating">Drawing and animating</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 is extremely useful for many purposes, 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, which 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>
<h2 id="Code">Code</h2>
<h4 id="DOM">DOM</h4>
<dl>
  <dt>
    <a href="/en-US/docs/DOM/XMLHttpRequest" title="/en-US/docs/DOM/XMLHttpRequest">XMLHttpRequest: Sending and receiving data using HTTP and HTTPS</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 event reference</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/IndexedDB" title="/en-US/docs/IndexedDB">IndexedDB</a></dt>
  <dd>
    An SQL database for Web apps; this provides a great way to store 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 {{domxref("Storage")}} API provides a way to store small amounts of data on the user's device. This is often used for app preferences, for example.</dd>
</dl>
<h4 id="Device_interaction_APIs">Device interaction APIs</h4>
<dl>
  <dt>
    <a href="/en-US/docs/DOM/Using_the_Camera_API" title="/en-US/docs/DOM/Using_the_Camera_API">Camera API</a></dt>
  <dd>
    The camera API lets you snap photos and video using the device's built-in camera.</dd>
  <dt>
    <a href="/en-US/docs/WebAPI" title="/en-US/docs/WebAPI">WebAPI</a></dt>
  <dd>
    The "WebAPI" suite of APIs provide access to nearly all the capabilities of the device, from files to network information.</dd>
</dl>
<div class="note">
  <p><strong>Note:</strong> We will list the individual WebAPI links here directly instead of the landing page soon.</p>
</div>
<h2 id="Publish">Publish</h2>
<p>These documents and guides will help you learn how to publish your app and manage it on the Firefox OS Marketplace.</p>
<div class="warning">
  <p><strong>Note:</strong> These documents are not yet on MDN, but need to be!</p>
</div>
<dl>
  <dt>
    <a href="http://zamboni.readthedocs.org/en/latest/topics/api/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://zamboni.readthedocs.org/en/latest/topics/api/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://zamboni.readthedocs.org/en/latest/topics/api.html" title="http://zamboni.readthedocs.org/en/latest/topics/api.html">Marketplace API</a></dt>
  <dd>
    All Marketplace-related documentation is centered here. I'm not convinced this particular link is really very useful.</dd>
</dl>
Revert to this revision