mozilla
Your Search Results

    sandbox

    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,