Firefox OS - og web som mobil plattform

Firefox OS -
og web som mobil plattform
Håvard Wigtil
Kantega AS
JavaZone 2013

Agenda
● Om Firefox OS
● Utviklingsmiljø
● Hva er en Firefox OS-app?
● API'er
● Look and feel
● Andre plattformer

Historisk tilbakeblikk
«Netscape would render Windows
a poorly debugged set of device drivers»
RT Marc Andreessen

Om Mozilla
«Our mission is to promote openness,
innovation & opportunity on the Web»
http://www.mozilla.org/en-US/mission/

Hvorfor Firefox OS?
● Motivasjon: Et åpent Internet også for mobile enheter, hindre
lukkede systemer
● Skal ikke konkurrere med Android og iOS på features (ennå!)
● Tett samarbeid med mobiloperatører
● Sikter seg inn mot «utviklende økonomier»

Hva er Firefox OS?
● Operativsystem for mobile enheter
● Basert på web-teknologier
● HTML og JavaScript som eneste utviklingsplattform

Hva er Firefox OS?
Mobiltelefon
Hardware
Gonk
Operativsystem: Linux-kjerne og hardware abstraction layer
Gecko
Runtime: API'er, JavaScript, parser, DOM («Firefox uten GUI»)
Gaia
GUI: Systemapplikasjoner, 100% HTML, JavaScript og CSS
FirefoxOS

Et screenshot sier mer enn 1000 bullet points

Status for Firefox OS
● Versjon 1.0 i februar i år
● Offisielle utviklertelefoner fra april
● Lansert i Spania og Polen i juli
● Lansert i Colombia og Venezuela i august, snart i Brasil
● Telenor skal lansere i Øst-Europa i høst
● Versjon 1.1 rett rundt hjørnet
● Planer om nye releaser 4 ganger i året

Utviklingsmiljø på 1-2-3
● Installér utvidelse i Firefox
● Pek simulator til HTML
● Kjør!

Andre muligheter for utvikling
● Få telefoner tilgjengelig (i Norge) ennå
● Mulig å installere på enkelte Android-telefoner, f.eks. Galaxy S2
● Firefox på Android

Hva er en Firefox OS-app?
● Manifest-fil for metadata
● API for å installere
● Kan også brukes på desktop
og Android
{
"version": "0.1",
"name": "Features",
"description": "Viser tilgjengelige API'er",
"launch_path": "/index.html",
"icons": {
"128": "/img/icon-128.png"
},
"developer": {
"name": "Håvard Wigtil",
"url": "http://www.kantega.no"
}
}
https://developer.mozilla.org/en-US/docs/Web/Apps/Manifest
https://developer.mozilla.org/en-US/docs/Web/Apps/JavaScript_API
window.navigator.mozApps.install(manifestUrl);

Sikkerhetsmodell
● Deling i kategorier av apps etter opprinnelse (hosted, installed,
privileged, certified)
● Manifest med ønskede rettigheter
● Stiller krav til kode for privileged og certified apps (egen content
security policy)
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Security/Security_model
https://developer.mozilla.org/en-US/docs/Web/Apps/CSP

API-tilgang etter type
https://developer.mozilla.org/en-US/docs/WebAPI
https://hacks.mozilla.org/2013/02/using-webapis-to-make-the-web-layer-more-capable/
Type API'er
Installed Posisjon, orientering, online-status, batteristatus, betaling,
vibrering, med mer
Privileged Kontakter, lokalt filsystem, TCP sockets, XmlHttpRequest til
vilkårlig host
Certified Telefon, SMS, Bluetooth, strømstyring, nettverksinformasjon, etc

Offline web
● «Hvem vil ha en telefon som alltid må være koblet på nett?»
● Application cache API (AppCache) kan brukes til å lagre innhold
for en app offline
● Andre API'er for lokal lagring av brukerdata

