Revision 7528 of Getting started with app development

  • Revision slug: Apps/Getting_Started
  • Revision title: Getting started with making apps
  • Revision id: 7528
  • Created:
  • Creator: TelaSocial
  • Is current revision? No
  • Comment one or more formatting changes
Tags: 

Revision Content

Web apps are apps built using standard Web technologies. They work in any modern Web browser, and can be developed using your favorite tools.  Some characteristics that distinguish Web apps from websites: Apps are installed by a user, they are self-contained and don't always require the chrome of a browser window, and they can be built to run offline. Gmail, Twitter, and Etherpad are Web apps. 

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

Publishing the app

The only thing you have to do to create a Web app from a Web site is to add an app manifest. This is a JSON file that describes your app, 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.

Checking whether the app is installed

When a Web browser loads the app's page, the page needs to handle the case that the user doesn't have the app installed. You can check whether the app is installed by calling amInstalled(), like this:

function installCheck(data) {
    if (data) {
        // yes, we're installed
        // data.manifest has the manifest
        // data.install_time is when it was installed
        // data.install_origin is the domain that called install
        // data.install_data has the optional data from install
    } else {
        // not installed!
    }
}

navigator.mozApps.amInstalled(installCheck);

Installing the app

You can distribute your app directly from your site. Just construct a button or link that invokes this JavaScript:

//expands on the previous example code

function installCallback(result) {
    // great - display a message, or redirect to a launch page
}

function errorCallback(result) {
    // whoops - result.code and result.message have details
}

function installCheck(data) {
    if (data) {
        // ...
    } else {
        navigator.mozApps.install(
            "http:/path.to/my/example.webapp",
            {},
            installCallback,
            errorCallback
        );
    }
}

Invoking navigator.mozApps.install() causes the browser to load the manifest and ask the user whether to install the application. If the user approves the installation, the app is installed into the browser.

The second parameter is an install_data argument to  navigator.mozApps.install(), to persist some information into the user's installed-applications data store. This information can be synchronized to their other devices, and can be retrieved by your application using the amInstalled() call (see Checking whether the app is installed). For example:

navigator.mozApps.install(
    "http://path.to/my/example.webapp",
    {
        user_id: "some_user"
    },
    installCallback,
    errorCallback,
);

Promoting the app

Mozilla is building an app marketplace that take care of discovery, reviews, ratings, and billing, using an open infrastructure that can be used by other third parties to create their own stores. But you're not required to list your app in a store.

The Open Web apps project Developer Preview is an early version of the Mozilla App Marketplace. You can also sign up for the Apps Developer newsletter to get news about the progress of the Mozilla App Marketplace, as well as tips and advice on creating apps.

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:

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. If the user has a modern browser, such as Firefox 4 or later, or Chrome, you can also use IndexedDB, a structured, high-performance client-side datastore.

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

Examples

Some examples of open web apps:

{{ languages( {"fr": "fr/Applications/Pour_commencer"} ) }}

Revision Source

<p>Web apps are apps built using standard Web technologies. They work in any modern Web browser, and can be developed using your favorite tools.  Some characteristics that distinguish Web apps from websites: Apps are installed by a user, they are self-contained and don't always require the chrome of a browser window, and they can be built to run offline. Gmail, Twitter, and Etherpad are Web apps. </p>
<p>The Open Web apps project proposes some small additions to existing sites to turn them into apps that run in a rich, fun, and powerful computing environment. These apps run on desktop browsers and mobile devices, and are easier for a user to discover and launch than Web sites. They have access to a growing set of novel features, such as synchronizing across all of a user's devices.</p>
<h2>Publishing the app</h2>
<p>The only thing you have to do to create a Web app from a Web site is to add an <em>app manifest</em>. This is a <a class="external" href="http://json.org">JSON</a> file that describes your app, 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/Apps/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>
<h2>Checking whether the app is installed</h2>
<p>When a Web browser loads the app's page, the page needs to handle the case that the user doesn't have the app installed. You can check whether the app is installed by calling <a href="/en/Apps/Apps_JavaScript_API/navigator.mozApps.amInstalled" title="navigator.mozApps.amInstalled"><code>amInstalled()</code></a>, like this:</p>
<pre class="brush: js">function installCheck(data) {
    if (data) {
        // yes, we're installed
        // data.manifest has the manifest
        // data.install_time is when it was installed
        // data.install_origin is the domain that called install
        // data.install_data has the optional data from install
    } else {
        // not installed!
    }
}

navigator.mozApps.amInstalled(installCheck);
</pre>
<h2>Installing the app</h2>
<p>You can distribute your app directly from your site. Just construct a button or link that invokes this JavaScript:</p>
<pre class="brush: js">//expands on the previous example code

function installCallback(result) {
    // great - display a message, or redirect to a launch page
}

function errorCallback(result) {
    // whoops - result.code and result.message have details
}

function installCheck(data) {
    if (data) {
        // ...
    } else {
        navigator.mozApps.install(
            "http:/path.to/my/example.webapp",
            {},
            installCallback,
            errorCallback
        );
    }
}
</pre>
<p>Invoking <a href="/en/Apps/Apps_JavaScript_API/navigator.mozApps.install" title="/en/Apps/Apps_JavaScript_API/navigator.mozApps.install"><code>navigator.mozApps.install()</code></a> causes the browser to load the manifest and ask the user whether to install the application. If the user approves the installation, the app is installed into the browser.</p>
<p>The second parameter is an <code>install_data</code> argument to  <code>navigator.mozApps.install()</code>, to persist some information into the user's installed-applications data store. This information can be synchronized to their other devices, and can be retrieved by your application using the <code>amInstalled()</code> call (see <a href="#Checking_whether_the_app_is_installed" title="Determining whether the app is installed">Checking whether the app is installed</a>). For example:</p>
<pre class="brush: js">navigator.mozApps.install(
    "http://path.to/my/example.webapp",
    {
        user_id: "some_user"
    },
    installCallback,
    errorCallback,
);
</pre>
<h2>Promoting the app</h2>
<p>Mozilla is building an app marketplace that take care of discovery, reviews, ratings, and billing, using an open infrastructure that can be used by other third parties to create their own stores. But you're not required to list your app in a store.</p>
<p>The <a class="external" href="http://apps-preview.mozilla.org" title="http://apps-preview.mozilla.org">Open Web apps project Developer Preview</a> is an early version of the Mozilla App Marketplace. You can also <a href="/apps" title="https://developer.mozilla.org/apps">sign up for the Apps Developer newsletter</a> to get news about the progress of the Mozilla App Marketplace, as well as tips and advice on creating apps.</p>
<h2>Running offline and using advanced device APIs</h2>
<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/Using_the_Application_Cache" 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_HTML5_audio_and_video" title="En/Using_audio_and_video_in_Firefox">Using audio and video</a> in your application</li> <li><a href="/en/HTML/Canvas/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>
<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. If the user has a modern browser, such as Firefox 4 or later, or Chrome, 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 app across all devices that a user uses, then you should use the <code>install_data</code> option to the <code>install()</code> function, as described above.</p>
<h2>Examples</h2>
<p>Some examples of open web apps:</p>
<ul> <li><a class="link-https" href="https://github.com/mozilla/openwebapps/tree/develop/examples/mozillaball" title="https://github.com/mozilla/openwebapps/tree/develop/examples/mozillaball">MozillaBall Example</a></li>
</ul>
<p>{{ languages( {"fr": "fr/Applications/Pour_commencer"} ) }}</p>
Revert to this revision