mozilla

Revision 430397 of Writing a web app for Firefox OS

  • Revision slug: Mozilla/Firefox_OS/Apps/Writing_a_web_app_for_Firefox_OS
  • Revision title: Web apps maken voor Firefox OS
  • Revision id: 430397
  • Created:
  • Creator: Marco78
  • Is current revision? No
  • Comment

Revision Content

Firefox OS apps zijn Web apps geschreven met HTML, CSS, en JavaScript. Je publiceert ze op het Web zoals je met elke Website zou doen.

In plaats van de Website instabiel te maken, net als een Web app op het toestel, moet je hem nu een beetje bijwerken en van een installatieknop voorzien, zoals hier beneden staat uitgelegd.

De volgende punten zijn startpunten:

Natuurlijk, voel je vrij 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:

<button id="install">
  Install this awesome app on your homescreen!
</button>
 
<script>
(function(){
  function install(ev) {
    ev.preventDefault();
    // define the manifest URL
    var manifest_url = "http://my.webapp.com/manifest.webapp";
    // install the app
    var myapp = navigator.mozApps.install(manifest_url);
    myapp.onsuccess = function(data) {
      // App is installed, remove button
      this.parentNode.removeChild(this);
    };
    myapp.onerror = function() {
      // App wasn't installed, info is in this.error.name
      console.log('Install failed, error: ' + this.error.name);
     };
  };
  // get a reference to the button and call install() on click
  var button = document.getElementById('install');
  button.addEventListener('click', install, false);
})();
</script>

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 Firefox OS browser app and tap the install button.

Revision Source

<p>Firefox OS apps zijn Web apps geschreven met HTML, CSS, en JavaScript. Je publiceert ze op het Web zoals je met elke Website zou doen.</p>
<p>In plaats van de Website instabiel te maken, net als een Web app op het toestel, moet je hem nu een beetje bijwerken en van een installatieknop voorzien, zoals hier beneden staat uitgelegd.</p>
<p>De volgende punten zijn startpunten:</p>
<ul>
  <li><a href="/en-US/docs/Web/Apps/Getting_Started">Getting started with making apps</a></li>
  <li><a href="/en-US/docs/Web/Apps/Manifest">App manifest</a></li>
</ul>
<p>Natuurlijk, voel je vrij <a href="/en-US/docs/Web/Appshttps://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Apps/Writing_a_web_app_for_Firefox_OS$edit">dive even further into Open Web Apps</a><a href="/en-US/docs/" title="/en-US/docs/">!</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/Web/API/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;button id="install"&gt;
&nbsp; Install this awesome app on your homescreen!
&lt;/button&gt;
&nbsp;
&lt;script&gt;
(function(){
&nbsp; function install(ev) {
&nbsp;&nbsp;&nbsp; ev.preventDefault();
&nbsp;&nbsp;&nbsp; // define the manifest URL
&nbsp;&nbsp;&nbsp; var manifest_url = "http://my.webapp.com/manifest.webapp";
&nbsp;&nbsp;&nbsp; // install the app
&nbsp;&nbsp;&nbsp; var myapp = navigator.mozApps.install(manifest_url);
&nbsp;&nbsp;&nbsp; myapp.onsuccess = function(data) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // App is installed, remove button
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; this.parentNode.removeChild(this);
&nbsp;&nbsp;&nbsp; };
&nbsp;&nbsp;&nbsp; myapp.onerror = function() {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // App wasn't installed, info is in this.error.name
      console.log('Install failed, error: ' + this.error.name);
&nbsp;&nbsp;&nbsp;&nbsp; };
&nbsp; };
&nbsp; // get a reference to the button and call install() on click
&nbsp; var button = document.getElementById('install');
&nbsp; button.addEventListener('click', install, false);
})();
&lt;/script&gt;
</pre>
<p>Note: the Install button could also be in an app market, such as the <a href="/en-US/docs/Web/Apps/Publishing/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 Firefox OS browser app and tap the install button.</p>
Revert to this revision