EMPOWERING THE MOBILE WEB

Chris Mills // Mozilla cmills@mozilla.com // @chrisdavidmills

don’t stress about taking notes:

๏ These slides are all at slideshare.net/chrisdavidmills

๏ developer.mozilla.org

๏ @chrisdavidmills

๏ cmills@mozilla.com

๏ #mdn irc channel on mozilla irc

๏ dev-mdc@lists.mozilla.org mailing list

๏ heavy metal drummer turned web nerd

๏ tech writer @ mozilla

๏ web tinkerer (HTML, CSS, JS)

๏ accessibility whiner

๏ educator

who am i?

mdn!!

what is THE MOBILE WEB?

what is the mobile web?

wap

๏ (blarrrgh, awful...)

what is the mobile web?

the web for mobile phones

๏ real mobile browsers

๏ separate web sites for mobiles

๏ lots of ua sniffing crimes

what is the mobile web?

the web as it is experienced on mobiles/tablets/etc.

๏ more thought given to ux; to context

๏ progressive enhancement

๏ feature detection

๏ responsive

what is the mobile web?

the web while you’re on the move

๏ geolocation

๏ offline data storage

what is the mobile web?

web technologies providing “native” capabilities

๏ installable apps

๏ control over device hardware and key services

๏ app ecosystem/marketplace

๏ fully functional offline apps

๏ high fps performance

what’s the problem?

web versus native, the age-old struggle

the usual arguments

native is better?

๏ faster?

๏ more integrated, consistent experience?

๏ better developer ecosystem?

๏ more secure?

the usual arguments

๏ web sites accessing other tabs or apps?

๏ web sites accessing camera contacts e-mail?

solutions,moz style

solutions

we’ve been working hard on this at mozilla

๏ app ecosystem

๏ firefox os

๏ apis

๏ developer experience and tools

๏ performance

app ecosystem

installable apps

not a new phenomenon, but...

๏ pretty recent concept for the web

๏ manifest file defines app (manifest.webapp)

๏ installation controlled by app installation and management apis

