Firefox OS

where WebApps become Native

"Firefox OS Hackathon" @ Bari - 21 Febbraio 2014


http://learn.alcacoop.it/2014/fxos-bari/firefoxos

Created by Luca Greco

Who am I?

Software Developer

@

ALCA Società Cooperativa

ALCA Società Cooperativa

http://alcacoop.it

Mozilla Developers Community,

Code Contributor

on

Firefox OS Simulator

Firefox DevTools

http://github.com/rpl

http://twitter.com/lucagreco

luca.greco @ alcacoop.it

Mobile, Apps & Web

Mobile is REAL

Apps are TRENDY

Web is the OPEN platform...

... which helped the transition from Desktop to Mobile systems

Firefox OS

Platform

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:

Firefox OS

Developer Tools

WebApps born as white pages...

... like paintings

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

Firefox Developer Tools

Firefox Developer Tools

Web Development BEFORE Tools

Web Development AFTER Tools

App Manager

install and debug apps on Devices & Simulators

App Manager addons

Simulator Window

Simulator Window

Installed App and Permissions Table:

Installed App and Permissions Table:

Remote DevTools

Firefox OS

Apps

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

different urls, same origin

http://name.domain/folder1

http://name.domain/folder2

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"

Firefox OS Packaged App

Workflow Example

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

Firefox Marketplace

Firefox OS

Apps Permissions

and WebAPIs

arewemobileyet.com

Are We Mobile Yet?

WebAPI

WebAPI Docs on MDN

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

Firefox OS App Settings

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"
    },
    ...

Questions?

More Docs and Examples

Examples

Articles

MDN App Developers Doc Pages

Firefox Marketplace Docs & Tools

MDN Firefox OS Doc Pages