App Center

  • Revision slug: Web/Apps
  • Revision title: Open Web Apps
  • Revision id: 444193
  • Created:
  • Creator: MarkGiffin
  • 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 feature additional metadata that allows the User Agent to discover, install, launch, and grant them additional privileges.

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.

 

Advantages of Open Web Apps

  • Local installation and offline storage: Open Web Apps can be installed on the device, and leverage APIs such as local storage and IndexedDB to provide local data storage capabilities. In addition, open Web technologies tend to have a much smaller footprint than native apps and can be updated atomically rather than having to install a complete new package each time there's an update. Such apps are therefore less dependent on an always-on Web connection, and more useful when networks are patchy.
  • Hardware access: The metadata provided with Open Web Apps can be used to grant the application permission to privileged APIs that enable usage of device hardware features, something the Web platform has not traditionally enjoyed.
  • Breaking the walled gardens: The norm for mobile platforms tends to be be walled gardens written with proprietary technologies, so apps are locked inside their platforms. And smartphones tend to be expensive, and require credit cards for app purchases. Open Web Apps tend to be able to run on much cheaper hardware, especially in the case of Firefox OS devices where you've literally just got Firefox running on top of a lightweight Linux kernel. And they are written using open Web technologies, which is the most distributed platform around. In addition, Firefox OS devices feature payment systems where you can simply prepay for apps, or add the cost to your phone bill.
  • Open Web App stores: Following from the previous point, you can choose to host your apps in an existing marketplace (such as the Firefox Marketplace), or host them somewhere else entirely. It's up to you. Mozilla aims to put the developer back in control of every aspect of the app experience — from easy development to distribution to direct customer relationship management. And the apps can be searched for just like any other Web-based experience.

Platforms supporting Open Web Apps

Firefox OS is Mozilla's exciting new Open Web App platform, which aims to deliver a smartphone experience to low cost handsets, and show how a mobile platform could be done in openness. But it doesn't stop there. Mozilla is offering Open Web App features like privileged APIs and manifests for standardization, and planning to roll out support for installing Open Web Apps on other platforms, like Firefox for desktop, Firefox for Android, and even other browsers.

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.
Web app basics
Guides and references to help you create your app and make it install and run on devices.
Designing your Web app
Information regarding app and interface design practices.
Developing your Web app
Documentation about core app technologies, including the DOM 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.
Advanced topics
An assortment of advanced technical articles about how apps are installed, differences in functionality across platforms, and more.
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 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 feature additional metadata that allows the User Agent to discover, install, launch, and grant them additional privileges.</p>
<p>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/graphics_and_ux">
        <i class="icon-picture icon-large">
        </i>
        Graphics<br />
        and UX
        <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 id="Advantages_of_Open_Web_Apps">Advantages of Open Web Apps</h2>
    <ul>
      <li><strong>Local installation and offline storage</strong>: Open Web Apps can be installed on the device, and leverage APIs such as <a href="/en-US/docs/Web/Guide/DOM/Storage" title="/en-US/docs/Web/Guide/DOM/Storage">local storage</a> and <a href="/en-US/docs/IndexedDB" title="/en-US/docs/IndexedDB">IndexedDB</a> to provide local data storage capabilities. In addition, open Web technologies tend to have a much smaller footprint than native apps and can be updated atomically rather than having to install a complete new package each time there's an update. Such apps are therefore less dependent on an always-on Web connection, and more useful when networks are patchy.</li>
      <li><strong>Hardware access</strong>: The metadata provided with Open Web Apps can be used to grant the application permission to privileged APIs that enable usage of device hardware features, something the Web platform has not traditionally enjoyed.</li>
      <li><strong>Breaking the walled gardens</strong>: The norm for mobile platforms tends to be be walled gardens written with proprietary technologies, so apps are locked inside their platforms. And smartphones tend to be expensive, and require credit cards for app purchases. Open Web Apps tend to be able to run on much cheaper hardware, especially in the case of Firefox OS devices where you've literally just got Firefox running on top of a lightweight Linux kernel. And they are written using open Web technologies, which is the most distributed platform around. In addition, Firefox OS devices feature payment systems where you can simply prepay for apps, or add the cost to your phone bill.</li>
      <li><strong>Open Web App stores</strong>: Following from the previous point, you can choose to host your apps in an existing marketplace (such as the <a href="https://marketplace.firefox.com/" title="https://marketplace.firefox.com/">Firefox Marketplace</a>), or host them somewhere else entirely. It's up to you. Mozilla aims to put the developer back in control of every aspect of the app experience — from easy development to distribution to direct customer relationship management. And the apps can be searched for just like any other Web-based experience.</li>
    </ul>
    <h2 id="Platforms_supporting_Open_Web_Apps">Platforms supporting Open Web Apps</h2>
    <p><a href="/en-US/docs/Mozilla/Firefox_OS" title="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a> is Mozilla's exciting new Open Web App platform, which aims to deliver a smartphone experience to low cost handsets, and show how a mobile platform could be done in openness. But it doesn't stop there. Mozilla is offering Open Web App features like privileged APIs and manifests for standardization, and planning to roll out support for installing Open Web Apps on other platforms, like Firefox for desktop, Firefox for Android, and even other browsers.</p>
  </div>
  <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/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/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>
        Documentation about core app technologies, including the DOM 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/Advanced_topics">Advanced topics</a></dt>
      <dd>
        An assortment of advanced technical articles about how apps are installed, differences in functionality across platforms, and more.</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>
    <p>{{AppsLandingRightSide()}}</p>
  </div>
</div>
<p>&nbsp;</p>
Revert to this revision