Eksempel på AppCache
● Attributt i html-elementet
● Listing for cache-fil
https://developer.mozilla.org/en-US/docs/HTML/Using_the_application_cache
<html manifest="features.appcache">
CACHE MANIFEST
# v2
features.js
features.css

«Application cache is a doucebag»
● Filer hentes alltid fra cache
● Cache oppdateres kun når innholdet i manifest endres
● Cache oppdateres etter at side er lastet
● Hvis kun én fil ikke kan lastes ned vil cache ikke oppdateres
http://alistapart.com/article/application-cache-is-a-douchebag

Lokal lagring
● WebStorage for enkle brukerdata
● IndexedDB for lagring eller caching av komplekse brukerdata
● Også mulig med proprietær Device Storage-API som gir
begrenset tilgang til filsystem
https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Storage
https://developer.mozilla.org/en-US/docs/IndexedDB
https://developer.mozilla.org/en-US/docs/WebAPI/Device_Storage
sessionStorage.setItem("jz13.schedule", JSON.stringify(schedule));
...
var schedule = JSON.parse(sessionStorage.getItem("jz13.schedule"));

Manifest med rettigheter
● For å få tilgang til «priviligerte» API'er må rettigheter settes opp
i manifest
"type": "privileged",
"permissions": {
"geolocation": {},
"contacts": {
"description": "Sjekke adressebok og legge inn kontakter",
"access": "readcreate"
},
"device-storage:pictures": {
"access": "readwrite"
},
"desktop-notification": {}
}

Eksempel: Posisjon
● En «gammel» API, støttet i de fleste nettlesere
● Også mulig å få beskjed ved endret posisjon
function checkLocation() {
navigator.geolocation.getCurrentPosition(positionCallback, positionErrorCallback,
{ enableHighAccuracy: true});
}
function positionCallback(position) {
var c = position.coords;
if (c.longitude > 10.7528 && c.longitude < 10.7569
&& c.latitude > 59.9121 && c.latitude < 59.9137) {
document.getElementById("location_status").textContent = "Du er på JavaZone!";
} else {
document.getElementById("location_status").textContent = "Kom deg på JavaZone!";
}
}
https://developer.mozilla.org/en-US/docs/WebAPI/Using_geolocation

Eksempel: Kontakt-API
● Krever å være installert fra en app store for tilgang («privileged»)
● Eksempel: Hente ut en kontakt
var options = {
filterValue : "93846468",
filterBy : ["tel"],
filterOp : "contains",
filterLimit : 1
};
var search = navigator.mozContacts.find(options);
search.onsuccess = function() {
var status = document.getElementById("address_book_status");
if (search.result.length === 1) {
status.textContent = "Nummer finnes i adressebok";
} else {
status.textContent = "Nummer ikke i adressebok";
}
};
https://developer.mozilla.org/en-US/docs/WebAPI/Contacts

Eksempel: Lokalt filsystem
● Lese fra «bilder»-mappe
var pics = navigator.getDeviceStorage('pictures');
if (pics === null) {
document.getElementById("thumbnails").textContent = "Ikke støtte for bilder";
return;
}
var cursor = pics.enumerate();
cursor.onsuccess = function () {
var file = this.result;
var img = document.createElement("img");
img.height = 60;
img.src = window.URL.createObjectURL(file);
document.getElementById("thumbnails").appendChild(img);
if (!this.done) {
this.continue();
}
};
https://developer.mozilla.org/en-US/docs/WebAPI/Device_Storage

Eksempel: Systemvarsler
● Meldinger i «varslingsområde», dvs. øverst på skjermen
● Nylig standardisert API, Firefox OS har ikke siste versjon ennå
https://developer.mozilla.org/en-US/docs/Web/API/notification
if ("Notification" in window) {
new Notification("'API demo' har startet", {"body": "Systemvarsler med ny API"});
} else if ("mozNotification" in navigator) {
var notification = navigator.mozNotification.createNotification("'API demo' har startet",
"Systemvarsler med gammel API");
notification.show();
} else
{
alert("Ingen støtte for systemvarsler");
}

