App Center

  • Revision slug: Web/Apps
  • Revision title: App Center
  • Revision id: 514873
  • Created:
  • Creator: chrisdavidmills
  • Is current revision? No
  • Comment

Revision Content

Design

Learn how to design installable Open Web Apps that provide a great cross-platform user experience.

Build

Find all the tools, documentation, and tutorials you'll need for development and testing of your Web app.

Publish

Distribute your apps on an open marketplace that puts users and developers first. Read more on the Marketplace zone.

Learn how to create Open Web Apps — rich experiences that run across multiple devices and form factors — using the same Web standards and open technologies that you already know.

Quickstart

The basic information you need to get up and running: designing, building and publishing apps.

Design patterns

Information on making your app's UI intuitive and easy to use, regardless of what platform it's running on.

Components

We've got a variety of templates and ready-made components to help speed up app developement.

Reference Apps

A number of sample Open Web Apps we have published for you to download, install, play with and learn from.

Payments

We provide tailored APIs to allow you to take payments for your apps, including purchased apps and in-app payments.

Publishing

Whether you want to self-publish or distribute your app on our Firefox Marketplace, we've got docs to help.

Note: We are keeping track of ongoing work on App Center documentation on our Apps documentation status page. If you want to help contribute to App Center documentation, please have a look at this page to see what work needs doing!

{{CommunityBox("Open Web apps", "dev-webapps", "mozilla.dev.webapps", "openwebapps", "Newsletter|https://marketplace.firefox.com/developers/#newsletter-signup|Sign up|Sign up for the Open Web Apps newsletter||Dev Derby|https://developer.mozilla.org/en/demos/devderby|See our community-written demos|Visit the Dev Derby to see demos and examples produced by the Open Web apps community")}}

  1. Quickstart
    1. Introduction to open web apps
    2. Introduction to Firefox OS
    3. What makes a great app?
    4. Design principles
    5. UI guidelines
    6. Your first app
    7. App development for web developers
    8. App development for mobile developers
    9. Developing app functionality
  2. Design
    1. Design guidelines
      1. Planning
      2. Design principles
      3. Installed app considerations
      4. Graphics for responsive sites
    2. Design patterns and assets
      1. Small screen design patterns
      2. Responsive Navigation Patterns
      3. Building blocks
      4. Design asset library
      5. Content styleguide
      6. Firefox OS styleguide
    3. Layout design
      1. The building blocks of responsive design
      2. Responsive design versus adaptive design
      3. Mobile first
      4. Flexible boxes
  3. Build
    1. Installing apps
      1. App manifest
      2. App permissions
      3. Installing Apps
      4. Icon implementation for apps
      5. Updating apps
      6. App installation and management APIs
      7. Packaged apps
      8. App manifests FAQ
      9. Installing open web apps on Android
      10. Platform-specific details of app installation
    2. App functionality: task categories
      1. Control basic data flow
      2. Gather and modify data
      3. Control the display
      4. Implement user input and control mechanisms
      5. Work offline
      6. Manipulate media
      7. Advanced network communication
      8. Build games
      9. Utilize User services
      10. Payments
    3. General app development topics
      1. Testing and debugging apps
      2. Firefox OS Tips and techniques
      3. Performance
      4. Optimizing startup performance
      5. App runtime release notes
      6. Web apps architecture
      7. Porting Chrome apps to open web apps
      8. Validating web apps with the App Validator
    4. Templates and components
      1. Using app templates
      2. x-tags
      3. Custom elements
      4. Web components
    5. App development FAQ
  4. Publish
  5. Reference apps
    1. Chrono
    2. Face Value
    3. Podcasts
    4. Roller
    5. Webfighter
    6. General notes
    7. rtcamera
  6. API Reference

Revision Source

