{
  "name": "MyAppName",
  "version": "1.7",
  "launch_path": "/index.html"
  "description": "...",
  "developer": {
    "name": "...",
    "url": "..."
  },
  "locales": {
    "en-US": {
      "name": "...",
      "description": "...",
    },
  },
  "default_locale": "en-US",
  "icons": {
    "128": "/style/icons/Blank.png"
  }
}

      Content-Type: application/x-web-app-manifest+json
      

import SimpleHTTPServer
import SocketServer
­
SimpleHTTPServer.SimpleHTTPRequestHandler. \
  extensions_map['.webapp'] = \
  'application/x-web-app-manifest+json'
­
httpd = SocketServer.TCPServer(("", 3000), \
  SimpleHTTPServer.SimpleHTTPRequestHandler)
­
httpd.serve_forever()

...
"type": "privileged",
"permissions": {
  "contacts": {
    "description": "Required for ...",
    "access": "readcreate"
    },
  "alarms": {
    "description": "Required to ..."
  }
}
...

• desktop browsers web developer tools
• javascript frameworks
• css frameworks
• any server side language & frameworks (hosted apps)
• consolidated (and new web) development best practices
• same webapp / phonegap development workflow

• Installable as a Firefox Addon
• Simplified Install / Update / Remove Hosted & Packaged Apps
• Integrated Manifest Validation
• Connect Remote Developer Tools
• Integrated Push App to Device (MozHacks article)
• Simulated Screen Orientation Lock/Unlock/Change
• Simulated Geolocation

• Not all the new WebAPIs are fully supported/simulated
• Not all the developer tools works as remote developer tools
• "Remove an app" needs a simulator started (and starts it automatically)
• "Switch Orientation" works only when screen orientation is unlocked (e.g. Browser App)
• "Lock Orientation" doesn't support array parameters (e.g. ["portrait-primary", "landscape-primary"])
• Not all the media codecs are available
• Not all gaia application works correctly

• All firefox devtools are available:
  • e.g. WebConsole, Javascript Debugger, DOM / CSS Inspector, 3D DOM Viewer, Network Viewer

• Not intended to be used by app developer (its main target are gaia developers)
• Needs to be run on a custom developer profile
• Not all the media codecs are available
• Not all the new WebAPIs are fully supported/simulated

        $ git clone https://github.com/mozilla-b2g/gaia.git
        ...
        $ cd gaia
        gaia$ make DEBUG=1
        ...
        gaia$ cp -rf test_apps/template test_apps/mypackagedapp
        ­
        gaia$ edit test_apps/mypackagedapp/manifest.webapp
        ­
        gaia$ firefox -no-remote -profile ./profile
        ...
      

• Hosted Apps are installable webapps
• You already know how to develop an hosted app
• ... then add a manifest.webapp

how to support offline mode?

• appCache
• indexeddb / localstorage
• online / offline events

        CACHE MANIFEST
        # v1 2011-08-14
        ­
        CACHE:
        index.html
        cache.html
        style.css
        image1.png
        ­
        # Use from network if available
        NETWORK:
        network.html
        ­
        # Fallback content
        FALLBACK:
        / fallback.html
      

        ExpiresByType text/cache-manifest "access plus 0 seconds"
        ExpiresByType application/x-web-app-manifest+json "access plus 0 seconds"
      

        {
          ... 
        "appcache_path": "/manifest.appcache",
          ...
        }
      

        http://name.domain/folder1
        http://name.domain/folder2
      

On FirefoxOS you can use new experimental APIs:

• webactivities
• network information
• vibration / webfm
• proximity / ambient light
• screen orientation
• alarm
• simple push
• persona / webpayments

and standard ones:

• location
• device orientation
• battery
• fullscreen
• multitouch
• websockets
• webgl (with care FirefoxOS)
• webrtc (under construction on FirefoxOS)
• ...

Restrictions

• no privileged APIs
• no cross domain requests (but you can use CORS)
• same "webapp in a browser tab" constraints (mostly)
• ... but more relaxed storage limits (appcache, indexeddb, localstorage)

        var pick = new MozActivity({
          name: "pick",
          data: {
            type: ["image/png", "image/jpg", "image/jpeg"]
          }
        });
        ­
        pick.onsuccess = function () {
          var img = document.createElement("img");
          img.src = window.URL.createObjectURL(this.result.blob);
          var viewer = document.querySelector("#image-viewer");
          viewer.appendChild(img);
        };
        ­
        pick.onerror = function () {
          ...
        };
      

        if (typeof MozActivity == "function") {
          ...
        } else {
          console.log("FALLBACK: call WebActivity 'pick image'");
          return;
        }
      

        ...
          "activities": {
            "pick": {
              "filters": {
                "type": ["image/*", "image/jpeg", "image/png"]
              },
              "disposition": "inline",
              "returnValue": true,
              "href": "/index.html#pick"
            },
            ...
          },
          ...
      

• Server-less webapps packaged into a zip file
• "app://" url
• If you've used phonegap before... it's even simplier
• Packaged apps MAY be privileged