FAQs about apps

  • Revision slug: Web/Apps/FAQs/About_apps
  • Revision title: FAQs about apps
  • Revision id: 440413
  • Created:
  • Creator: Yoshino
  • Is current revision? Yes
  • Comment format

Revision Content

What is an Open Web App, technically?

An Open Web App is much more than an HTML application. Think of Open Web Apps (OWA) as Web-standards-built applications or "Web runtime" applications.

A Web runtime application runs outside a normal browser and can be launched from the desktop (or device equivalent) on any of the popular internet-connected devices. Of course, Web runtime applications can be run inside the browser too if the user prefers.

Although HTML5 is an evolution of the HTML syntax specification, in practice it is a wave of new or enhanced technologies.

For an Open Web App, you can use:

  • HTML5 as the declarative syntax to define the structure of the application's user interface.
  • CSS3 as the declarative syntax to define layout, visual aesthetics and portions of the UI behavior. Using CSS3, you can custom-tailor the visual experience to any device that needs a specific presentation without having to re-implement structure or programmatic logic.
  • JavaScript as the imperative syntax to implement logic to be executed on the client device.
  • New technologies that are part of the HTML5 wave if not the HTML5 markup specification such as AppCache, WebStorage, WebSockets, WebWorkers, Server-Sent Events, Crypto API, etc.

When appropriate, you can augment Web runtime applications with server-side logic, for use when the user's device is in a connected state. Though Web runtime applications can run whether or not they can connect to the worldwide Web, you can offer an enhanced experience when connected. You can choose any server-side platform and technology that you like, since the application and the server communicate over HTTP/S using standard mechanisms such as JSON and XML.

Portability

Open Web Apps are called open because they should work on any Web platform, be it Firefox, Chrome, whatever on any device be it a desktop computer, laptop, phone, whatever. So theoretically when you develop an OWA it will run everywhere. Practically, since some vendors aren't all aiming in the standardizing direction, making an OWA run from one web platform to the other may require some adaptation work that should diminish as time goes by.

I've already built a Web application. How do I make it into an installable app?

{{ page("/en-US/docs/Web/Apps/For_Web_developers", "Minimum requirements") }}

In practice, there is usually a great deal more that needs to be done. For more information, see App development for Web developers.

What is the difference between an app and a website?

An app can:

  • Run outside a normal browser
  • Run whether the device is connected to the Internet or not
  • Be launched in the same way a native device application is launched

At a minimum, an app is a website that can be "installed" on a mobile device or computer so that it looks to a user like a native application. You can distribute it either on your own website or through an app store. Both can be built using open Web standards such as HTML5. You can control access to a Web app, so that only paid users can access it.

A site that is an app should be designed to work when the device is not on the Internet, or at least to fail gracefully. Building HTML5 Web runtime applications (as opposed to building sites that will always be visited from the Internet in a browser) requires some architectural additions to handle staes like "sometimes connected," etc.

Building HTML5 sites (instead of apps) tends to focus on implementing page structure using the new HTML5 semantics.

Note that HTML5 apps versus sites is not an either-or proposition. You can build HTML5 "applications" that can run either inside a browser or outside it, and you can design them to provide an enhanced user experience when the user's device is connected to the Internet.

See also:

Should I build a website or an app?

Of course, it depends on your goals. In both cases, you can deliver your site on multiple device platforms by using the standard "Web stack" of technologies (HTML/CSS/JavaScript). However, an advantage of a Web app is that it looks like a native application to users — they can launch it from their home screen or desktop, without having to find a bookmark or remember a URL. This means they are more likely to use it and keep returning to it than a website.

What is the difference between an app and an add-on?

Add-ons (such as built with JetPack) are extensions to your Firefox browser. Add-ons provide little or no UI component at all, and only extend the capabilities/behavior of the browser in specific ways. For example add-ons can provide new buttons to the UI (for example by adding a button near the address bar to block ads, or new menu items to change some options), or change internal functions (for example by improving your privacy through the processing of the Web browser in-and-out net traffic).

Apps (theoretically) run in any modern Web browser (both on desktop as well as mobile) and are not browser specific. Apps are complete applications such as office applications, productivity applications, image processing applications, games, etc.

Finally, add-ons are usually in effect across all websites (for example ads can be blocked on all websites, network privacy improved while visiting all websites), even if some add-ons are designed to interact with specific web sites/services. Apps on the other side don’t combine with other apps in this way; they run standalone, like any regular website.

Comparison

Add-on:

  • is browser specific
  • extends the browser default capabilities
  • is effective on all visited web sites
  • can be active in the browser with unlimited other add-ons

Open Web App:

  • is web platform neutral (theoretically)
  • is tied to a specific business case or use case
  • runs outside of a normal browser, is "a kind of website" by itself
  • is only one web app at the time (obviously)
  • might install a link/icon in the menus/desktop of the host system to get started

What tools should I use to build Open Web Apps?

Use the same tool set you would choose for Web development on your platform of choice. Most "current" editors and IDEs for Web development support HTML5 syntax.