<div class="initial-steps clear" id="sect1">
 <div class="panel">
  <h2 class="section-design" id="Design"><a href="/en-US/docs/Web/Apps/Quickstart/Design">Design</a></h2>
  <p>Learn how to design installable Open Web Apps that provide a great cross-platform user experience.</p>
  <ul class="no-bullets">
   <li><a href="/en-US/docs/Web/Apps/Quickstart/Design/Concept_A_great_app">Concept: A great app</a></li>
   <li><a href="/en-US/docs/Web/Apps/Quickstart/Design/Design_Principles">Design principles</a></li>
   <li><a href="/en-US/docs/Web/Apps/Quickstart/Design/UI_guidelines">UI guidelines</a></li>
  </ul>
 </div>
 <div class="panel">
  <h2 class="section-build" id="Build"><a href="/en-US/docs/Web/Apps/Quickstart/Build">Build</a></h2>
  <p>Find all the tools, documentation, and tutorials you'll need for development and testing of your Web app.</p>
  <ul class="no-bullets">
   <li><a href="/en-US/docs/Web/Apps/Quickstart/Build/Your_first_app">Your first app</a></li>
   <li><a href="/en-US/docs/Web/Apps/Quickstart/Build/App_tools">App tools</a></li>
   <li><a href="/en-US/docs/Web/Apps/Reference_apps">Reference apps</a></li>
  </ul>
 </div>
 <div class="panel">
  <h2 class="section-publish" id="Publish"><a href="/en-US/docs/Mozilla/Marketplace">Publish</a></h2>
  <p>Distribute your apps on an open marketplace that puts users and developers first. Read more on the <a href="/en-US/Marketplace">Marketplace zone</a>.</p>
  <ul class="no-bullets">
   <li><a href="/en-US/Apps/Quickstart/Publish/App_publishing_options">App publishing options</a></li>
   <li><a href="/en-US/docs/Web/Apps/Publishing/Submitting_an_app">Submit to Marketplace</a></li>
   <li><a href="/en-US/docs/Web/Apps/Quickstart/Build/Payments">Payments</a></li>
  </ul>
 </div>
</div>
<div class="summary">
 <p><span class="seoSummary">Learn how to create Open Web Apps — rich experiences that run across multiple devices and form factors — using the same Web standards and open technologies that you already know.</span></p>
</div>
<div class="column-container">
 <div class="column-4">
  <h2 id="Quickstart">Quickstart</h2>
  <p>The basic information you need to get up and running: designing, building and publishing apps.</p>
  <ul>
   <li><a href="/en-US/docs/Web/Apps/Quickstart/Build/Your_first_app">Your first app</a></li>
   <li><a href="/en-US/docs/Web/Apps/Quickstart/Design/UI_guidelines">UI guidelines</a></li>
   <li><a href="/en-US/docs/Web/Apps/Quickstart/Build/Developing_app_functionality">Developing app functionality</a></li>
  </ul>
 </div>
 <div class="column-4">
  <h2 id="Design_patterns">Design patterns</h2>
  <p>Information on making your app's UI intuitive and easy to use, regardless of what platform it's running on.</p>
  <ul>
   <li><a href="/en-US/docs/Web/Apps/Quickstart/Design/Design_Principles">Design principles</a></li>
   <li><a href="/en-US/docs/Web/Apps/Design/Responsive_Navigation_Patterns">Responsive navigation patterns</a></li>
   <li><a href="/en-US/docs/Web/Apps/Design/Installed_app_considerations">Installed app considerations</a></li>
  </ul>
 </div>
 <div class="column-4">
  <h2 id="Components">Components</h2>
  <p>We've got a variety of templates and ready-made components to help speed up app developement.</p>
  <ul>
   <li><a href="/en-US/docs/Web/Apps/Developing/App_templates">Using Mortar templates</a></li>
   <li><a href="/en-US/docs/Web/Apps/Developing/Custom_elements">Custom elements</a></li>
   <li><a href="/en-US/docs/Web/Apps/Developing/Web_components">Web components</a></li>
  </ul>
 </div>
</div>
<div class="column-container">
 <div class="column-4">
  <h2 id="Reference_Apps">Reference Apps</h2>
  <p>A number of sample Open Web Apps we have published for you to download, install, play with and learn from.</p>
  <ul>
   <li><a href="/en-US/docs/Web/Apps/Reference_apps/Chrono">Chrono</a></li>
   <li><a href="/en-US/docs/Web/Apps/Reference_apps/Face_value">Face value</a></li>
   <li><a href="/en-US/docs/Web/Apps/Reference_apps/Roller">Roller</a></li>
  </ul>
 </div>
 <div class="column-4">
  <h2 id="Payments">Payments</h2>
  <p>We provide tailored APIs to allow you to take payments for your apps, including purchased apps and in-app payments.</p>
  <ul>
   <li><a href="/en-US/docs/Web/Apps/Publishing/Marketplace_Payments">Marketplace payments</a></li>
   <li><a href="/en-US/docs/Web/Apps/Publishing/In-app_payments">In-app payments</a></li>
   <li><a href="/en-US/docs/Web/Apps/Publishing/Validating_a_receipt">Validating a receipt</a></li>
  </ul>
 </div>
 <div class="column-4">
  <h2 id="Publishing">Publishing</h2>
  <p>Whether you want to self-publish or distribute your app on our <a href="/en-US/Marketplace">Firefox Marketplace</a>, we've got docs to help.</p>
  <ul>
   <li><a href="/en-US/docs/Web/Apps/Quickstart/Publish/App_publishing_options">App publishing options</a></li>
   <li><a href="/en-US/docs/Web/Apps/Publishing/Submitting_an_app">Submitting an app</a></li>
   <li><a href="/en-US/docs/Web/Apps/Publishing/Packaged_Apps">Packaged apps</a></li>
  </ul>
 </div>
