Your Search Results


    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": ""
      "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>
        <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>
      <body id="index-page">
        <div id="container">
          <header role="banner">
            <h1>Hello World app</h1>
            <p>Simple open web app</p>
          <div role="main">
            <section id="main-content">
              <button id="install-app">Install App</button>
          <footer id="page-footer" role="contentinfo"></footer>
          (function () {
            var installApp = document.getElementById("install-app");
            if (installApp) {
              installApp.addEventListener("click", function () {
                var mozApps = navigator.mozApps;
                if (mozApps) {
                  function () {
                  function (result) {
              }, false);
        <script src=""></script>

    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



    Document Tags and Contributors

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