App Center

  • Revision slug: Web/Apps
  • Revision title: Open Web apps
  • Revision id: 454811
  • Created:
  • Creator: chrisdavidmills
  • Is current revision? No
  • Comment

Revision Content

Want to get the Open Web Apps project newsletter?
Sign up for it here!

The idea of Open Web Apps is to allow developers to create rich experiences that run across multiple devices and form factors (desktop, mobile, tablet, etc.) using the same Web standards and open technologies that many of them will be accustomed to already, such as HTML5, CSS, and JavaScript. Essentially, Open Web Apps are no different than normal Web pages or sites — in fact, they can be hosted as standard websites and accessed in the normal way — but the app model offers some significant advantages. As well as standard Web technologies, Open Web Apps can be given additional metadata that allows supporting User Agents to discover, install, launch, and grant them additional privileges.

Firefox OS is one such platform that supports these extra features - if you want to develop Firefox OS apps, you've come to the right place! The following represents the journey we'd like to take you on as you create awesome apps. Click on areas of interest to learn more.

 

Documentation for app developers

Introduction to open web apps
A high-level introduction to the main subtopics of Open Web Apps; a good place to start.
Open Web Apps and Web standards
High-level view of the intentions behind Open Web Apps.
App development for Web developers
Tips for new Web app developers interested in converting their Web sites into Web apps.
App development for mobile application developers
Suggestions for developers of apps for other mobile platforms who would like to start building Open Web Apps.
Getting started with app development
An introduction to Web app development.
Firefox OS app development quickstart
An quick guide to get you building Firefox OS apps in no time.
Planning your app
Start by planning your app — think about its purpose, target audience, and technologies needed. Sketch out its basic views and the paths between them. Think about a testing plan.
Web app basics
Guides and references to help you create your app and make it install and run on devices.
App Layout
All the guides and tutorials you could need to get ahead on effective layouts for responsive Open Web Apps.
Designing your Web app
Information regarding app and interface design practices.
Developing your Web app
How do build an app that does X? This section contains documentation about core app technologies, including the DOM, HTML5 and device APIs (WebAPIs).
Publishing your app
Guides to effectively publishing your app on the Firefox Marketplace, including documentation about taking advantage of features such as in-app payments.
Frequently asked questions
Questions that are often asked about Open Web Apps and the Firefox Marketplace. Find your answers here.

View All...

{{AppsLandingRightSide()}}

 

Revision Source

<div class="centeredInfoBanner">
  <strong>Want to get the Open Web Apps project newsletter?</strong><br />
  <a href="https://marketplace.firefox.com/developers/#newsletter-signup">Sign up for it here!</a></div>
<p><img alt="" src="https://mdn.mozillademos.org/files/4627/fx-marketplace-icon.png" style="width: 175px; height: 175px; float: left;" />The idea of <span class="seoSummary">Open Web Apps</span> is to <span class="seoSummary">allow developers to create rich experiences that run across multiple devices and form factors</span> (desktop, mobile, tablet, etc.) <span class="seoSummary">using</span> the same <span class="seoSummary">Web standards</span> and open technologies that many of them will be accustomed to already, <span class="seoSummary">such as HTML5, CSS, and JavaScript.</span> Essentially, Open Web Apps are no different than normal Web pages or sites — in fact, they can be hosted as standard websites and accessed in the normal way — but the app model offers some significant advantages. As well as standard Web technologies, Open Web Apps can be given additional metadata that allows supporting User Agents to discover, install, launch, and grant them additional privileges.</p>
<p><strong>Firefox OS</strong> is one such platform that supports these extra features - if you want to develop Firefox OS apps, you've come to the right place! The following represents the journey we'd like to take you on as you create awesome apps. Click on areas of interest to learn more.</p>
<nav class="apps-nav-wrapper">
  <ul class="main-categories">
    <li>
      <p><a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Introduction_to_open_web_apps">Introduction<br />
        Get started here</a></p>
    </li>
    <li>
      <p><a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Planning_your_app">
        <i class="icon-pencil icon-large">
        </i>
        Planning<br />
        your app
        <i class="icon-long-arrow-left icon-large">
        </i>
        </a></p>
    </li>
    <li>
      <p><a href="https://developer.mozilla.org/en-US/docs/Web/Apps/app_layout">
        <i class="icon-list-alt icon-large">
        </i>
        App<br />
        layout
        <i class="icon-long-arrow-left icon-large">
        </i>
        </a></p>
    </li>
    <li>
      <p><a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Design">
        <i class="icon-picture icon-large">
        </i>
        Designing<br />
        Apps
        <i class="icon-long-arrow-left icon-large">
        </i>
        </a></p>
    </li>
    <li>
      <p><a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Developing">
        <i class="icon-code icon-large">
        </i>
        Coding<br />
        apps
        <i class="icon-long-arrow-left icon-large">
        </i>
        </a></p>
    </li>
    <li>
      <p><a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Publishing">
        <i class="icon-usd icon-large">
        </i>
        Publishing<br />
        your app
        <i class="icon-long-arrow-left icon-large">
        </i>
        </a></p>
    </li>
  </ul>
