mozilla

Revision 379757 of Writing a web app for Firefox OS

  • Revision slug: Mozilla/Firefox_OS/Apps/Writing_a_web_app_for_Firefox_OS
  • Revision title: Writing a web app for Firefox OS
  • Revision id: 379757
  • Created:
  • Creator: codepo8
  • Is current revision? No
  • Comment cleanup on inline events, feedback on success of installation
Tags: 

Revision Content

B2G apps are just Web apps written with HTML, CSS, and JavaScript. You publish them on the Web like you would publish any other Web site. In order to make the Web site installable as a Web app on the device, you just have to garnish them with a manifest and hook up an install button as explained below.

The following topics are recommended starting points:

Of course, feel free to dive even further into Open Web Apps!

Installing the Web app

With the app and manifest published on the Web, you need to make Gecko aware of it. At install time, Gecko looks up the manifest and adds the necessary entries to the home screen, etc.

To install an app, call the navigator.mozApps.install API. Here's example for an install button that you could embed in your app when you self-host your app:

<script>
function install(ev) {
  ev.preventDefault();
  // define the manifest URL
  var manifest_url = "http://my.webapp.com/manifest.json";
  // get a reference to the button
  var button = document.getElementById('install');
  // install the app
  var myapp = navigator.mozApps.install(manifest_url);
  myapp.onsuccess = function(data) {
    // App is installed
    // remove the button
    button.parentNode.removeChild(button);
  };
  installapp.onerror = function() {
    // App wasn't installed, info is in 
    // installapp.error.name
   };
};
button.addEventListener('click', install, false);
</script>

<button id="install">
  Install this awesome app on your homescreen!
</button>

Note: the Install button could also be in an app market, such as the Firefox Marketplace, but it's often very handy to have an "Install as web app" button on the main page of your site.

Now visit your web site in the B2G browser app and tap the install button.

Revision Source

<p>B2G apps are just Web apps written with HTML, CSS, and JavaScript. You publish them on the Web like you would publish any other Web site. In order to make the Web site installable as a Web app on the device, you just have to garnish them with a manifest and hook up an install button as explained below.</p>
<p>The following topics are recommended starting points:</p>
<ul>
  <li><a href="/en-US/docs/Apps/Getting_Started">Getting started with making apps</a></li>
  <li><a href="/en-US/docs/Apps/Manifest">App manifest</a></li>
</ul>
<p>Of course, feel free to <a href="/en-US/docs/Apps">dive even further into Open Web Apps</a>!</p>
<h2 id="Installing_the_Web_app">Installing the Web app</h2>
<p>With the app and manifest published on the Web, you need to make Gecko aware of it. At install time, Gecko looks up the manifest and adds the necessary entries to the home screen, etc.</p>
<p>To install an app, call the <a href="/en-US/docs/DOM/Apps.install"><code>navigator.mozApps.install</code> API</a>. Here's example for an install button that you could embed in your app when you self-host your app:</p>
<pre class="brush: html">
&lt;script&gt;
function install(ev) {
  ev.preventDefault();
  // define the manifest URL
  var manifest_url = "http://my.webapp.com/manifest.json";
  // get a reference to the button
  var button = document.getElementById('install');
  // install the app
  var myapp = navigator.mozApps.install(manifest_url);
  myapp.onsuccess = function(data) {
    // App is installed
    // remove the button
    button.parentNode.removeChild(button);
  };
&nbsp; installapp.onerror = function() {
&nbsp;   // App wasn't installed, info is in 
&nbsp;&nbsp;  // installapp.error.name
   };
};
button.addEventListener('click', install, false);
&lt;/script&gt;

&lt;button id="install"&gt;
  Install this awesome app on your homescreen!
&lt;/button&gt;
</pre>
<p>Note: the Install button could also be in an app market, such as the <a href="/en-US/docs/Apps/Submitting_an_app">Firefox Marketplace</a>, but it's often very handy to have an "Install as web app" button on the main page of your site.</p>
<p>Now visit your web site in the B2G browser app and tap the install button.</p>
Revert to this revision