{ "version": "0.1", "name": "To-do alarms", "description": "My awesome open web app", "launch_path": "/index.html", "icons": { "128": "/img/icon-128.png" }, "developer": { "name": "Chris Mills", "url": "http://yourawesomeapp.com" }, "locales": { "es": { "description": "Su nueva aplicación impresionante Open Web", "developer": { "url": "http://yourawesomeapp.com" } }, "it": {

manifest example

var manifest_url = location.href.substring(0, location.href.lastIndexOf("/")) + "/manifest.webapp"; function install() { // install the app var install = navigator.mozApps.install(manifest_url); install.onsuccess = function(data) { // App is installed, do something if you like }; install.onerror = function() { // App wasn't installed, info is in // install.error.name alert(install.error.name); }; };

installation example

app types

Apps can be:

๏ hosted: just like a normal web site, but with a manifest and install

functionality

๏ packaged: zipped up, hosted somewhere (like the firefox

marketplace)

app stores

you are free to distribute your apps how you like

๏ marketplace.firefox.com

๏ team of reviewers verify apps before they are accepted

๏ you can also host your own apps

๏ or set up your own marketplace

app payments

now you can charge money for web apps

๏ payments api (mozpay) that uses the bango payments provider

๏ receipt verification to make sure payments are completed

๏ in-app payments also available

web runtime

web rt allows installable apps to work on other platforms

๏ apk wrapper for android apps, which includes native equivalents

where possible

๏ similar native wrappers for desktop platforms coming up

๏ firefox marketplace/Firefox will generate these

firefox os

firefox os!

our mobile platform

๏ totally built on open web technologies

๏ mostly standards

๏ some are new inventions, with standardization being worked on

๏ designed for low power devices

successes so far

lots of success so far:

๏ 4 hardware partners

๏ 16 launches in 15 countries

๏ 30% market share with TEF in Uruguay; 12% market share with TEF

in Colombia

๏ vibrant developer community

๏ developer preview devices available

architecture

three main layers

๏ gonk: linux kernel plus hardware abstraction layer

๏ gecko: entire system runs on our rendering engine

๏ gaia: ui plus default system apps

architecture

everything runs in gecko

๏ each app runs in an iframe, hanging off main process

๏ this enforces cross app security (sandbox)

๏ as does api permissions system (see later)

๏ oom errors handled via a priority system

apis

apis!!!

we want to control everything from the web

๏ so we’re creating apis to handle access to device hardware, system

functions, etc.

๏ security handled by permissions, in the manifest

api permissions

different apis have different permission levels:

๏ standard apis can be accessed by any app

๏ privileged apis can only be used in a packaged, verified apps (e.g.

contacts, device storage, keyboard)

๏ certified apis can only be used by vendor-installed apps (e.g.

camera, sms, dialer, bluetooth)

var pick = new MozActivity({ name: "pick", data: { type: ["image/png", "image/jpg", "image/jpeg"] } });

web activities (intents)

web activities

pick.onsuccess = function () { // Create image and set the returned blob as the src var img = document.createElement("img"); img.src = window.URL.createObjectURL(this.result.blob); // Present that image in your app var imagePresenter = document.querySelector("#image-presenter"); imagePresenter.appendChild(img); }; pick.onerror = function () { // If an error occurred or the user canceled the activity alert("Can't view the image!"); };

web activities

var img = '/to-do-notifications/img/icon-128.png'; var text = 'HEY! Your task "' + title + '" is now overdue.'; var notification = new Notification('To do list', { body: text, icon: img });

notification

!var myAlarmDate = new Date(month.value + " " + day.value + ", " + year.value + " " + hours.value + ":" + minutes.value + ":00"); !var data = { task: title.value } !var request = navigator.mozAlarms.add(myAlarmDate, "ignoreTimezone", data); !request.onsuccess = function () { console.log("Alarm successfully scheduled"); var alarmRequest = navigator.mozAlarms.getAll(); alarmRequest.onsuccess = function() { newAlarmId = this.result[(this.result.length)-1].id; } };

alarm

navigator.mozSetMessageHandler("alarm", function (alarm) { // only launch a notification if the Alarm is of the right type for this app if(alarm.data.task) { // Create a notification when the alarm is due new Notification("Your task " + alarm.data.task + " is now due!"); updateNotified(alarm.data.task); } });

alarm + notification

alarm + notification

window.navigator.vibrate(200); // vibrate for 200ms !window.navigator.vibrate([100,30,100,30,100,200,200,30,200,30,200,200,100,30,100,30,100]); // Vibrate 'SOS' in Morse.

vibration

window.addEventListener('devicelight', function(deviceLightEvent) { /* Check ambient light status */ if (deviceLightEvent.value > 500) { // snow _self.setSnow(); } else if (deviceLightEvent.value > 100) { // morning _self.setMorning(); } else if (deviceLightEvent.value > 10) { // evening _self.setEvening(); } else { // night _self.setNight(); } });

light sensor

light sensor

light sensor

window.addEventListener("deviceorientation", handleOrientation, true); !function handleOrientation(event) { var alpha = event.alpha; var beta = event.beta; var gamma = event.gamma; ! // Do stuff with the new orientation data }

device orientation

device orientation

alpha

betagamma

window.addEventListener('devicemotion', function(event) { console.log(event.acceleration.x + ' m/s2'); });

device motion

var person = new mozContact(); person.givenName = ["John"]; person.familyName = ["Doe"]; person.nickname = ["No kidding"]; !var person = new mozContact(contactData); // Firefox OS 1.3 takes a parameter to initialize the object if ("init" in person) { // Firefox OS 1.2 and below uses a "init" method to initialize the object person.init(contactData); } !// save the new contact var saving = navigator.mozContacts.save(person); !saving.onsuccess = function() { console.log('new contact saved'); }; !

contacts

var message = "Hi!"; var number = "1234"; // There are several ways to retrieve a valid phone number !navigator.mozMobileMessage.send(number, message);

SMS

regular web stuff!

other standards features also work great in this context:

๏ indexeddb/localstorage

๏ web rtc/getusermedia

๏ css animations

๏ SVg

developer experience

developer experience

we want to give the web a first class development experience,

alongside native ecosystems:

๏ documentation

๏ developer tools

๏ frameworks, templates, libraries

documentation

announce new things, provide useful references, give

recommendations

๏ hacks blog

๏ mdn app center

developer tools

developer tools

๏ firefox’s standard toolbox

๏ app manager

๏ remote debugging

๏ you can run gaia inside desktop firefox too

frameworks and libraries

ready made code to make development easier

๏ mortar app templates

๏ brick: web components for building up interfaces quickly

๏ libraries to solve real world problems, for example localforage

๏ firefox os boilerplate: great resource for learning about fxos

๏ phonegap now has firefox os as a target platform

performance enhancers

performance enhancers

because the web can still be a bit slow

๏ web workers

๏ asm.js

๏ emscripten

web workers

web workers

๏ run scripts in a background thread

๏ don’t block the main thread execution

๏ specify a script to run in the background

๏ pass messages between the two

asm.js

asm.js

๏ just javascript

๏ a very efficient low-level subset

๏ suitable for ahead-of-time optimizing compilation

๏ Unity3d now has asm.js/WebGL support

emscripten

emscripteN

๏ an LLVM to javascript compiler (well, asm.js, specifically)

๏ compile c++ (and others) into JS and run it on the web

๏ = “very fast shit” ™

resources

๏ look up localforage - polyfill for indexeddb/websql/localstorage

๏ simplewebrtc.com - simple webrtc library

๏ animate.css - good library for css animations

๏ raphaeljs.com, d3js.org - svg libraries

๏ emscripten.org - try quakejs.com and unrealengine.com/html5 in

a recent version of firefox, opera or chrome

๏ asmjs.org

๏ MDN app center: developer.mozilla.org/en-US/Apps

๏ hacks blog: hacks.mozilla.org

thanks for listening!!

slideshare.net/chrisdavidmills cmills@mozilla.com // @chrisdavidmills

The end