sandbox

by 1 contributor:
ddd dd dd dd dd
d d d d d
d d d d d
d d d d d
d d d d d

 

 

Dead simple Hello World app

Here are the essential things that are needed to create an app that conforms to the Open Web Apps project, using a very simple example app.

To keep it simple, this app will be self-hosted from a website that you control, not from the Mozilla Marketplace.

 

The app manifest file

The app is described by the following JSON manifest file. Save this in a file named helloworld.webapp.

{
  "version": "1.0",
  "name": "Hello World",
  "description": "Hello World open web app",
  "icons": {
    "16": "/icon-16.png",
    "48": "/icon-48.png",
    "128": "/icon-128.png"
  },
  "developer": {
    "name": "Mozilla Labs",
    "url": "http://mozillalabs.com/"
  },
  "installs_allowed_from": [
    "*"
  ],
  "launch_path": "/",
  "locales": {
  },
  "default_locale": "en"
}

(Manifest will be described here...)

The Hello World HTML file

Here is the HTML code for the app. Put this HTML in a file named helloworld.html.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello World app</title>
    <link rel="stylesheet" href="css/base.css" type="text/css" media="screen">
    <!--[if lte IE 8]>
    <script src="js/html5.js"></script>
    <![endif]-->
  </head>

  <body id="index-page">

    <div id="container">
      <header role="banner">
        <h1>Hello World app</h1>
        <p>Simple open web app</p>
      </header>

      <div role="main">
        <section id="main-content">

          <button id="install-app">Install App</button>

        </section>
      </div>

      <footer id="page-footer" role="contentinfo"></footer>
    </div>

    <script>
      (function () {
        var installApp = document.getElementById("install-app");
        if (installApp) {
          installApp.addEventListener("click", function () {
            var mozApps = navigator.mozApps;
            if (mozApps) {
              navigator.mozApps.install(
              "/helloworld.webapp",
              {},
              function () {
                console.log("Worked!");
                console.log(result);
              },
              function (result) {
                console.log("Failed.");
                console.log(result);
              });
            }
          }, false);
        }
      })();
    </script>
    <script src="https://myapps.mozillalabs.com/jsapi/include.js"></script>
  </body>
</html>

This app has a button you click to install the app.

Hosting the app on your web server

Put the following files on the web server:

  • helloworld.html
  • helloworld.webapp

The web server must serve helloworld.webapp with an HTTP Content-Type header of application/x-web-app-manifest+json. To set your web server to do this, see Properly Configuring Server MIME Types.

Installing the app

To install the app, load helloworld.html in a web browser and click the Install App button. The installation will not work with Internet Explorer 8 or earlier, and (TBD)...

Testing that the app is installed

(TBD)

 

Document Tags and Contributors

Contributors to this page: markg
Last updated by: markg,