Firefox OS Apps are...
installable WebApps
"Let's make Peter happy"
add a manifest.webapp
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"
}
}
{
"name": "MyAppName",
"version": "1.7",
"launch_path": "/index.html",
"icons": {
"128": "/style/icons/Blank.png"
},
...,
}
launch_path, appcache_path, icons urls
are
ALWAYS RELATIVE
to the App Origin
Hosted App
e.g. relative to
or
Packaged App
relative to the root of the zip file
App Origin:
protocol, domain, port
https://myapp.com
http://localhost:9000
app://550e8400-e29b-41d4-a716-446655440000/
OK... WHY?
- classic install/uninstall/update app lifecycle
- app metadata
- app permissions
- apps marketplace and apps discovery
- new experimental feature (e.g. WebActivities, Simple Push)
Packaged App
vs
Hosted App
Packaged App:
- no internet origin
- use a special app:// protocol
- generated (at install time) uuid as app domain
- packaged apps MAY be privileged
- all resources packaged into a zip archive
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
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,
and 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
In the Simple Python Static HTTP Server
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 Apps are...
enabled to use new
experimental
webapis and
permissions
Hosted App:
experimental WebAPIs available
- webactivities
- network information
- vibration / webfm
- proximity / ambient light
- screen orientation
- alarm
- simple push
- persona / webpayments
Hosted App:
standard WebAPIs
- location
- device orientation
- battery
- fullscreen
- multitouch
- websockets
- webgl (with care on Firefox OS)
- webrtc (under construction)
Hosted App:
Security 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)
Packaged App:
all standard and experimental WebAPIs +
extended priviliged WebAPIs available
- cross domain requests (systemXHR)
- tcp sockets
- contacts
- device storage
- file handle
- browser
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 necessary)
manifest.webapp permissions
...
"type": "privileged",
"permissions": {
"contacts": {
"description": "Required for ...",
"access": "readcreate"
},
"alarms": {
"description": "Required to ..."
}
}
...
check and use...
experimental webapis
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"
},
...
