Software Developer

@

ALCA Società Cooperativa

http://alcacoop.it

Mozilla Developers Community,

Code Contributor

on

Firefox OS Simulator

Firefox DevTools

Firefox OS

is a Mobile OS

completely based

on Web Technologies

and it is REAL

Gonk

• porting target for Gecko
• Lower Level OS Layer
• Linux Kernel + UserSpace Hardware Abstraction Layer
• common open-source projects: libusb, bluez, ...
• shared Android HAL: GPS, Camera, ...

Gecko

• Firefox WebEngine ported on Gonk
• Platform & Applications Runtime based on Web Technologies
• provides platform access to apps (e.g. networking and graphics stacks, javascript VM, ...)
• provides standard and new experimental WebAPIs (installable WebApps, WebActivities, Vibration, Battery, ...)

Gaia

• collection of system apps (e.g. system, homescreen, lockscreen, settings, ...) and pre-installed mobile apps (e.g. dialer, sms, contacts, email, browser, marketplace, ...)
• implemented using HTML, CSS and JS
• use Gecko as its interface to the underlying OS

Firefox OS

everything in the OS is OpenWeb Technologies and Standard Proposals:

• http://w3c-webmob.github.io/installable-webapps/
• http://www.w3.org/2008/webapps/manifest/
• http://www.w3.org/TR/2013/WD-telephony-20130620/
• http://www.w3.org/2012/sysapps/#future

WebApps born as white pages...

... like paintings

... where we can sketch down ideas...

Firefox Developer Tools

Web Development BEFORE Tools

Web Development AFTER Tools

App Manager

install and debug apps on Devices & Simulators

Simulator Window

Installed App and Permissions Table:

Installed App and Permissions Table:

Remote DevTools

Firefox OS Apps are

installable WebApps

Once upon a time...

Bookmark a WebApp to Homescreen

on iOS

Once upon a time...

Bookmark a WebApp to Homescreen

on Android

Once upon a time...

Bookmark a WebApp to Homescreen

on Firefox OS too

But it is not enough

OpenWebApps:

WebApp + manifest.webapp

• application metadata
• install/upgrade/uninstall workflow
• app marketplace
• request permissions
• new experimental features (e.g. WebActivities)

manifest.webapp

{
  "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"
  }
}

Application Types

App Types vs. Developer Experience

Packaged App

• all resources packaged into a zip archive
• no internet origin
• use a special app:// protocol
• generated (at install time) uuid as app domain
• packaged apps CAN be privileged

myapp.zip:

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

Hosted App

• regular webapp security restrictions
• served from an HTTP Server
• 1 hosted app x origin

App Origin:

protocol, domain, port

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

Manifest and paths

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

launch_path, icons, appcache_path

are

ALWAYS RELATIVE

to the App Origin

Packaged App

relative to the root of the zip file

Hosted App

e.g. relative to

https://myapp/

or

http://localhost:3000/

Hosted App

manifest.webapp

Content Type:

application/x-web-app-manifest+json

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()

Hosted App

works offline using

• AppCache
• IndexedDB, localStorage
• online/offline events

manifest.appcache

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

Serve manifest.appcache

...

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

...

in the manifest.webapp

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

DO NOT CACHE THE MANIFESTS!!!

e.g. on Apache:

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

Prototyping & Development

• code on Firefox for Desktop
• mockup / polyfill missing WebAPIs

Test on Firefox OS

• add app directory to the App Manager
• start a simulator / connect a device
• push app to the simulator/device
• debug on the simulator/device

Publish on the Marketplace

• zip app directory
• validate package archive on the Marketplace Validator
• submit to the Marketplace

Firefox Marketplace

arewemobileyet.com

WebAPI

Security Restrictions

Hosted Apps:

• same "webapp in a browser tab" constraints (mostly)
• ... but more relaxed storage limits (appcache, indexeddb, localstorage)
• extended WebAPIs available on installed OpenWebApps (WebActivities, WebFM, Vibration, WebPayments...)
• no cross domain requests (but you can use CORS)
• no privileged APIs

Security Restrictions

Packaged App:

all standard and experimental WebAPIs +

extended priviliged WebAPIs

• cross domain requests (systemXHR)
• tcp sockets
• contacts
• device storage
• file handle
• browser

Security Restrictions

Priviliged and Certified Packaged App:

enforce a CSP (content security policy) by default:

• no remote scripts injection
• no inline scripts in html tags/attributes
• no javascript URIs
• eval is not allowed

ask for...

permissions

(if needed)

manifest.webapp

permission fragment

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

WebAPI example:

systemXHR

request systemXHR permission

https://developer.mozilla.org/en-US/Apps/Developing/App_permissions

request systemXHR permission

{
  "name": "WeatherHere",
  "version": "0.1",
  "launch_path": "/index.html",
  "type": "privileged",
  "permissions": {
    "systemXHR": {
      "description": "openweather api requests"
    }
  },
  ...
}

use systemXHR (jQuery.ajax method)

$.ajax(BASE_URL + city, {
  dataType: "json",
  xhrFields: {
    systemXHR: true
  }
}).done(function (data) {
  ...
}).fail(function (err) {
  ...
});

WebAPI example:

WebActivities

WebActivities

do not need

any privileged permission

WebActivities

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

WebActivities

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

WebActivities

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

WebActivities

Apps can define new WebActivities

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

Examples

• Firefox OS Boilerplate App
• firefoxos-simulator-walkthrough example app
• FxOS Stub App
• buildingfirefoxos.com - gaia building blocks and style guide

Articles

• Firefox OS articles on hacks.mozilla.org
• FxOS Stub App walkthrough

MDN App Developers Doc Pages

• Apps start page on developer.mozilla.org
• Apps Development API Reference
• WebAPI start page on developer.mozilla.org
• Using the application cache on developer.mozilla.org
• Apps Content Security Policy on developer.mozilla.org

Firefox Marketplace Docs & Tools

• Developers start page on marketplace.firefox.com
• Marketplace App Validator
• Marketplace Test Payments Generator

MDN Firefox OS Doc Pages

• Firefox OS start page on developer.mozilla.org
• Firefox OS Platform Architecture
• Firefox OS Security Model on developer.mozilla.org