</nav>
<p>&nbsp;</p>
<div class="topicpage-table">
  <div class="section">
  
<h2 class="Documentation" id="Documentation" name="Documentation">Documentation for app developers</h2>
    <dl>
      <dt>
        <a href="/en-US/docs/Web/Apps/Introduction_to_open_web_apps" title="/en-US/docs/Web/Apps/Introduction_to_open_web_apps">Introduction to open web apps</a></dt>
      <dd>
        A high-level introduction to the main subtopics of Open Web Apps; a good place to start.</dd>
      <dt>
        <a href="/en-US/docs/Open_Web_apps_and_Web_standards" title="/en-US/docs/Open_Web_apps_and_Web_standards">Open Web Apps and Web standards</a></dt>
      <dd>
        High-level view of the intentions behind Open Web Apps.</dd>
      <dt>
        <a href="/en-US/docs/Web/Apps/For_Web_developers">App development for Web developers</a></dt>
      <dd>
        Tips for new Web app developers interested in converting their Web sites into Web apps.</dd>
      <dt>
        <a href="/en-US/docs/Web/Apps/For_mobile_developers">App development for mobile application developers</a></dt>
      <dd>
        Suggestions for developers of apps for other mobile platforms who would like to start building Open Web Apps.</dd>
      <dt>
        <a href="/en-US/docs/Web/Apps/Getting_Started">Getting started with app development</a></dt>
      <dd>
        An introduction to Web app development.</dd>
      <dt>
        <a href="https://marketplace.firefox.com/developers/docs/quick_start">Firefox OS app development quickstart</a></dt>
      <dd>
        An quick guide to get you building Firefox OS apps in no time.</dd>
      <dt>
        <a href="/en-US/docs/Web/Apps/Planning_your_app" title="/en-US/docs/Web/Apps/Planning_your_app">Planning your app</a></dt>
      <dd>
        Start by planning your app — think about its purpose, target audience, and technologies needed. Sketch out its basic views and the paths between them. Think about a testing plan.</dd>
      <dt>
        <a href="/en-US/docs/Web/Apps/Basics">Web app basics</a></dt>
      <dd>
        Guides and references to help you create your app and make it install and run on devices.</dd>
      <dt>
        <a href="/en-US/docs/Web/Apps/app_layout" title="/en-US/docs/Web/Apps/app_layout">App Layout</a></dt>
      <dd>
        All the guides and tutorials you could need to get ahead on effective layouts for responsive Open Web Apps.</dd>
      <dt>
        <a href="/en-US/docs/Web/Apps/Design">Designing your Web app</a></dt>
      <dd>
        Information regarding app and interface design practices.</dd>
      <dt>
        <a href="/en-US/docs/Web/Apps/Developing">Developing your Web app</a></dt>
      <dd>
        How do build an app that does X? This section contains documentation about core app technologies, including the DOM, HTML5 and device APIs (WebAPIs).</dd>
      <dt>
        <a href="/en-US/docs/Web/Apps/Publishing">Publishing your app</a></dt>
      <dd>
        Guides to effectively publishing your app on the Firefox Marketplace, including documentation about taking advantage of features such as in-app payments.</dd>
      <dt>
        <a href="/en-US/docs/Web/Apps/FAQs">Frequently asked questions</a></dt>
      <dd>
        Questions that are often asked about Open Web Apps and the Firefox Marketplace. Find your answers here.</dd>
    </dl>
    <p><span class="alllinks"><a href="/en-US/docs/tag/Apps">View All...</a></span></p>
  
  </div>
  <div class="section">
    <p>{{AppsLandingRightSide()}}</p>
  </div>
</div>
<p>&nbsp;</p>
Revert to this revision