firefox os - og web som mobil plattform
DESCRIPTION
Foredrag om Firefox OS og mobilt web på JavaZone 2013TRANSCRIPT
Firefox OS - og web som mobil plattform
Håvard WigtilKantega 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?
MobiltelefonHardware
GonkOperativsystem: Linux-kjerne og hardware abstraction layer
GeckoRuntime: API'er, JavaScript, parser, DOM («Firefox uten GUI»)
GaiaGUI: Systemapplikasjoner, 100% HTML, JavaScript og CSS
Fire
fox
OS
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/Manifesthttps://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_modelhttps://developer.mozilla.org/en-US/docs/Web/Apps/CSP
API-tilgang etter type
https://developer.mozilla.org/en-US/docs/WebAPIhttps://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# v2features.jsfeatures.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/Storagehttps://developer.mozilla.org/en-US/docs/IndexedDBhttps://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»-mappevar 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");}
Eksempel: 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-Apphttps://developer.mozilla.org/en-US/docs/Web/Apps/App_templateshttps://github.com/kantega/firefoxos-examples
Spørsmål?
Presentasjon på slideshare.net/havwig/Eksempler på github.com/kantega/
Eller kom til Kantegas stand etterpå.