FIXING THE MOBILE WEBLessons learned building Firefox OS

Christian Heilmann, Mozilla (@codepo8)Internet & Mobile World, Bucharest, Romania 10/10/2013

Today I am going to talk about how building FirefoxOS helps Mozilla fix a few of the issues we have with the mobile web.

HTML5 WORRIES…

★ Performance

★ Fragmentation

★ Security

★ Access to hardware

★ Painless app updates

★ Development environment

When talking to people about HTML5, I get a the same questions and concerns over and over again.

NO WEB GOODIES FOR YOU!

All of this is annoying as the web has a lot of benefits closed environments do not have like ease of distribution and simple update mechanisms.

WRONG DIRECTION

The issue with a lot of mobile web attempts is that they are going in the wrong direction: you have a high fidelity OS and then you try to shoe-hornthe web into it instead of starting with the web stack.

FIREFOX OS

Firefox OS is Mozilla’s attempt to break the closed nature of mobile computing and bring the web to phones and tablets a s first class citizen. Itis a daring endeavour and is already a reality.

SOME FACTS…★ Released in four countries: Spain, Poland, Venezuela and

Columbia (more to come very soon)

★ 18 mobile operator partners, 6 hardware partners

★ Hardware options: Alcatel One Touch Fire, ZTE Open, Geeksphone Keon, Geeksphone Peak…

★ Aimed at emerging markets/low end market

★ Aimed to be an alternative to feature phones and unavailable closed environments.

★ Open source - it is all on GitHub

Firefox OS is not a test, it is not an idea. It is already very real.

"Movistar offers the ZTE Open for €69, including €30 of balance for prepaid customers and a 4GB microSD card"

Firefox OS devices are extremely affordable and aimed at people who have not yet access to the web on the go. This also meant keeping them low spec which is good. It forces us to optimise wherever we can.

PERFORMANCE AND FRAGMENTATION

A lot of the performance problems have been solved by Firefox OS’s archi-tecture and we are trying hard to work around the fragmentation issue by proposing everything we do as a standard.

ARCHITECTURE

Linux/Gonk (ADB enabled)

Gecko rendering engine

Third Party HTML5 Apps

Web APIs / Web Actitivies

GAIA

PlatformApps / 3rd party

The architecture is simple, we build on top of the Gonk layer of Android (whyreinvent and open architecture) and added the Gecko rendering engine. On top of that we have Web APIs and Activities, GAIA, the UI of Firefox OS and third party HTML5 apps.

- + =

In essence it is Android without the Java.

LOCKOUT

This works around one of the biggest issues of HTML5 support: stock browsers. Many basic features of HTML5 are not available across platforms as the browsers are hard-wired to certain versions of the OS and do not get upgraded.

PREDICTABLE HTML5 SUPPORT

In the case of Firefox OS this is not an issue, as the browser engine is the OS.This was also the original idea of OSX.

SECURITY

Security is a big issue when it comes to HTML5. The web as it is now is suffering from some massive security holes which is why we can not allow any JavaScript on the web to access for example the camera of your phone.

APPLICATION MANIFEST{ "version": "1.0", "name": "MozillaBall", "description": "Exciting Open Web development action!", "icons": { "16": "/img/icon-16.png", "48": "/img/icon-48.png", "128": "/img/icon-128.png" }, "developer": { "name": "Mozilla Labs", "url": "http://mozillalabs.com" }, "installs_allowed_from": ["*"], "appcache_path": "/cache.manifest", "locales": { "es": { "description": "¡Acción abierta emocionante del desarrollo del Web!", "developer": { "url": "http://es.mozillalabs.com/" } } }, "default_locale": "en"}

HTML5 apps need to have a manifest file to be Firefox OS apps. In this one you define what your app is, but also what kind of hardware access it needs.

Privileged Web App

More access, more responsibility

Web Content

Regular web content

APPLICATIONS

Installed Web App

A regular web app

Certified Web App

Device-critical applications

There are four kind of apps in Firefox OS - ranging from simple web content to fully trusted apps that have access to all the hardware.

PERMISSIONS

"permissions": { "contacts": { "description": "Required for autocompletion in the share screen", "access": "readcreate" }, "alarms": { "description": "Required to schedule notifications" }}

You need to declare all the permissions you want in your manifest file.

