mozilla

Revision 488329 of Developing app functionality

  • Revision slug: Web/Apps/Quickstart/Build/Developing_app_functionality
  • Revision title: Developing app functionality
  • Revision id: 488329
  • Created:
  • Creator: easyMaxi
  • Is current revision? No
  • Comment Typo

Revision Content

We have already looked at developing web apps — in Your first app we reviewed the basic code steps required to make an app installable, talked about different open web app types, and said a few words about Web APIs and permissions required to use certain device APIs. Read it first if you've not already done so. In this article we talk about the types of functionality you might want to implement in a bit more detail.

Open web technologies

Open web apps are no different to normal web sites/pages in terms of how you code functionality. They run on regular open web technologies, all of which you can find detailed documentation for on this site, for example:

There are a few differences here and there. A manifest.webapp file is required to define app information such as permissions, locales, icons, etc., and there are a variety of special APIs available to allow you to implement install functionality, charge money for your apps, and access device features such as contacts, battery status and device storage. Note that some of the APIs we've implemented are not yet W3C standards, but we are aiming to standardize them as soon as we can.

You can find a list of APIs and required permissions at App permissions, and a more general index of all API interfaces.

App center development pages

MDN contains a whole wealth of guides and reference docs to teach you about just about any front end web technology you want to use. However, in addition to all the other information we have included some special development pages in the app center. First of all we have several reference apps, including developer walkthroughs, source code and other information. You can feel free to download, install, play with and modify them, with the aim of learning by experimentation.

Next, we have a variety of development topic pages, which aim to cover practical uses of web APIs and other technologies, used together to perform tasks and solve different catgories of problems. These are at an early stage now, but keep checking back, as we will be adding to these regularly.

Gather and modify data
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. This section looks at topics such as Geolocation, exchanging data from files and phone contacts, battery information, device orientation and light sensors, and grabbing pictures from the camera.
Control the display
This part of the docs contains tutorials covering mechanisms you can use to control the display of data to the user. Obvious topics are full screen, orientation and pointer lock, but this also includes creating phone notifications and controlling vibration.
Work offline
When using apps, it is a great advantage to be able to continue using them when a network connection isn't available, especially on portable devices like laptops and mobile phones. This section looks in detail at making apps work offline using mechanisms such as appCache, localStorage, and IndexedDB.
Manipulate media
A lot of modern web usage includes the consumption and manipulation of media, such as images and video. This part of our docs looks at video, audio, and images, and how to do interesting things with them inside Open Web Apps.
Play games
Special considerations for game app developers, above and beyond the basics of Web app development.
Utilize User services
Here we look at APIs designed to facilitate common user services, such as taking payments and login functionality.
Other Utilities
The last section is somewhat of a catch-all section for utility functionality, optimizations, or other enhancements. Examples include drag and drop, touch events, performance optimizations, web workers, and web sockets.
App permissions
Access to device APIs is key to creating many useful apps. Here is what's available and how to access them.

Revision Source

<p>We have already looked at developing web apps — in <a href="/en-US/docs/Web/Apps/Quickstart/Build/Your_first_app">Your first app</a> we reviewed the basic code steps required to make an app installable, talked about different open web app types, and said a few words about Web APIs and permissions required to use certain device APIs. Read it first if you've not already done so. In this article we talk about the types of functionality you might want to implement in a bit more detail.</p>
<h2 id="Open_web_technologies">Open web technologies</h2>
<p>Open web apps are no different to normal web sites/pages in terms of how you code functionality. They run on regular open web technologies, all of which you can find detailed documentation for on this site, for example:</p>
<ul>
 <li><a href="/en-US/docs/Web/Guide/HTML/HTML5">HTML5</a></li>
 <li><a href="/en-US/docs/Web/CSS">CSS</a></li>
 <li><a href="/en-US/docs/JavaScript">JavaScript</a></li>
 <li><a href="/en-US/docs/HTML/Canvas">Canvas</a></li>
 <li><a href="/en-US/docs/AJAX">Ajax</a></li>
 <li><a href="/en-US/docs/HTML/Using_the_application_cache">Offline resources in Firefox</a></li>
 <li><a href="/en-US/docs/Web/Guide/DOM/Storage">DOM Storage</a></li>
 <li><a href="/en-US/docs/IndexedDB">IndexedDB</a></li>
 <li><a href="/en-US/docs/DragDrop/Drag_and_Drop">Drag and drop</a></li>