Can my app access device-level APIs?

Yes, depending on a few factors. See App permissions for more information. The Mozilla WebAPI project is working on expanding the number of WebAPIs.

Hows does an Open Web App work across platforms? Form factors?

Unlike proprietary languages or runtimes, HTML, CSS and JavaScript have already been implemented on all popular modern devices where customers want to use applications.

There are, however, unavoidable differences in form factor between disparate devices. A carefully designed and well developed application can implement one set of HTML and JavaScript for an application and then form-factor specific CSS files to adapt layout and other aesthetic attributes as desired.

If you wish to provide the richest possible experience, you can also write code to detect the presence of "optional devices" like a camera, and leverage them as appropriate for the application.

How can my app detect that it is in the Web runtime?

There are a few ways you can check this:

Revision Source

<h2 id="What_is_an_Open_Web_App.2C_technically.3F">What is an Open Web App, technically?</h2>
<p>An Open Web App is much more than an HTML application. Think of Open Web Apps (OWA) as Web-standards-built applications or "Web runtime" applications.</p>
<p>A Web runtime application runs outside a normal browser and can be launched from the desktop (or device equivalent) on any of the popular internet-connected devices. Of course, Web runtime applications can be run inside the browser too if the user prefers.</p>
<p>Although HTML5 is an evolution of the HTML syntax specification, in practice it is a wave of new or enhanced technologies.</p>
<p>For an Open Web App, you can use:</p>
<ul>
  <li><a href="/en-US/docs/Web/Guide/HTML/HTML5"><strong>HTML5</strong></a> as the declarative syntax to define the structure of the application's user interface.</li>
  <li><a href="/en-US/docs/Web/CSS/CSS3"><strong>CSS3</strong></a> as the declarative syntax to define layout, visual aesthetics and portions of the UI behavior. Using CSS3, you can custom-tailor the visual experience to any device that needs a specific presentation without having to re-implement structure or programmatic logic.</li>
  <li><a href="/en-US/docs/JavaScript"><strong>JavaScript</strong></a> as the imperative syntax to implement logic to be executed on the client device.</li>
  <li>New technologies that are part of the HTML5 wave if not the HTML5 markup specification such as <a href="/en-US/docs/HTML/Using_the_application_cache">AppCache</a>, <a href="/en-US/docs/Storage">WebStorage</a>, <a href="/en-US/docs/WebSockets">WebSockets</a>, <a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">WebWorkers</a>, <a href="/en-US/docs/Server-sent_events">Server-Sent Events</a>, <a href="/en-US/docs/Web/API/window.crypto">Crypto API,</a> etc.</li>
</ul>
<p>When appropriate, you can augment Web runtime applications with server-side logic, for use when the user's device is in a connected state. Though Web runtime applications can run whether or not they can connect to the worldwide Web, you can offer an enhanced experience when connected. You can choose any server-side platform and technology that you like, since the application and the server communicate over <a href="/en-US/docs/HTTP">HTTP/S</a> using standard mechanisms such as <a href="/en-US/docs/JSON">JSON</a> and <a href="/en-US/docs/XML">XML</a>.</p>
<h2 id="Portability">Portability</h2>
<p>Open Web Apps are called <em>open</em> because they should work on any Web platform, be it Firefox, Chrome, whatever on any device be it a desktop computer, laptop, phone, whatever. So theoretically when you develop an OWA it will run everywhere. Practically, since some vendors aren't all aiming in the standardizing direction, making an OWA run from one web platform to the other may require some adaptation work that should diminish as time goes by.</p>
<h2 id="I've_already_built_a_Web_application._How_do_I_make_it_into_an_installable_app.3F">I've already built a Web application. How do I make it into an installable app?</h2>
<p>{{ page("/en-US/docs/Web/Apps/For_Web_developers", "Minimum requirements") }}</p>
<p>In practice, there is usually a great deal more that needs to be done. For more information, see <a href="/en-US/docs/Web/Apps/For_Web_developers">App development for Web developers</a>.</p>
<h2 id="What_is_the_difference_between_an_app_and_a_website.3F">What is the difference between an app and a website?</h2>
<p>An app can:</p>
<ul>
  <li>Run outside a normal browser</li>
  <li>Run whether the device is connected to the Internet or not</li>
  <li>Be launched in the same way a native device application is launched</li>
</ul>
<p>At a minimum, an app is a website that can be "installed" on a mobile device or computer so that it looks to a user like a native application. You can distribute it either on your own website or through an app store. Both can be built using open Web standards such as HTML5. You can control access to a Web app, so that only paid users can access it.</p>
<p>A site that is an app should be designed to work when the device is not on the Internet, or at least to fail gracefully. Building HTML5 Web runtime applications (as opposed to building sites that will always be visited from the Internet in a browser) requires some architectural additions to handle staes like "sometimes connected," etc.</p>
<p>Building HTML5 sites (instead of apps) tends to focus on implementing page structure using the new HTML5 semantics.</p>
<p>Note that HTML5 apps versus sites is not an either-or proposition. You can build HTML5 "applications" that can run either inside a browser or outside it, and you can design them to provide an enhanced user experience when the user's device is connected to the Internet.</p>
<p>See also:</p>
<ul>
  <li><a href="/en-US/docs/Web/Apps/Offline_apps">Using apps offline</a></li>
  <li><a class="external" href="http://www.misfitgeek.com/2011/11/html5-app-versus-html5-page/">HTML5 App Vs. HTML5 Page — What's the Difference?</a></li>
