We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS


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>
    <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="https://myapps.mozillalabs.com/jsapi/include.js"></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,