Firefox OS - A (mobile) Web Developers dream - DWX14

67
FIREFOX OS A (MOBILE) WEB DEVELOPERS DREAM Carsten Sandtner ( ) 2014 - DWX 2014 @casarock

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 of Firefox OS - A (mobile) Web Developers dream - DWX14

Page 1: Firefox OS - A (mobile) Web Developers dream - DWX14

FIREFOX OSA (MOBILE) WEB DEVELOPERS DREAM

Carsten Sandtner ( ) 2014 - DWX 2014@casarock

Page 2: Firefox OS - A (mobile) Web Developers dream - DWX14

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

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

WEBOS

Page 5: Firefox OS - A (mobile) Web Developers dream - DWX14

CHROME OS

Page 6: Firefox OS - A (mobile) Web Developers dream - DWX14
Page 7: Firefox OS - A (mobile) Web Developers dream - DWX14

IN DETAIL

Page 8: Firefox OS - A (mobile) Web Developers dream - DWX14

ARCHITECTURE

Page 9: Firefox OS - A (mobile) Web Developers dream - DWX14
Page 10: Firefox OS - A (mobile) Web Developers dream - DWX14
Page 11: Firefox OS - A (mobile) Web Developers dream - DWX14

GONKLow level OS of Firefox OS. Linux - based on Android Open

Source Project

Page 12: Firefox OS - A (mobile) Web Developers dream - DWX14

GECKO

Page 13: Firefox OS - A (mobile) Web Developers dream - DWX14

GAIAUI level of Firefox OS

Only interface to the underlying operating system and hardware

Page 14: Firefox OS - A (mobile) Web Developers dream - DWX14

WEB APIS AND WEB ACTIVITIES

Page 15: Firefox OS - A (mobile) Web Developers dream - DWX14

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

APP DEVELOPMENTOpen Web Apps

Page 17: Firefox OS - A (mobile) Web Developers dream - DWX14

3 DIFFERENT APP TYPES

Page 18: Firefox OS - A (mobile) Web Developers dream - DWX14

HOSTED APPS

Page 19: Firefox OS - A (mobile) Web Developers dream - DWX14

PRIVILEGED APPS

Page 20: Firefox OS - A (mobile) Web Developers dream - DWX14

CERTIFIED APPS

Page 21: Firefox OS - A (mobile) Web Developers dream - DWX14

THE WEB APP MANIFEST

Page 22: Firefox OS - A (mobile) Web Developers dream - DWX14

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

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

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

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

WEB APIS: PRIVILEGED APPSDevice Storage API, Browser API, TCP Socket API,Contacts API, systemXHR.

Page 27: Firefox OS - A (mobile) Web Developers dream - DWX14

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

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

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

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

EXAMPLE: VIBRATION APIvar pattern = [200, 100, 200, 200, 100], goodVibration = navigator.vibrate(pattern);

Page 32: Firefox OS - A (mobile) Web Developers dream - DWX14

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

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

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

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

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 37: Firefox OS - A (mobile) Web Developers dream - DWX14

AND THERE ARE MANY MORE!

APIs at MDN

Page 38: Firefox OS - A (mobile) Web Developers dream - DWX14

WEB ACTIVITIES

Page 39: Firefox OS - A (mobile) Web Developers dream - DWX14

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

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

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

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

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

RESULT

Page 45: Firefox OS - A (mobile) Web Developers dream - DWX14

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

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

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

TOOLS&UTILS

Page 49: Firefox OS - A (mobile) Web Developers dream - DWX14

TESTINGSimulatorBrowser - It's a Web App!

Page 50: Firefox OS - A (mobile) Web Developers dream - DWX14

DEVELOPMENTNo SDK!Use your favorite IDE/EditorIt's HTML5!WebIDE!

Page 51: Firefox OS - A (mobile) Web Developers dream - DWX14

WEBIDE

Page 52: Firefox OS - A (mobile) Web Developers dream - DWX14

https://apps.webmaker.org/

RAPID APPLICATION DEVELOPMENTuse Mozillas Appmaker

Page 53: Firefox OS - A (mobile) Web Developers dream - DWX14

DEBUGGING

Page 54: Firefox OS - A (mobile) Web Developers dream - DWX14

DEBUGGING - SIMULATOR

Developer tools in Firefox! (NOT! Firebug)Remote Debugger!

Page 55: Firefox OS - A (mobile) Web Developers dream - DWX14

DEBUGGING - REMOTEConnect your deviceDebug!That's all

Page 56: Firefox OS - A (mobile) Web Developers dream - DWX14

UI COMPONENTS

http://buildingfirefoxos.com/

Page 57: Firefox OS - A (mobile) Web Developers dream - DWX14

UI COMPONENTS - BRICK!

http://mozilla.github.io/brick/

Page 58: Firefox OS - A (mobile) Web Developers dream - DWX14

FIREFOX OS BOILERPLATE

https://github.com/robnyman/Firefox-OS-Boilerplate-App

Page 59: Firefox OS - A (mobile) Web Developers dream - DWX14

PHONEGAP AND CORDOVA

http://build.phonegap.com/http://cordova.apache.org/

Page 60: Firefox OS - A (mobile) Web Developers dream - DWX14

HOW TO DISTRIBUTE YOUR APP

Page 61: Firefox OS - A (mobile) Web Developers dream - DWX14

HOSTED APPHost the App on your web spaceProvide installation using WebAPI

Page 62: Firefox OS - A (mobile) Web Developers dream - DWX14

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

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

Distribute via Firefox OS MarketplacePRIVILEGED APP

Page 65: Firefox OS - A (mobile) Web Developers dream - DWX14

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
Page 67: Firefox OS - A (mobile) Web Developers dream - DWX14

THANK YOU!Carsten Sandtner

@casarock

Slides: http://casarock.github.io/dwx14