</ul>
<p>There are a few differences here and there. A <a href="/en-US/docs/Web/Apps/Manifest"><code>manifest.webapp</code></a> file is required to define app information such as permissions, locales, icons, etc., and there are a variety of special APIs available to allow you to implement <a href="/en-US/docs/Web/API/Apps.installPackage">install</a> functionality, <a href="/en-US/docs/Web/Apps/Quickstart/Build/Payments">charge money for your apps</a>, and access device features such as <a href="/en-US/docs/WebAPI/Contacts">contacts</a>, <a href="/en-US/docs/WebAPI/Battery_Status">battery status</a> and <a href="/en-US/docs/WebAPI/Device_Storage">device storage</a>. Note that some of the APIs we've implemented are not yet W3C standards, but we are aiming to standardize them as soon as we can.</p>
<p>You can find a list of APIs and required permissions at <a href="/en-US/docs/Web/Apps/App_permissions">App permissions</a>, and a more general <a href="/en-US/docs/Web/API">index of all API interfaces</a>.</p>
<h2 id="App_center_development_pages">App center development pages</h2>
<p>MDN contains a whole wealth of guides and reference docs to teach you about just about any front end web technology you want to use. However, in addition to all the other information we have included some special development pages in the app center. First of all we have several <a href="/en-US/docs/Web/Apps/Reference_apps">reference apps</a>, including developer walkthroughs, source code and other information. You can feel free to download, install, play with and modify them, with the aim of learning by experimentation.</p>
<p>Next, we have a variety of <a href="/en-US/docs/Web/Apps/Developing">development topic pages</a>, which aim to cover practical uses of web APIs and other technologies, used together to perform tasks and solve different catgories of problems. These are at an early stage now, but keep checking back, as we will be adding to these regularly.</p>
<dl dir="ltr">
 <dt>
  <a href="/en-US/docs/Web/Apps/Developing/gather_and_modify_data" title="/en-US/docs/Web/Apps/Developing/gather_and_modify_data">Gather an<span id="cke_bm_274C" style="display: none;">&nbsp;</span>d modify data</a></dt>
 <dd>
  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. This section looks at topics such as Geolocation, exchanging data from files and phone contacts, battery information, device orientation and light sensors, and grabbing pictures from the camera.</dd>
 <dt>
  <a href="/en-US/docs/Web/Apps/Developing/Control_the_display" title="/en-US/docs/Web/Apps/Developing/Control_the_display">Control the display</a></dt>
 <dd>
  This part of the docs contains tutorials covering mechanisms you can use to control the display of data to the user. Obvious topics are full screen, orientation and pointer lock, but this also includes creating phone notifications and controlling vibration.</dd>
 <dt>
  <span id="cke_bm_296C" style="display: none;">&nbsp;</span><a href="/en-US/docs/Web/Apps/Developing/offline" title="/en-US/docs/Web/Apps/Developing/offline">Work offline</a></dt>
 <dd>
  When using apps, it is a great advantage to be able to continue using them when a network connection isn't available, especially on portable devices like laptops and mobile phones. This section looks in detail at making apps work offline using mechanisms such as appCache, localStorage, and IndexedDB.</dd>
 <dt>
  <a href="/en-US/docs/Web/Apps/Developing/Manipulating_media" title="/en-US/docs/Web/Apps/Developing/Manipulating_media">Manipulate media</a></dt>
 <dd>
  A lot of modern web usage includes the consumption and manipulation of media, such as images and video. This part of our docs looks at video, audio, and images, and how to do interesting things with them inside Open Web Apps.</dd>
 <dt>
  <a href="/en-US/docs/Web/Apps/Developing/Games">Play games</a></dt>
 <dd>
  Special considerations for game app developers, above and beyond the basics of Web app development.</dd>
 <dt>
  <a href="/en-US/docs/Web/Apps/Developing/User_services" title="/en-US/docs/Web/Apps/Developing/User_services">Utilize User services</a></dt>
 <dd>
  Here we look at APIs designed to facilitate common user services, such as taking payments and login functionality.</dd>
 <dt>
  <a href="/en-US/docs/Web/Apps/Developing/Utilities" title="/en-US/docs/Web/Apps/Developing/Utilities">Other Utilities</a></dt>
 <dd>
  The last section is somewhat of a catch-all section for utility functionality, optimizations, or other enhancements. Examples include drag and drop, touch events, performance optimizations, web workers, and web sockets.</dd>
 <dt>
  <a href="/en-US/docs/Web/Apps/App_permissions">App permissions</a></dt>
 <dd>
  Access to device APIs is key to creating many useful apps. Here is what's available and how to access them.</dd>
</dl>
Revert to this revision