</div>
<div class="column-container">
 <div class="column-half">
  <div class="zone-callout">
   <h2 id="Top_articles">Top articles</h2>
   <ol>
    <li><a href="/en-US/docs/Web/Apps/Quickstart/Build/Your_first_app">Your first app</a></li>
    <li><a href="/en-US/docs/Web/Apps/Quickstart/Design/UI_guidelines">UI Guidelines</a></li>
    <li><a href="/en-US/docs/Web/Apps/Publishing/Submitting_an_app">Submitting an app</a></li>
    <li><a href="/en-US/docs/Web/Apps/Developing/Manifest">Manifest</a></li>
    <li><a href="/en-US/docs/Web/Apps/Developing/Offline">Offline apps</a></li>
   </ol>
  </div>
 </div>
 <div class="column-half">
  <div class="zone-callout">
   <h2 class="Tools" id="Tools" name="Tools">Tools for app developers</h2>
   <ul>
    <li><a href="http://buildingfirefoxos.com/">Building Firefox OS: building blocks</a></li>
    <li><a href="https://marketplace.firefox.com/">Visit the Firefox Marketplace</a></li>
    <li><a href="/en-US/docs/Mozilla/Firefox_OS/Using_Firefox_OS_Simulator">Firefox OS Simulator</a></li>
    <li><a href="/en-US/docs/Mozilla/Firefox_OS/Using_the_App_Manager">App Manager</a></li>
    <li><a href="/en-US/docs/Apps/App_developer_tools">App developer tools</a></li>
   </ul>
  </div>
 </div>
</div>
<div class="note">
 <p><strong>Note:</strong> We are keeping track of ongoing work on App Center documentation on our <a href="/en-US/docs/Web/Apps/Doc_Status">Apps documentation status</a> page. If you want to help contribute to App Center documentation, please have a look at this page to see what work needs doing!</p>