Web activities
● Lar applikasjoner bruke systemressurser på en sikker måte
● Applikasjoner kan registrere seg for å tilby aktiviteter
● GUI for å velge mest egnede app

Eksempel: Bilde med web activities
● Få bilde fra kamera eller filsystem
● Bruker velger først kilde
var pick = new MozActivity({name: "pick", data: {type: ["image/*"]}});
pick.onsuccess = function () {
var img = document.createElement("img");
img.src = window.URL.createObjectURL(this.result.blob);
var imagePresenter = document.getElementById("image_presenter");
imagePresenter.appendChild(img);
};
pick.onerror = function() {
alert("Bilde ikke valgt: " + pick.error.name);
}

Betaling
● Mozillas Marketplace med «standard» betingelser (tar 30%)
● Lagt opp til å kunne ha mange app stores
● Store telefonoperatører vil kanskje ha egen app store

In-app betaling
● Egen proprietær JavaScript-API for in-app betaling
● Krever en server for app-utvikler
● Kan også brukes på Firefox for Android
https://developer.mozilla.org/en-US/docs/Web/Apps/Publishing/In-app_payments

Eksempelflyt for in-app betaling
1. App tar kontakt med server og bestiller «vare», får et signert
JSON Web Token (JWT) tilbake
2. App kaller JavaScript-API med JWT som parameter
3. API tar dialog med betalingsformidler, i eget GUI
4. Betalingsformidler gir beskjed til server om gjennomført betaling
5. App poller server for å få beskjed om gjennomført betaling

Look and feel
● Få faste rammer
● Kan gjøre hva du vil med HTML og CSS
● Inger felles ressurser for app'er (men system-app'er deler)

Building Blocks
● Eget nettsted for å designe apps med integrert utseende
● Maler for GUI-elementer og transisjoner
● Kopiere ressurser og legge inn i egen app
● Demo-app finnes også på Mozilla marketplace

Kodeeksempel med «Building Blocks»
<section role="region" id="buttons" data-position="right">
<header class="fixed">
<a id="btn-buttons-back" href="#"><span
class="icon icon-back">back</span></a>
<h1>Buttons</h1>
</header>
<article class="content scrollable header">
<header><h2>Normal</h2></header>
<div>
<button>Default</button>
<button class="recommend">Recommend</button>
<button class="danger">Danger</button>
</div>

API på andre nettlesere
http://mobilehtml5.org/
API Firefox OS FF Android FF Desktop Android iOS Win Phone
Posisjon ✔ ✔ ✔ ✔ ✔ ✔
Kontakter ✔
Varsler ✔ ✔ ✔
AppCache ✔ ✔ ✔ ✔ ✔ ✔
WebStorage ✔ ✔ ✔ ✔ ✔ ✔
Beveg.sensor ✔ ✔ ✔ ✔ ✔
IndexedDB ✔ ✔ ✔ ✔ ✔
Betaling ✔ ✔

Andre web-baserte plattformer
● Blackberry 10
● Tizen
● Ubuntu Touch
● Chrome Apps
● Windows 8
http://developer.chrome.com/apps/about_apps.html

Oppsummering
● Du trenger lite ekstra for en Firefox OS-app
● Mobilt web har muligheter
● Økende antall plattformer krever en strategi

Pekere til eksempler
● Mange gode eksempler på nett
● Mozilla tilbyr også applikasjonsmaler
● To enkle eksempler på Kantega Github
https://github.com/robnyman/Firefox-OS-Boilerplate-App
https://developer.mozilla.org/en-US/docs/Web/Apps/App_templates
https://github.com/kantega/firefoxos-examples

Spørsmål?
Presentasjon på slideshare.net/havwig/
Eksempler på github.com/kantega/
Eller kom til Kantegas stand etterpå.

Firefox OS - og web som mobil plattform

More Related Content

Similar to Firefox OS - og web som mobil plattform

Firefox OS - og web som mobil plattform