This document discusses empowering the mobile web. It begins by defining the mobile web as the web experienced on mobile devices, with considerations for usability and responsiveness. It then addresses concerns about the web versus native apps, and outlines Mozilla's solutions including their app ecosystem with installable apps, the Firefox OS mobile platform, and APIs that allow web apps to access device capabilities. The document also covers developer experience tools and techniques to improve web app performance.

1. EMPOWERING THE
MOBILE WEB
Chris Mills // Mozilla cmills@mozilla.com // @chrisdavidmills

2. 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

3. ๏ heavy metal drummer turned web nerd
๏ tech writer @ mozilla
๏ web tinkerer (HTML, CSS, JS)
๏ accessibility whiner
๏ educator
who am i?
mdn!!

4. what is THE
MOBILE WEB?

5. what is the mobile web?
wap
๏ (blarrrgh, awful...)

6. what is the mobile web?
the web for mobile phones
๏ real mobile browsers
๏ separate web sites for mobiles
๏ lots of ua sniffing crimes

7. 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

8. what is the mobile web?
the web while you’re on the move
๏ geolocation
๏ offline data storage

9. 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

10. what’s the
problem?

11. web versus native, the age-old struggle

12. the usual arguments
native is better?
๏ faster?
๏ more integrated, consistent experience?
๏ better developer ecosystem?
๏ more secure?

13. the usual arguments
๏ web sites accessing other tabs or apps?
๏ web sites accessing
camera
contacts
e-mail?

14. solutions,
moz style

15. solutions
we’ve been working hard on this at mozilla
๏ app ecosystem
๏ firefox os
๏ apis
๏ developer experience and tools
๏ performance

16. app ecosystem

17. 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

18. {
"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"
}
}, manifest example

19. 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

20. 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)

21. 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

22. 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

23. 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

24. firefox os

25. 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

26. 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

27. 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

28. 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

29. apis

30. 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

31. 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)

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

33. web activities

34. 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

35. 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

36. !
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

37. 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

38. alarm + notification

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

40. 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

41. light sensor

42. light sensor

43. 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

44. device orientation
alpha
betagamma

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

46. 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

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

48. regular web stuff!
other standards features also work great in this context:
๏ indexeddb/localstorage
๏ web rtc/getusermedia
๏ css animations
๏ SVg

49. developer
experience

50. developer experience
we want to give the web a first class development experience,
alongside native ecosystems:
๏ documentation
๏ developer tools
๏ frameworks, templates, libraries

51. documentation
announce new things, provide useful references, give
recommendations
๏ hacks blog
๏ mdn app center

52. developer tools
developer tools
๏ firefox’s standard toolbox
๏ app manager
๏ remote debugging
๏ you can run gaia inside desktop firefox too

53. 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

54. performance
enhancers

55. performance enhancers
because the web can still be a bit slow
๏ web workers
๏ asm.js
๏ emscripten

56. 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

57. 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

58. 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” ™

59. 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

60. thanks for
listening!!
slideshare.net/chrisdavidmills cmills@mozilla.com // @chrisdavidmills
The end