</div>
<p>{{CommunityBox("Open Web apps", "dev-webapps", "mozilla.dev.webapps", "openwebapps", "Newsletter|https://marketplace.firefox.com/developers/#newsletter-signup|Sign up|Sign up for the Open Web Apps newsletter||Dev Derby|https://developer.mozilla.org/en/demos/devderby|See our community-written demos|Visit the Dev Derby to see demos and examples produced by the Open Web apps community")}}</p>
<h2 id="Subnav">Subnav</h2>
<ol>
 <li><a href="/en-US/Apps/Quickstart">Quickstart</a>
  <ol>
   <li><a href="/en-US/Apps/Quickstart/Build/Intro_to_open_web_apps">Introduction to open web apps</a></li>
   <li><a href="/en-US/Apps/Quickstart/Build/Intro_to_Firefox_OS">Introduction to Firefox OS</a></li>
   <li><a href="/en-US/Apps/Quickstart/Design/Concept_A_great_app">What makes a great app?</a></li>
   <li><a href="/en-US/Apps/Quickstart/Design/Design_Principles">Design principles</a></li>
   <li><a href="/en-US/Apps/Quickstart/Design/UI_guidelines">UI guidelines</a></li>
   <li><a href="/en-US/Apps/Quickstart/Build/Your_first_app">Your first app</a></li>
   <li><a href="/en-US/Apps/Quickstart/Build/For_Web_developers">App development for web developers</a></li>
   <li><a href="/en-US/Apps/Quickstart/Build/For_mobile_developers">App development for mobile developers</a></li>
   <li><a href="/en-US/Apps/Quickstart/Build/Developing_app_functionality">Developing app functionality</a></li>
  </ol>
 </li>
 <li><a href="/en-US/Apps/Design" title="Information regarding app and interface design practices.">Design</a>
  <ol>
   <li><a href="/en-US/Apps/Design/Design_guidelines">Design guidelines</a>
    <ol>
     <li><a href="/en-US/Apps/Design/Planning_your_app" title="Start by planning your app">Planning</a></li>
     <li><a href="/en-US/Apps/Design/Guidelines/Design_Principles" title="A useful list of general design principles to start with.">Design principles</a></li>
     <li><a href="/en-US/Apps/Design/installed_app_considerations" title="High level considerations particular to installed Open Web App UX.">Installed app considerations</a></li>
     <li><a href="/en-US/Apps/Design/Graphics_for_responsive_sites" title="Ideas to keep in mind when designing graphics for responsive sites and applications.">Graphics for responsive sites</a></li>
    </ol>
   </li>
   <li><a href="/en-US/Apps/Design/Design_patterns_and_assets">Design patterns and assets</a>
    <ol>
     <li><a href="/en-US/Apps/Design/Patterns" title="Guides to effective design patterns that work on small screen apps, including Firefox OS.">Small screen design patterns</a></li>
     <li><a href="/en-US/Apps/Design/Responsive_Navigation_Patterns">Responsive Navigation Patterns</a></li>
     <li><a href="/en-US/Apps/Design/Building_Blocks" title="A library of components for use in Open Web Apps, including usage guides, assets, and HTML, CSS and JavaScript code snippets.">Building blocks</a></li>
     <li><a href="/en-US/Apps/Design/Design_asset_library" title="Graphical assets for helping design the visuals of Open Web Apps, including PSD files.">Design asset library</a></li>
     <li><a href="/en-US/Apps/Design/Content" title="A guide to choosing effective fonts, writing good copy, and creating good image content for Open Web Apps.">Content styleguide</a></li>
     <li><a href="http://www.mozilla.org/en-US/styleguide/products/firefox-os/" title="Design guidelines for Firefox OS apps.">Firefox OS styleguide</a></li>
    </ol>
   </li>
   <li><a href="/en-US/Apps/app_layout" title="Using components and responsive design techniques for effective app layouts">Layout design</a>
    <ol>
     <li><a href="/en-US/Apps/app_layout/responsive_design_building_blocks" title="This guide discusses the main technologies and techniques involved in creating responsive applications">The building blocks of responsive design</a></li>
     <li><a href="/en-US/Apps/app_layout/Responsive_design_versus_adaptive_design" title="These two terms are often confused, so here we provide a no-nonsense guide to the differences between the two.">Responsive design versus adaptive design</a></li>
     <li><a href="/en-US/Apps/app_layout/Mobile_First" title="Mobile first is the practice of designing a web site so that the default layout/configuration is for mobile devices, and layouts and features for desktop browsers are then layered on top of that default.">Mobile first</a></li>
     <li><a href="/en-US/Web/Guide/CSS/Flexible_boxes" title="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.">Flexible boxes</a></li>
    </ol>
   </li>
  </ol>
 </li>
 <li><a href="/en-US/Apps/Developing" title="This section contains documentation about building app functionality, with HTML5 and device APIs (WebAPIs).">Build</a>
  <ol>
   <li><a href="/en-US/Apps/Developing/installable_apps">Installing apps</a>
    <ol>
     <li><a href="/en-US/Apps/Developing/Manifest" title="/en-US/Apps/Manifest">App manifest</a></li>
     <li><a href="/en-US/Apps/Developing/App_permissions" title="Access to device APIs is key to creating many useful apps. Here is what's available and how to access them.">App permissions</a></li>
     <li><a href="/en-US/Web/API/Apps.install">Installing Apps</a></li>
     <li><a href="/en-US/Apps/Developing/installable_apps/Icon_implementation_for_apps">Icon implementation for apps</a></li>
     <li><a href="/en-US/Apps/Developing/Updating_apps" title="/en-US/Apps/Updating_apps">Updating apps</a></li>
     <li><a href="/en-US/Apps/Developing/JavaScript_API" title="/en-US/Apps/JavaScript_API">App installation and management APIs</a></li>
     <li><a href="/en-US/Apps/Developing/Packaged_apps" title="/en-US/Apps/Packaged_apps">Packaged apps</a></li>
     <li><a href="/en-US/Apps/Developing/About_app_manifests" title="/en-US/Apps/FAQs/About_app_manifests">App manifests FAQ</a></li>
     <li><a href="/en-US/Apps/Developing/Apps_for_Android">Installing open web apps on Android</a></li>
     <li><a href="/en-US/Apps/Developing/Platform-specific_details">Platform-specific details of app installation</a></li>
    </ol>
   </li>
   <li><a href="/en-US/Apps/Developing/App_functionality:_task_categories">App functionality: task categories</a>
    <ol>
     <li><a href="/en-US/Apps/Basic_data_flow">Control basic data flow</a></li>
     <li><a href="/en-US/Apps/Developing/gather_and_modify_data" title="A lot of what you'll want to do involves retrieving data — from files, the device hardware and key services, and the location around the device.">Gather and modify data</a></li>
     <li><a href="/en-US/Apps/Developing/Control_the_display" title="This part of the docs contains tutorials covering mechanisms you can use to control the display of data to the user.">Control the display</a></li>
     <li><a href="/en-US/Apps/User_input_methods">Implement user input and control mechanisms</a></li>
     <li><a href="/en-US/Apps/Developing/offline" title="This section looks in detail at making apps work offline using mechanisms such as appCache, localStorage, and IndexedDB.">Work offline</a></li>
     <li><a href="/en-US/Apps/Developing/Manipulating_media" title="This part of our docs looks at video, audio, and images, and how to do interesting things with them inside Open Web Apps.">Manipulate media</a></li>
     <li><a href="/en-US/Apps/Advanced_network_communication">Advanced network communication</a></li>
     <li><a href="/en-US/Games">Build games</a></li>
     <li><a href="/en-US/Apps/Developing/User_services" title="Here we look at APIs designed to facilitate common user services, such as taking payments and login functionality.">Utilize User services</a></li>
     <li><a href="/en-US/Apps/Quickstart/Build/Payments">Payments</a></li>
    </ol>
   </li>
   <li><a href="/en-US/Apps/Developing/General_app_development_topics">General app development topics</a>
    <ol>
     <li><a href="/en-US/Apps/Developing/Testing_and_debugging" title="No developer documentation would be complete without comprehensive testing advice and tools.">Testing and debugging apps</a></li>
     <li><a href="/en-US/Mozilla/Firefox_OS/Apps/Tips_and_techniques" title="An assortment of tips and tricks (as well as workarounds for problems) that our developers have suggested for you!">Firefox OS Tips and techniques</a></li>
     <li><a href="/en-US/Mozilla/Firefox_OS/Performance" title="Articles about optimizing Firefox OS applications.">Performance</a></li>
     <li><a href="/en-US/Apps/Developing/Optimizing_startup_performance">Optimizing startup performance</a></li>
     <li><a href="/en-US/Apps/Developing/Release_notes">App runtime release notes</a></li>
     <li><a href="/en-US/Apps/Developing/Architecture">Web apps architecture</a></li>
     <li><a href="/en-US/Apps/Developing/Porting_Chrome_apps_to_open_web_apps">Porting Chrome apps to open web apps</a></li>
     <li><a href="/en-US/Apps/Developing/App_Validator">Validating web apps with the App Validator</a></li>
    </ol>
   </li>
   <li><a href="/en-US/Apps/Developing/Templates_and_components">Templates and components</a>
    <ol>
     <li><a href="/en-US/Apps/Developing/App_templates" title="To help you get going with app development as quickly as possible, there are some template apps you can use as a basis for your own apps.">Using app templates</a></li>
     <li><a href="/en-US/Apps/Developing/x-tags">x-tags</a></li>
     <li><a href="/en-US/Apps/Developing/Custom_elements" title="A guide to custom x-tag based elements provided to help you create a consistent user interface.">Custom elements</a></li>
     <li><a href="/en-US/Apps/Developing/Web_components">Web components</a></li>
    </ol>
   </li>
   <li><a href="/en-US/Apps/Developing/App_development_FAQ">App development FAQ</a></li>
  </ol>
 </li>
 <li><a href="/en-US/Marketplace">Publish</a></li>
 <li><a href="/en-US/Apps/Reference_apps">Reference apps</a>
  <ol>
   <li><a href="/en-US/Apps/Reference_apps/Chrono">Chrono</a></li>
   <li><a href="/en-US/Apps/Reference_apps/Face_value">Face Value</a></li>
   <li><a href="/en-US/Apps/Reference_apps/Podcasts">Podcasts</a></li>
   <li><a href="/en-US/Apps/Reference_apps/Roller">Roller</a></li>
   <li><a href="/en-US/Apps/Reference_apps/Webfighter">Webfighter</a></li>
   <li><a href="/en-US/Apps/Reference_apps/General_notes">General notes</a></li>
   <li><a href="/en-US/Apps/Reference_apps/rtcamera">rtcamera</a></li>
  </ol>
 </li>
 <li><a href="/en-US/Apps/Reference">API Reference</a></li>
</ol>
Revert to this revision