mozilla

Revision 7494 of Getting started with app development

  • Revision slug: Apps/Getting_Started
  • Revision title: Getting started with making apps
  • Revision id: 7494
  • Created:
  • Creator: louisremi
  • Is current revision? No
  • Comment manifest extension is .webapp; 4 words added, 4 words removed
Tags: 

Revision Content

Open Web Applications are just websites. They are built using standard web technologies that run in any web browser, and can be developed using your favorite tools.

The Mozilla Labs Open Web Applications project proposes some small additions to existing sites that turn them into applications which run in a rich, fun, and powerful computing environment. These applications run on desktop browsers and mobile devices, and are easier for a user to discover and launch. They have access to a growing set of novel features, such as synchronizing across all of a users' devices.

Describing Your Application

The only thing you have to do to create a web application from a web site is to add an application manifest. This is a JSON file that describes your application, including its name, its icons, and its human-readable description.

The manifest must be hosted from the same domain as your website, and must be served with a Content-Type of application/x-web-app-manifest+json. For full details about the manifest refer to the documentation, and to help get started you can try out the online manifest checker.

Publishing Your Application

A number of vendors, from large companies to startups, are building web application stores that will take care of discovery, reviews, ratings, and billing -- but you're not required to list your application in a store, you can distribute it directly from your site. Just construct a button or link that invokes this JavaScript:

{{ syntax.javascript{code: "function installCallback(result) {\n    // great - display a message, or redirect to a launch page\n}\n\nfunction errorCallback(result) {\n    // whoops - result.code and result.message have details\n}\n\nnavigator.apps.install({\n    url: \"http://path.to/my/example.webapp\",\n    onsuccess: installCallback,\n    onerror: errorCallback\n});"} }}

Invoking navigator.apps.install() will cause the browser to load your manifest and ask the user whether they want to install your application. If they approve the installation, your app will be installed into their browser!

You may optionally provide an install_data attribute to install, to persist some information into the user's installed-applications data store. This information will be synchronized to their other devices, and can be retrieved by your application using the amInstalled() call (see next section). For example:

{{ syntax.javascript{code: "navigator.apps.install({\n    url: \"http://path.to/my/example.webapp\",\n    onsuccess: installCallback,\n    onerror: errorCallback,\n    install_data: {\n        user_id: \"some_user\"\n    }\n});"} }}

Determining Whether Your App Is Installed

When a web browser loads your application page, you should be ready to handle the case that the user doesn't have the application installed. You can check whether the application is installed by calling amInstalled(), like this:

{{ syntax.javascript{code: "function getInstalledCallback(data) {\n    if (data) {\n        // yes, we're installed\n        // data.manifest has the manifest\n        // data.install_time is when it was installed\n        // data.install_origin is the domain that called install\n        // data.install_data has the optional data from install\n    } else {\n        // not installed!\n    }\n}\n\nnavigator.apps.amInstalled(getInstalledCallback);"} }}

Storing Data Locally

The localStorage API provides a key-value store of persistent data that you can use to keep track of user data between visits to your app. In Firefox 4 and other new browsers, you can also use IndexedDB, a structured, high-performance client-side datastore.

If you have data that should be shared between instances of your application across all a user's devices, you should use the install_data option to the install() function, as described above.

Running offline and using advanced device APIs

Modern web browsers have added a lot of great features to let your application run offline or access device capabilities. Here are some useful links:

Revision Source