</ul>
<h2 id="Should_I_build_a_website_or_an_app.3F">Should I build a website or an app?</h2>
<p>Of course, it depends on your goals. In both cases, you can deliver your site on multiple device platforms by using the standard "Web stack" of technologies (HTML/CSS/JavaScript). However, an advantage of a Web app is that it looks like a native application to users — they can launch it from their home screen or desktop, without having to find a bookmark or remember a URL. This means they are more likely to use it and keep returning to it than a website.</p>
<h2 id="What_is_the_difference_between_an_app_and_an_add-on.3F">What is the difference between an app and an add-on?</h2>
<p>Add-ons (such as built with <a href="/en-US/docs/Jetpack">JetPack</a>) are extensions to your Firefox browser. Add-ons provide little or no UI component at all, and only extend the capabilities/behavior of the browser in specific ways. For example add-ons can provide new buttons to the UI (for example by adding a button near the address bar to block ads, or new menu items to change some options), or change internal functions (for example by improving your privacy through the processing of the Web browser in-and-out net traffic).</p>
<p>Apps (theoretically) run in any modern Web browser (both on desktop as well as mobile) and are not browser specific. Apps are complete applications such as office applications, productivity applications, image processing applications, games, etc.</p>
<p>Finally, add-ons are usually in effect across all websites (for example ads can be blocked on all websites, network privacy improved while visiting all websites), even if some add-ons are designed to interact with specific web sites/services. Apps on the other side don’t combine with other apps in this way; they run standalone, like any regular website.</p>
<h3 id="Comparison">Comparison</h3>
<p>Add-on:</p>
<ul>
  <li>is browser specific</li>
  <li>extends the browser default capabilities</li>
  <li>is effective on all visited web sites</li>
  <li>can be active in the browser with unlimited other add-ons</li>
</ul>
<p>Open Web App:</p>
<ul>
  <li>is web platform neutral (theoretically)</li>
  <li>is tied to a specific business case or use case</li>
  <li>runs outside of a normal browser, is "a kind of website" by itself</li>
  <li>is only one web app at the time (obviously)</li>
  <li>might install a link/icon in the menus/desktop of the host system to get started</li>
</ul>
<h2 id="What_tools_should_I_use_to_build_Open_Web_Apps.3F">What tools should I use to build Open Web Apps?</h2>
<p>Use the same tool set you would choose for Web development on your platform of choice. Most "current" editors and IDEs for Web development support HTML5 syntax.</p>
<h2 id="Can_my_app_access_device-level_APIs.3F">Can my app access device-level APIs?</h2>
<p>Yes, depending on a few factors. See <a href="/en-US/docs/Web/Apps/App_permissions">App permissions</a> for more information. The <a href="/en-US/docs/WebAPI">Mozilla WebAPI project</a> is working on expanding the number of WebAPIs.</p>
<h2 id="Hows_does_an_Open_Web_App_work_across_platforms.3F_Form_factors.3F">Hows does an Open Web App work across platforms? Form factors?</h2>
<p>Unlike proprietary languages or runtimes, HTML, CSS and JavaScript have already been implemented on all popular modern devices where customers want to use applications.</p>
<p>There are, however, unavoidable differences in form factor between disparate devices. A carefully designed and well developed application can implement one set of HTML and JavaScript for an application and then form-factor specific CSS files to adapt layout and other aesthetic attributes as desired.</p>
<p>If you wish to provide the richest possible experience, you can also write code to detect the presence of "optional devices" like a camera, and leverage them as appropriate for the application.</p>
<h2 id="How_can_my_app_detect_that_it_is_in_the_Web_runtime.3F">How can my app detect that it is in the Web runtime?</h2>
<p>There are a few ways you can check this:</p>
<ul>
  <li>Use the <a href="/en-US/docs/Web/API/Apps.checkInstalled"><code>navigator.mozApps.checkInstalled()</code></a> function.</li>
  <li>Use the <a href="/en-US/docs/Web/API/Apps.getSelf"><code>navigator.mozApps.getSelf()</code></a> function.</li>
  <li>Use <code>window.locationbar.visible</code>. See <a href="/en-US/docs/Web/Apps/Tutorials/General/App_code#Navigation">Navigation</a>.</li>
  <li>To detect if the app is running in Firefox OS, you can use code like this:<br />
    <a href="https://github.com/mozilla/zamboni/blob/master/media/js/mkt/capabilities.js#L64">https://github.com/mozilla/zamboni/blob/master/media/js/mkt/capabilities.js#L64</a></li>
</ul>
Revert to this revision