firefox os - a (mobile) web developers dream - dwx14
DESCRIPTION
My slides from Developer Week 2014 in Nuremberg. Original Slides: http://casarock.github.io/dwx14 (Quality of uploaded slides is not good as slideshare has problem converting the used backgorund)TRANSCRIPT
![Page 1: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/1.jpg)
FIREFOX OSA (MOBILE) WEB DEVELOPERS DREAM
Carsten Sandtner ( ) 2014 - DWX 2014@casarock
![Page 2: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/2.jpg)
WHO AM I?Carsten Sandtner
Head of Development at //mediaman GmbHMozilla representative
Javascript enthusiast and web developer since 1998.
![Page 3: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/3.jpg)
HTML5 BASED OPERATING SYSTEMS
The full Safari engine is inside of iPhone.And so, you can write amazing Web 2.0 and
Ajax apps that look exactly and behaveexactly like apps on the iPhone. And theseapps can integrate perfectly with iPhoneservices. They can make a call, they can
send an email, they can look up a locationon Google Maps. And guess what? There’s
no SDK that you need!
![Page 4: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/4.jpg)
WEBOS
![Page 5: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/5.jpg)
CHROME OS
![Page 6: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/6.jpg)
![Page 7: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/7.jpg)
IN DETAIL
![Page 8: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/8.jpg)
ARCHITECTURE
![Page 9: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/9.jpg)
![Page 10: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/10.jpg)
![Page 11: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/11.jpg)
GONKLow level OS of Firefox OS. Linux - based on Android Open
Source Project
![Page 12: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/12.jpg)
GECKO
![Page 13: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/13.jpg)
GAIAUI level of Firefox OS
Only interface to the underlying operating system and hardware
![Page 14: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/14.jpg)
WEB APIS AND WEB ACTIVITIES
![Page 15: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/15.jpg)
APPS AND 3RD PARTY APPSEvery HTML5, Javascript, CSS based Apps for Firefox OS
Using WebAPIs and Web Activities
![Page 16: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/16.jpg)
APP DEVELOPMENTOpen Web Apps
![Page 17: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/17.jpg)
3 DIFFERENT APP TYPES
![Page 18: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/18.jpg)
HOSTED APPS
![Page 19: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/19.jpg)
PRIVILEGED APPS
![Page 20: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/20.jpg)
CERTIFIED APPS
![Page 21: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/21.jpg)
THE WEB APP MANIFEST
![Page 22: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/22.jpg)
EXAMPLE (MINIMAL){ "name": "My Awesome App", "description": "My elevator pitch goes here", "launch_path": "/somedir/index.html", "icons": { "128": "/img/icon-128.png" }, "developer": { "name": "Your Name", "url": "http://your-homepage-here.tld" }, "default_locale": "en"}
![Page 23: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/23.jpg)
EXAMPLE PRIVILEGED APP{ "name": "My Awesome Privileged App", .... "type": "privileged", "fullscreen": "true", "permissions": { "contacts": { "description": "Required for autocompletion in the share screen", "access": "readcreate" } }, "default_locale": "en", ...}
![Page 24: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/24.jpg)
WEB APISOpen API specifications to access the hardware of devicesCreated with and submitted to standards bodies and other
browser makers
![Page 25: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/25.jpg)
WEB APIS: HOSTED APPSVibration API, Screen Orientation, Geolocation API, MouseLock API, Open WebApps, Network Information API,Battery Status API, Alarm API, Push Notifications API,WebFM API / FMRadio, WebPayment, IndexedDB,Ambient light sensor, Proximity sensor, Notification.
![Page 26: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/26.jpg)
WEB APIS: PRIVILEGED APPSDevice Storage API, Browser API, TCP Socket API,Contacts API, systemXHR.
![Page 27: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/27.jpg)
WEB APIS: CERTIFIED APPSWebTelephony, WebSMS, Idle API, Settings API, PowerManagement API, Mobile Connection API, WiFi InformationAPI, WebBluetooth, Permissions API, Network Stats API,Camera API, Time/Clock API, Attention screen, Voicemail.
![Page 28: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/28.jpg)
Example: Battery APIvar battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery, info = { charging: battery.charging, chargingTime: parseInt(battery.chargingTime / 60, 10), dischargingTime: parseInt(battery.dischargingTime / 60, 10), level: Math.round(battery.level * 100) };
![Page 29: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/29.jpg)
EXAMPLE: BATTERY API - CONT.APIs are event driven!
var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery;
function updateBatteryStatus() { console.log("Battery status: " + battery.level * 100 + " %");
if (battery.charging) { console.log("Battery is charging"); }}
battery.addEventListener("chargingchange", updateBatteryStatus);battery.addEventListener("levelchange", updateBatteryStatus);updateBatteryStatus();
![Page 30: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/30.jpg)
EXAMPLE: GEOLOCATION API*navigator.geolocation.getCurrentPosition(handleLocation);
function handleLocation(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude;}
// Or watch the current position...var watchID = navigator.geolocation.watchPosition(function(position) { handlePostion(position.coords.latitude, position.coords.longitude);});
*Ok, ok, not really a new one!
![Page 31: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/31.jpg)
EXAMPLE: VIBRATION APIvar pattern = [200, 100, 200, 200, 100], goodVibration = navigator.vibrate(pattern);
![Page 32: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/32.jpg)
EXAMPLE: NOTIFICATION APINeeds permissions granted by users! (e.g. webapp.manifest)"permissions": { "desktop-notification": { "description": "Allows to display notifications on the user's desktop." }}
// At first, let's check if we have permission for notification// If not, let's ask for itif (Notification && Notification.permission !== "granted") { Notification.requestPermission(function (status) { if (Notification.permission !== status) { Notification.permission = status; }});}
if (Notification && Notification.permission === "granted") { var n = new Notification("Hi!");}
![Page 33: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/33.jpg)
EXAMPLE: CONNECTION APIGet information about current connection
var connection = navigator.connection || navigator.webkitConnection || navigator.mozConnection;
function updateConnectionStatus() { console.log("Connection changed"); console.log("Bandwidth: " + connection.bandwidth); console.log("Metered: " + connection.metered);}
connection.onchange = updateConnectionStatus;
![Page 34: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/34.jpg)
EXAMPLE: AMBIENTLIGHTGet current Lux of ambient light
window.ondevicelight = function (event) { // Read out the lux value var lux = event.value;};
![Page 35: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/35.jpg)
EXAMPLE: CONTACTS APIRead/Write/Delete Contacts - Permission required!
"permissions": { "contacts":{ "description": "Contacts permissions is required to write contact from Google to your Firefox OS phone", "access": "readwrite" } }}
var contactData = { givenName: ["John"], familyName: ["Doe"]};
var person = new mozContact(contactData);// save the new contactvar saving = navigator.mozContacts.save(person);
saving.onsuccess = function() { console.log('new contact saved');};
saving.onerror = function(err) { console.error(err);};
![Page 36: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/36.jpg)
EXAMPLE: DEVICE STORAGE APISave/Read from sdcard, photo, music, video ...
"permissions": { "device-storage:pictures":{ "access": "readwrite" }, "device-storage:sdcard":{ "access": "readwrite" }}
var sdcard = navigator.getDeviceStorage("sdcard"), file = new Blob(["This is a text file."], {type: "text/plain"}), request = sdcard.addNamed(file, "my-file.txt");
request.onsuccess = function () {...}request.onerror = function () {...}
var pics = navigator.getDeviceStorage('pictures');// browse all the images availablevar cursor = pics.enumerate();cursor.onsuccess = function () { var file = this.result; console.log("File found: " + file.name);
// check if there is other results if (!this.done) { // Then we move to the next result, which call the cursor // success with the next file as result. this.continue(); }}
![Page 38: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/38.jpg)
WEB ACTIVITIES
![Page 39: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/39.jpg)
WEB ACTIVITIESconfigure, costcontrol, dial, open, pick, record, save-bookmark, share, view, update.
new: f.e type: “websms/sms” or “webcontacts/contact”
![Page 40: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/40.jpg)
EXAMPLE: DIAL A NUMBERvar call = new MozActivity({ name: "dial", data: { number: "+49123456789" }});
Invokes "native" Dialer app
![Page 41: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/41.jpg)
EXAMPLE: OPEN AN URLvar openURL = new MozActivity({ name: "view", data: { type: "url", // Possibly text/html in future versions url: "http://www.developer-week.de/" }});
Invokes "native" browser
![Page 42: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/42.jpg)
EXAMPLE: SEND A SMSvar sms = new MozActivity({ name: "new", data: { type: "websms/sms", number: "+49987654321" }});
Invokes "native" messaging app
![Page 43: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/43.jpg)
EXAMPLE: PICK AN IMAGEvar getphoto = new MozActivity({ name: "pick", data: { type: ["image/png", "image/jpg", "image/jpeg"] }});
![Page 44: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/44.jpg)
RESULT
![Page 45: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/45.jpg)
EXAMPLE: PICK AN IMAGE - CONT.getphoto.onsuccess = function() { var img = document.createElement("img"); if (this.result.blob.type.indexOf("image") != -1) { img.src = window.URL.createObjectURL(this.result.blob); }};getphoto.onerror = function() { // error};
![Page 46: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/46.jpg)
REGISTER AN APP AS ACTIVITY HANDLER{ // Other App Manifest related stuff
// Activity registration "activities": { "pick": { "href": "./pick.html", "disposition": "inline", "filters": { "type": ["image/*", "image/jpeg", "image/png"] }, "returnValue": true } }}
![Page 47: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/47.jpg)
HANDLE AN ACTIVITYnavigator.mozSetMessageHandler('activity', function(activityRequest) { var option = activityRequest.source;
if (option.name === "pick") {
// Do something to handle the activity
// Send back the result if(picture) { activityRequest.postResult(picture); } else { activityRequest.postError("Unable to provide a picture"); } }});
![Page 48: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/48.jpg)
TOOLS&UTILS
![Page 49: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/49.jpg)
TESTINGSimulatorBrowser - It's a Web App!
![Page 50: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/50.jpg)
DEVELOPMENTNo SDK!Use your favorite IDE/EditorIt's HTML5!WebIDE!
![Page 51: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/51.jpg)
WEBIDE
![Page 52: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/52.jpg)
https://apps.webmaker.org/
RAPID APPLICATION DEVELOPMENTuse Mozillas Appmaker
![Page 53: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/53.jpg)
DEBUGGING
![Page 54: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/54.jpg)
DEBUGGING - SIMULATOR
Developer tools in Firefox! (NOT! Firebug)Remote Debugger!
![Page 55: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/55.jpg)
DEBUGGING - REMOTEConnect your deviceDebug!That's all
![Page 58: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/58.jpg)
FIREFOX OS BOILERPLATE
https://github.com/robnyman/Firefox-OS-Boilerplate-App
![Page 59: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/59.jpg)
PHONEGAP AND CORDOVA
http://build.phonegap.com/http://cordova.apache.org/
![Page 60: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/60.jpg)
HOW TO DISTRIBUTE YOUR APP
![Page 61: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/61.jpg)
HOSTED APPHost the App on your web spaceProvide installation using WebAPI
![Page 62: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/62.jpg)
HOSTED APP DISTRIBUTIONCheck if app is already installed
var request = navigator.mozApps.checkInstalled(manifestPath);
request.onerror = function() { console.log('Error checking for installed app: ', request.error.name);};
request.onsuccess = function() { // If the app is installed, you'll get a mozApp object in ̀request.result̀, // else ̀request.result̀ is null console.log("Could be installed: ", request.result !== null ? "is installed" : "is not installed"};
![Page 63: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/63.jpg)
HOSTED APP DISTRIBUTIONInstall your app
var installRequest = navigator.mozApps.install(manifestPath);
installRequest.onsuccess = function() { // No error console.log("App installed");};
installRequest.onerror = function() { console.log('Error installing the app: ', installRequest.error.name);};
Done. Cool, eh?Works on Firefox Android, too.
![Page 64: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/64.jpg)
Distribute via Firefox OS MarketplacePRIVILEGED APP
![Page 65: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/65.jpg)
Validate using App-ManagerPRIVILEGED APP DISTRIBUTION
Upload ZIP of your app to marketplace.Wait for approval. Done.
![Page 66: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/66.jpg)
![Page 67: Firefox OS - A (mobile) Web Developers dream - DWX14](https://reader033.vdocuments.us/reader033/viewer/2022051514/54b767b74a79595d768b4614/html5/thumbnails/67.jpg)
THANK YOU!Carsten Sandtner
@casarock
Slides: http://casarock.github.io/dwx14