{
  "name": "MyAppName",
  "version": "1.7",
  "launch_path": "/index.html",
  "icons": {
    "128": "/style/icons/Blank.png"
  },
  ...,
}
            

App Origin:

protocol, domain, port

https://myapp.com
http://localhost:9000
app://550e8400-e29b-41d4-a716-446655440000/
            

myapp.zip:

manifest.webapp
index.html
js/
   app.js
css/
   app.css
res/
   ...
vendor/
   ...
            

Simple Python Static HTTP Server

import SimpleHTTPServer
import SocketServer

SimpleHTTPServer.SimpleHTTPRequestHandler. \
  extensions_map['.webapp'] = \
  'application/x-web-app-manifest+json'

httpd = SocketServer.TCPServer(("", 3000), \
  SimpleHTTPServer.SimpleHTTPRequestHandler)

httpd.serve_forever()
            

                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
            

In the Simple Python Static HTTP Server

  SimpleHTTPServer.SimpleHTTPRequestHandler. \
    extensions_map['.appcache] = \
      'text/cache-manifest'
            

In the manifest.webapp

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

manifest.webapp permissions

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

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

WebActivities API

var pick = new MozActivity({
  name: "pick",
  data: {
    type: ["image/png",
           "image/jpeg"]
  }
});
            

WebActivities are mostly like Android Intents

WebActivities API

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 () { ... };
            

Declaring new WebActivities

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