HARDWARE ACCESS

Web APIs are standards proposals and agreements with the W3C to enableJavaScript to access hardware and sensors of devices.

WEB APIS (FOR ALL)

Vibration API (W3C)

Screen Orientation

Geolocation API

Mouse Lock API (W3C)

Open WebApps

Network Information API (W3C)

Battery Status API (W3C)

Alarm API

Web Activities

Push Notifications API

WebFM API

WebPayment

IndexedDB (W3C)

Ambient light sensor

Proximity sensor

Notification

These are a few of the APIs defined with the standards bodies to allow you access to more than the screen. Some of the are enabled across browsers, all of them in Firefox OS for any web content.

BATTERY STATUS API

The battery status API allows you to read the current state of the battery. Thisis very useful to build apps that warn the user before losing data.

BATTERY STATUS API

var battery = navigator.battery;if (battery) { var batteryLevel = Math.round(battery.level * 100) + "%", charging = (battery.charging)? "" : "not ", chargingTime = parseInt(battery.chargingTime / 60, 10), dischargingTime = parseInt(battery.dischargingTime / 60, 10); // Set events battery.addEventListener("levelchange", setStatus, false); battery.addEventListener("chargingchange", setStatus, false); battery.addEventListener("chargingtimechange", setStatus, false); battery.addEventListener("dischargingtimechange", setStatus, false); }

You have various properties and events to listen to - this works across APIs.

SCREENORIENTATION API

The screen orientation API allows you to lock the orientation of your app.

SCREEN ORIENTATION API

// Portrait mode:screen.mozLockOrientation("portrait");

/* Possible values: "landscape" "portrait" "landscape-primary" "landscape-secondary" "portrait-primary" "portrait-secondary"*/

VIBRATION API

The vibration API allows you to make a phone vibrate.

VIBRATION API

// Vibrate for one secondnavigator.vibrate(1000);

// Vibration pattern [vibrationTime, pause,…]navigator.vibrate([200, 100, 200, 100]);

// Vibrate for 5 secondsnavigator.vibrate(5000);

// Turn off vibrationnavigator.vibrate(0);

NETWORK INFORMATION API

The Network Information API tells you what the connection is and if it is metered or not. This helps your users not to spend too much money on downloads and defer upgrades to when they are connected to WiFi.

NETWORK INFORMATION API

var connection = window.navigator.mozConnection, online = connection.bandwidth > 0, metered = connection.metered;

☼ AMBIENT LIGHT EVENTS

The ambient light API allows you to detect if it is dark or light around the device and switch design accordingly.

AMBIENT LIGHT EVENTS

window.addEventListener("devicelight", function (event) { // The level of the ambient light in lux // The lux values for "dim" typically begin below 50, // and the values for "bright" begin above 10000 console.log(event.value);});

PAGE VISIBILITY

The page visibility API tells you if the app is currently open and used or the user has another one in focus.

PAGE VISIBILITY

document.addEventListener("visibilitychange", function () { if (document.hidden) { console.log("App is hidden"); } else { console.log("App has focus"); }});

WEB APIS (PRIVILEGED APPS)

Device Storage API

Browser API

TCP Socket API

Contacts API

systemXHR

Privileged apps are those that went through a review by the Mozilla security team and thus get more access to the hardware.

CONTACTS API

For example, privileged apps can create new contacts on the fly.

CONTACTS API

var contact = new mozContact();contact.init({name: "Tom"});

var request = navigator.mozContacts.save(contact);request.onsuccess = function() { console.log("Success");};

request.onerror = function() { console.log("Error")};

WebTelephony

WebSMS

Idle API

Settings API

Power Management API

Mobile Connection API

WiFi Information API

WEB APIS (CERTIFIED APPS)

WebBluetooth

Permissions API

Network Stats API

Camera API

Time/Clock API

Attention screen

Voicemail

Certified applications are the ones built by Mozilla and partners. These needed APIs to access all the hardware.

CERTIFIED APPS = THE OS :)

We used these to build all the apps that make up the operating system.

CERTIFIED APPS = THE OS :)Dialer

Contacts

Settings

SMS

Web browser

Gallery

Video Player

Music Player

E-mail (POP, IMAP)

Calendar

Alarm Clock

Camera

Notes

First Run Experience

Notifications

Home Screen

Mozilla Marketplace

System Updater

Localization Support

Like these.

WEB ACTIVITIES

Web activities are a way to get access to the hardware without going through a review process of your app. Instead of accessing the hardware directly, the user will access it for you.

You can for example ask for a photo and the user then picks from their gallery or takes a photo with the app of their choice. They then return automatically to your app with the photo as a file blob.

GET A PHOTO?

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

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};