<p>Open Web Applications are just websites. They are built using standard web technologies that run in any web browser, and can be developed using your favorite tools.</p>
<p>The Mozilla Labs Open Web Applications project proposes some small additions to existing sites that turn them into applications which run in a rich, fun, and powerful computing environment. These applications run on desktop browsers and mobile devices, and are easier for a user to discover and launch. They have access to a growing set of novel features, such as synchronizing across all of a users' devices.</p>
<h3>Describing Your Application</h3>
<p>The only thing you have to do to create a web application from a web site is to add an <em>application manifest</em>. This is a <a class=" external" href="http://json.org">JSON</a> file that describes your application, including its name, its icons, and its human-readable description.</p>
<p>The manifest must be hosted from the same domain as your website, and must be served with a Content-Type of <code>application/x-web-app-manifest+json</code>. For full details about the manifest refer to the <a class=" external" href="/en/OpenWebApps/The_Manifest" title="https://developer.mozilla.org/en/OpenWebApps/The_application_manifest">documentation</a>, and to help get started you can try out the <a class=" external" href="http://appmanifest.org">online manifest checker</a>.</p>
<h3>Publishing Your Application</h3>
<p>A number of vendors, from large companies to startups, are building web application stores that will take care of discovery, reviews, ratings, and billing -- but you're not required to list your application in a store, you can distribute it directly from your site. Just construct a button or link that invokes this JavaScript:</p>
<div>{{ syntax.javascript{code: "function installCallback(result) {\n    // great - display a message, or redirect to a launch page\n}\n\nfunction errorCallback(result) {\n    // whoops - result.code and result.message have details\n}\n\nnavigator.apps.install({\n    url: \"http://path.to/my/example.webapp\",\n    onsuccess: installCallback,\n    onerror: errorCallback\n});"} }}</div>
<p>Invoking <code>navigator.apps.install()</code> will cause the browser to load your manifest and ask the user whether they want to install your application. If they approve the installation, your app will be installed into their browser!</p>
<p>You may optionally provide an <code>install_data</code> attribute to install, to persist some information into the user's installed-applications data store. This information will be synchronized to their other devices, and can be retrieved by your application using the <code>amInstalled()</code> call (see next section). For example:</p>
<p>{{ syntax.javascript{code: "navigator.apps.install({\n    url: \"http://path.to/my/example.webapp\",\n    onsuccess: installCallback,\n    onerror: errorCallback,\n    install_data: {\n        user_id: \"some_user\"\n    }\n});"} }}</p>
<h3>Determining Whether Your App Is Installed</h3>
<p>When a web browser loads your application page, you should be ready to handle the case that the user doesn't have the application installed. You can check whether the application is installed by calling <code>amInstalled()</code>, like this:</p>
<p>{{ syntax.javascript{code: "function getInstalledCallback(data) {\n    if (data) {\n        // yes, we're installed\n        // data.manifest has the manifest\n        // data.install_time is when it was installed\n        // data.install_origin is the domain that called install\n        // data.install_data has the optional data from install\n    } else {\n        // not installed!\n    }\n}\n\nnavigator.apps.amInstalled(getInstalledCallback);"} }}</p>
<h3>Storing Data Locally</h3>
<p>The <a href="/en/DOM/Storage" title="en/DOM/Storage">localStorage</a> API provides a key-value store of persistent data that you can use to keep track of user data between visits to your app. In Firefox 4 and other new browsers, you can also use <a href="/en/IndexedDB" title="en/IndexedDB"> IndexedDB</a>, a structured, high-performance client-side datastore.</p>
<p>If you have data that should be shared between instances of your application across all a user's devices, you should use the <code>install_data</code> option to the <code>install()</code> function, as described above.</p>
<h3>Running offline and using advanced device APIs</h3>
<p>Modern web browsers have added a lot of great features to let your application run offline or access device capabilities. Here are some useful links:</p>
<ul> <li><a href="/en/Offline_resources_in_Firefox" title="en/Offline_resources_in_Firefox">Running offline</a>: details and demos that show how to use the HTML5 AppCache</li> <li><a href="/en/Online_and_offline_events" title="https://developer.mozilla.org/en/Online_and_offline_events">Online and Offline Events</a>: detecting when the device changes between online and offline states</li> <li><a href="/En/Using_audio_and_video_in_Firefox" title="En/Using_audio_and_video_in_Firefox">Using audio and video</a> in your application</li> <li><a href="/en/Drawing_Graphics_with_Canvas" title="en/Drawing_Graphics_with_Canvas">Drawing Graphics with Canvas</a></li> <li><a href="/en/WebGL" title="en/WebGL">Drawing 3D Graphics with WebGL</a></li> <li><a href="/en/HTML/Content_Editable" title="en/HTML/Content_Editable">Using Content-Editable</a> to create full and fast rich-text editors in your app</li> <li><a href="/en/Using_files_from_web_applications" title="en/Using_files_from_web_applications">Using Files from Web Applications</a> with the HTML5 File API</li> <li><a href="/En/DragDrop/Drag_and_Drop" title="En/DragDrop/Drag_and_Drop">Using Drag and Drop</a> to drag items between and within web applications</li> <li><a href="/en/Detecting_device_orientation" title="en/Detecting_device_orientation">Detecting Device Orientation</a></li>
</ul>
Revert to this revision