FIREFOX OS + ANDROID!

Activities allow for an app ecosystem on the device. You can ask the user to become the app to do certain tasks and defer to other apps instead of doing everything yourself. They also work on Android when you install Firefox.

APPDISTRIBUTION

App distribution on Firefox OS works in two ways: as a marketplace and bydistributing directly on the web using then Open Web Apps API.

FIREFOX OS MARKETPLACE

https://marketplace.firefox.com/

The marketplace works like any other out there: submit your app, get found, get rich.

INSTALL FROM THE WEB…

var installapp = navigator.mozApps.install(manifestURL); installapp.onsuccess = function(data) { // App is installed }; installapp.onerror = function() { // App wasn't installed, info is in // installapp.error.name };

You can also re-use already existing web fame by adding a “install app” button anywhere on the web calling this JavaScript. This means your SEO efforts of the last years were not in vain.

DYNAMIC APP WEB SEARCH

Firefox OS has a unique way to search apps. Instead of just searching by name and description, the search scans the web for apps and links them to the intent of the user. For example a search for a band would find music apps.

DEVELOPMENTENVIRONMENT

The big question about HTML5 is always about the development environment.Firefox OS has no SDK or IDE, but we built a few tools to get you started faster

FIREFOX OS BOILERPLATE APP

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

The Boilerplate App is a great way to start with Web Activities. In it you havestub code for all activities and you can just comment out what you don’t need.

FIREFOX OS SIMULATOR

https://addons.mozilla.org/firefox/addon/firefox-os-simulator/

The Simulator is and add-on for Firefox that runs a virtual phone on your desktop, complete with debugging tools and the option to send apps from the simulator to a real device.

PROTOTYPING WITH JSFIDDLE

https://hacks.mozilla.org/2013/08/using-jsfiddle-to-prototype-firefox-os-apps/

1. Write your code as a JSFiddle

2. Append /webapp.manifest to your Fiddle URL and paste this link into the Firefox OS simulator to install the app

3. Alternatively, append /fxos.html to your Fiddle URL to get an install page like a typical Firefox OS hosted application

JSFiddle is not only a great way to try out some functionality or ask for helpreviewing it - now it also features a way to make any code in it installable as an application in the simulator or on a device.

BUILDINGBLOCKS?

Many people ask us for building blocks like the iOS ones. We don’t want to stifle people in their creativity and there is no “one” Firefox OS look and feel - there are guidelines - but here are some ideas.

CERTIFIED APPS BUILDING BLOCKS

http://buildingfirefoxos.com/The creation of the OS-internal apps has been documented and all the widgets used in their creation are available at buildingfirefoxos.com.

CERTIFIED APPS BUILDING BLOCKS

http://buildingfirefoxos.com/This is a great resource to get inspiration for your own apps.

MOZILLA BRICK

http://mozilla.github.io/brick/Mozilla Brick is a library to allow you to build apps from web components. The benefit here is that your apps will perform much, much better and you don’t need to write behaviour yourself.

RESOURCES

Where can you go if you want to learn more?

https://marketplace.firefox.com/developers/

DEVELOPER HUB

The developer hub is the one-stop-shop for Firefox OS. You find design guidelines, demo apps and learn how to build and publish your apps.

https://hacks.mozilla.org/category/firefox-os/

MOZILLA DEVELOPER BLOG

The Mozilla hacks blog is our technical blog with lots of posts about new and exciting features in Firefox and the OS.

https://hacks.mozilla.org/category/videoseries/

FIREFOX OS VIDEO SERIES

We’ve recorded a series of short video interviews showing the different partsof Firefox OS. All of those are on YouTube.

https://developer.mozilla.org/en/docs/Mozilla/Firefox_OS

FIREFOX OS WIKI

Last but not least, there is the Firefox OS wiki with all the in-depth technicalinformation.

THANKS!CHRIS HEILMANN@CODEPO8