SlideShare a Scribd company logo
1 of 58
Download to read offline
FIXING THE MOBILE WEB
Lessons 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-horn
the 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. It
is 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/3rdparty
The architecture is simple, we build on top of the Gonk layer of Android (why
reinvent 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 enable
JavaScript 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. This
is 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.
SCREEN
ORIENTATION 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 second
navigator.vibrate(1000);
// Vibration pattern [vibrationTime, pause,…]
navigator.vibrate([200, 100, 200, 100]);
// Vibrate for 5 seconds
navigator.vibrate(5000);
// Turn off vibration
navigator.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.
APP
DISTRIBUTION
App distribution on Firefox OS works in two ways: as a marketplace and by
distributing 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.
DEVELOPMENT
ENVIRONMENT
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 have
stub 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 help
reviewing it - now it also features a way to make any code in it installable
as an application in the simulator or on a device.
BUILDING
BLOCKS?
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 parts
of 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 technical
information.
THANKS!
CHRIS HEILMANN
@CODEPO8

More Related Content

What's hot

Introduction to Apache Cordova (Phonegap)
Introduction to Apache Cordova (Phonegap)Introduction to Apache Cordova (Phonegap)
Introduction to Apache Cordova (Phonegap)ejlp12
 
Apache Cordova, Hybrid Application Development
Apache Cordova, Hybrid Application DevelopmentApache Cordova, Hybrid Application Development
Apache Cordova, Hybrid Application Developmentthedumbterminal
 
Firefox OS, introduction, concepts, architecture and hello world example
Firefox OS, introduction, concepts, architecture and hello world exampleFirefox OS, introduction, concepts, architecture and hello world example
Firefox OS, introduction, concepts, architecture and hello world exampleDiego Mendonça
 
Angularjs Tutorial for Beginners
Angularjs Tutorial for BeginnersAngularjs Tutorial for Beginners
Angularjs Tutorial for Beginnersrajkamaltibacademy
 
Phonegap/Cordova vs Native Application
Phonegap/Cordova vs Native ApplicationPhonegap/Cordova vs Native Application
Phonegap/Cordova vs Native ApplicationMuhammad Hakim A
 
Cordova: APIs and instruments
Cordova: APIs and instrumentsCordova: APIs and instruments
Cordova: APIs and instrumentsIvano Malavolta
 
Web APIs & Apps - Mozilla
Web APIs & Apps - MozillaWeb APIs & Apps - Mozilla
Web APIs & Apps - MozillaRobert Nyman
 
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGapBuilding Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGapNick Landry
 
Cordova and PhoneGap Insights
Cordova and PhoneGap InsightsCordova and PhoneGap Insights
Cordova and PhoneGap InsightsMonaca
 
HTML5 Can't Do That
HTML5 Can't Do ThatHTML5 Can't Do That
HTML5 Can't Do ThatNathan Smith
 
Cordova / PhoneGap, mobile apps development with HTML5/JS/CSS
Cordova / PhoneGap, mobile apps development with HTML5/JS/CSSCordova / PhoneGap, mobile apps development with HTML5/JS/CSS
Cordova / PhoneGap, mobile apps development with HTML5/JS/CSSGabriel Huecas
 
Introduction phonegap
Introduction phonegapIntroduction phonegap
Introduction phonegapRakesh Jha
 
Advanced programing in phonegap
Advanced programing in phonegapAdvanced programing in phonegap
Advanced programing in phonegapRakesh Jha
 
Phone gap in android technology
Phone gap in android technologyPhone gap in android technology
Phone gap in android technologyVikrant Thakare
 
Apache Cordova: Overview and Introduction
Apache Cordova: Overview and IntroductionApache Cordova: Overview and Introduction
Apache Cordova: Overview and IntroductionGabriele Falasca
 
The web - What it has, what it lacks and where it must go - Istanbul
The web - What it has, what it lacks and where it must go - IstanbulThe web - What it has, what it lacks and where it must go - Istanbul
The web - What it has, what it lacks and where it must go - IstanbulRobert Nyman
 
Cordova 3, apps para android
Cordova 3, apps para androidCordova 3, apps para android
Cordova 3, apps para androidDroidcon Spain
 

What's hot (20)

Introduction to Apache Cordova (Phonegap)
Introduction to Apache Cordova (Phonegap)Introduction to Apache Cordova (Phonegap)
Introduction to Apache Cordova (Phonegap)
 
Apache Cordova, Hybrid Application Development
Apache Cordova, Hybrid Application DevelopmentApache Cordova, Hybrid Application Development
Apache Cordova, Hybrid Application Development
 
Firefox OS, introduction, concepts, architecture and hello world example
Firefox OS, introduction, concepts, architecture and hello world exampleFirefox OS, introduction, concepts, architecture and hello world example
Firefox OS, introduction, concepts, architecture and hello world example
 
Apache Cordova
Apache CordovaApache Cordova
Apache Cordova
 
Angularjs Tutorial for Beginners
Angularjs Tutorial for BeginnersAngularjs Tutorial for Beginners
Angularjs Tutorial for Beginners
 
Phonegap/Cordova vs Native Application
Phonegap/Cordova vs Native ApplicationPhonegap/Cordova vs Native Application
Phonegap/Cordova vs Native Application
 
Cordova: APIs and instruments
Cordova: APIs and instrumentsCordova: APIs and instruments
Cordova: APIs and instruments
 
Web APIs & Apps - Mozilla
Web APIs & Apps - MozillaWeb APIs & Apps - Mozilla
Web APIs & Apps - Mozilla
 
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGapBuilding Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
 
Cordova and PhoneGap Insights
Cordova and PhoneGap InsightsCordova and PhoneGap Insights
Cordova and PhoneGap Insights
 
HTML5 Can't Do That
HTML5 Can't Do ThatHTML5 Can't Do That
HTML5 Can't Do That
 
Cordova / PhoneGap, mobile apps development with HTML5/JS/CSS
Cordova / PhoneGap, mobile apps development with HTML5/JS/CSSCordova / PhoneGap, mobile apps development with HTML5/JS/CSS
Cordova / PhoneGap, mobile apps development with HTML5/JS/CSS
 
Introduction phonegap
Introduction phonegapIntroduction phonegap
Introduction phonegap
 
Advanced programing in phonegap
Advanced programing in phonegapAdvanced programing in phonegap
Advanced programing in phonegap
 
Getting Your Hooks into Cordova
Getting Your Hooks into CordovaGetting Your Hooks into Cordova
Getting Your Hooks into Cordova
 
Front in recife
Front in recifeFront in recife
Front in recife
 
Phone gap in android technology
Phone gap in android technologyPhone gap in android technology
Phone gap in android technology
 
Apache Cordova: Overview and Introduction
Apache Cordova: Overview and IntroductionApache Cordova: Overview and Introduction
Apache Cordova: Overview and Introduction
 
The web - What it has, what it lacks and where it must go - Istanbul
The web - What it has, what it lacks and where it must go - IstanbulThe web - What it has, what it lacks and where it must go - Istanbul
The web - What it has, what it lacks and where it must go - Istanbul
 
Cordova 3, apps para android
Cordova 3, apps para androidCordova 3, apps para android
Cordova 3, apps para android
 

Similar to Fixing the mobile web - Internet World Romania

Firefox OS - HTML5 for a truly world-wide-web
Firefox OS - HTML5 for a truly world-wide-webFirefox OS - HTML5 for a truly world-wide-web
Firefox OS - HTML5 for a truly world-wide-webChristian Heilmann
 
WebAPIs & Apps - Mozilla London
WebAPIs & Apps - Mozilla LondonWebAPIs & Apps - Mozilla London
WebAPIs & Apps - Mozilla LondonRobert Nyman
 
Firefox OS - Answering global challenges
Firefox OS - Answering global challengesFirefox OS - Answering global challenges
Firefox OS - Answering global challengesChristian Heilmann
 
Front-end. Global domination
Front-end. Global dominationFront-end. Global domination
Front-end. Global dominationStfalcon Meetups
 
Andriy Vandakurov about "Frontend. Global domination"
Andriy Vandakurov about  "Frontend. Global domination" Andriy Vandakurov about  "Frontend. Global domination"
Andriy Vandakurov about "Frontend. Global domination" Pivorak MeetUp
 
Øredev2013 - FirefoxOS - the platform HTML5 deserves
Øredev2013 - FirefoxOS - the platform HTML5 deservesØredev2013 - FirefoxOS - the platform HTML5 deserves
Øredev2013 - FirefoxOS - the platform HTML5 deservesChristian Heilmann
 
Empowering the “Mobile Web” with Chris Mills
Empowering the “Mobile Web” with Chris MillsEmpowering the “Mobile Web” with Chris Mills
Empowering the “Mobile Web” with Chris MillsFITC
 
Empowering the Mobile Web - Mills
Empowering the Mobile Web - MillsEmpowering the Mobile Web - Mills
Empowering the Mobile Web - MillsCodemotion
 
Empowering the "mobile web"
Empowering the "mobile web"Empowering the "mobile web"
Empowering the "mobile web"Chris Mills
 
[JavaLand 2015] Developing JavaScript Mobile Apps Using Apache Cordova
[JavaLand 2015] Developing JavaScript Mobile Apps Using Apache Cordova[JavaLand 2015] Developing JavaScript Mobile Apps Using Apache Cordova
[JavaLand 2015] Developing JavaScript Mobile Apps Using Apache CordovaHazem Saleh
 
Developing Native Mobile Apps Using JavaScript, ApacheCon NA 2014
Developing Native Mobile Apps Using JavaScript, ApacheCon NA 2014Developing Native Mobile Apps Using JavaScript, ApacheCon NA 2014
Developing Native Mobile Apps Using JavaScript, ApacheCon NA 2014Hazem Saleh
 
Apache Cordova In Action
Apache Cordova In ActionApache Cordova In Action
Apache Cordova In ActionHazem Saleh
 
Mobile app development using PhoneGap - A comprehensive walkthrough - Touch T...
Mobile app development using PhoneGap - A comprehensive walkthrough - Touch T...Mobile app development using PhoneGap - A comprehensive walkthrough - Touch T...
Mobile app development using PhoneGap - A comprehensive walkthrough - Touch T...RIA RUI Society
 
[Devoxx Morocco 2015] Apache Cordova In Action
[Devoxx Morocco 2015] Apache Cordova In Action[Devoxx Morocco 2015] Apache Cordova In Action
[Devoxx Morocco 2015] Apache Cordova In ActionHazem Saleh
 

Similar to Fixing the mobile web - Internet World Romania (20)

Firefox OS - HTML5 for a truly world-wide-web
Firefox OS - HTML5 for a truly world-wide-webFirefox OS - HTML5 for a truly world-wide-web
Firefox OS - HTML5 for a truly world-wide-web
 
WebAPIs & Apps - Mozilla London
WebAPIs & Apps - Mozilla LondonWebAPIs & Apps - Mozilla London
WebAPIs & Apps - Mozilla London
 
Firefox OS Presentation
Firefox OS PresentationFirefox OS Presentation
Firefox OS Presentation
 
Firefox OS - Answering global challenges
Firefox OS - Answering global challengesFirefox OS - Answering global challenges
Firefox OS - Answering global challenges
 
Front-end. Global domination
Front-end. Global dominationFront-end. Global domination
Front-end. Global domination
 
Frontend. Global domination.
Frontend. Global domination.Frontend. Global domination.
Frontend. Global domination.
 
Pivorak.javascript.global domination
Pivorak.javascript.global dominationPivorak.javascript.global domination
Pivorak.javascript.global domination
 
Andriy Vandakurov about "Frontend. Global domination"
Andriy Vandakurov about  "Frontend. Global domination" Andriy Vandakurov about  "Frontend. Global domination"
Andriy Vandakurov about "Frontend. Global domination"
 
Øredev2013 - FirefoxOS - the platform HTML5 deserves
Øredev2013 - FirefoxOS - the platform HTML5 deservesØredev2013 - FirefoxOS - the platform HTML5 deserves
Øredev2013 - FirefoxOS - the platform HTML5 deserves
 
Empowering the “Mobile Web” with Chris Mills
Empowering the “Mobile Web” with Chris MillsEmpowering the “Mobile Web” with Chris Mills
Empowering the “Mobile Web” with Chris Mills
 
Empowering the Mobile Web - Mills
Empowering the Mobile Web - MillsEmpowering the Mobile Web - Mills
Empowering the Mobile Web - Mills
 
Empowering the "mobile web"
Empowering the "mobile web"Empowering the "mobile web"
Empowering the "mobile web"
 
[JavaLand 2015] Developing JavaScript Mobile Apps Using Apache Cordova
[JavaLand 2015] Developing JavaScript Mobile Apps Using Apache Cordova[JavaLand 2015] Developing JavaScript Mobile Apps Using Apache Cordova
[JavaLand 2015] Developing JavaScript Mobile Apps Using Apache Cordova
 
HTML5 WebWorks
HTML5 WebWorksHTML5 WebWorks
HTML5 WebWorks
 
Developing Native Mobile Apps Using JavaScript, ApacheCon NA 2014
Developing Native Mobile Apps Using JavaScript, ApacheCon NA 2014Developing Native Mobile Apps Using JavaScript, ApacheCon NA 2014
Developing Native Mobile Apps Using JavaScript, ApacheCon NA 2014
 
Appium solution
Appium solutionAppium solution
Appium solution
 
Apache Cordova In Action
Apache Cordova In ActionApache Cordova In Action
Apache Cordova In Action
 
Mobile app development using PhoneGap - A comprehensive walkthrough - Touch T...
Mobile app development using PhoneGap - A comprehensive walkthrough - Touch T...Mobile app development using PhoneGap - A comprehensive walkthrough - Touch T...
Mobile app development using PhoneGap - A comprehensive walkthrough - Touch T...
 
[Devoxx Morocco 2015] Apache Cordova In Action
[Devoxx Morocco 2015] Apache Cordova In Action[Devoxx Morocco 2015] Apache Cordova In Action
[Devoxx Morocco 2015] Apache Cordova In Action
 
DDive- Giuseppe Grasso - mobile su Lotus
DDive- Giuseppe Grasso - mobile su LotusDDive- Giuseppe Grasso - mobile su Lotus
DDive- Giuseppe Grasso - mobile su Lotus
 

More from Christian Heilmann

Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019Christian Heilmann
 
Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilegeChristian Heilmann
 
Seven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC OsloSeven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC OsloChristian Heilmann
 
Artificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynoteArtificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynoteChristian Heilmann
 
Killing the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynoteKilling the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynoteChristian Heilmann
 
Progressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays FinlandProgressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays FinlandChristian Heilmann
 
Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilegeChristian Heilmann
 
Five ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developerFive ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developerChristian Heilmann
 
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Christian Heilmann
 
You learned JavaScript - now what?
You learned JavaScript - now what?You learned JavaScript - now what?
You learned JavaScript - now what?Christian Heilmann
 
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Christian Heilmann
 
Progressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds - DevReachProgressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds - DevReachChristian Heilmann
 
Progressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worldsProgressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worldsChristian Heilmann
 
Non-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humansNon-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humansChristian Heilmann
 
Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center Christian Heilmann
 
CSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlCSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlChristian Heilmann
 
Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017Christian Heilmann
 
The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)Christian Heilmann
 

More from Christian Heilmann (20)

Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019
 
Hinting at a better web
Hinting at a better webHinting at a better web
Hinting at a better web
 
Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilege
 
Seven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC OsloSeven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC Oslo
 
Artificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynoteArtificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynote
 
Killing the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynoteKilling the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynote
 
Progressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays FinlandProgressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays Finland
 
Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilege
 
Five ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developerFive ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developer
 
Taking the P out of PWA
Taking the P out of PWATaking the P out of PWA
Taking the P out of PWA
 
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"
 
You learned JavaScript - now what?
You learned JavaScript - now what?You learned JavaScript - now what?
You learned JavaScript - now what?
 
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"
 
Progressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds - DevReachProgressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds - DevReach
 
Progressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worldsProgressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worlds
 
Non-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humansNon-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humans
 
Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center
 
CSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlCSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. Control
 
Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017
 
The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)
 

Recently uploaded

Education and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptxEducation and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptxraviapr7
 
HED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdfHED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdfMohonDas
 
General views of Histopathology and step
General views of Histopathology and stepGeneral views of Histopathology and step
General views of Histopathology and stepobaje godwin sunday
 
Diploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdfDiploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdfMohonDas
 
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptxSandy Millin
 
How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17Celine George
 
How to Make a Field read-only in Odoo 17
How to Make a Field read-only in Odoo 17How to Make a Field read-only in Odoo 17
How to Make a Field read-only in Odoo 17Celine George
 
UKCGE Parental Leave Discussion March 2024
UKCGE Parental Leave Discussion March 2024UKCGE Parental Leave Discussion March 2024
UKCGE Parental Leave Discussion March 2024UKCGE
 
Quality Assurance_GOOD LABORATORY PRACTICE
Quality Assurance_GOOD LABORATORY PRACTICEQuality Assurance_GOOD LABORATORY PRACTICE
Quality Assurance_GOOD LABORATORY PRACTICESayali Powar
 
Presentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a ParagraphPresentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a ParagraphNetziValdelomar1
 
How to Use api.constrains ( ) in Odoo 17
How to Use api.constrains ( ) in Odoo 17How to Use api.constrains ( ) in Odoo 17
How to Use api.constrains ( ) in Odoo 17Celine George
 
Benefits & Challenges of Inclusive Education
Benefits & Challenges of Inclusive EducationBenefits & Challenges of Inclusive Education
Benefits & Challenges of Inclusive EducationMJDuyan
 
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptxPISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptxEduSkills OECD
 
AUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptxAUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptxiammrhaywood
 
Philosophy of Education and Educational Philosophy
Philosophy of Education  and Educational PhilosophyPhilosophy of Education  and Educational Philosophy
Philosophy of Education and Educational PhilosophyShuvankar Madhu
 
Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...raviapr7
 
Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.raviapr7
 

Recently uploaded (20)

Education and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptxEducation and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptx
 
HED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdfHED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdf
 
Prelims of Kant get Marx 2.0: a general politics quiz
Prelims of Kant get Marx 2.0: a general politics quizPrelims of Kant get Marx 2.0: a general politics quiz
Prelims of Kant get Marx 2.0: a general politics quiz
 
General views of Histopathology and step
General views of Histopathology and stepGeneral views of Histopathology and step
General views of Histopathology and step
 
Diploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdfDiploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdf
 
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
 
How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17
 
How to Make a Field read-only in Odoo 17
How to Make a Field read-only in Odoo 17How to Make a Field read-only in Odoo 17
How to Make a Field read-only in Odoo 17
 
UKCGE Parental Leave Discussion March 2024
UKCGE Parental Leave Discussion March 2024UKCGE Parental Leave Discussion March 2024
UKCGE Parental Leave Discussion March 2024
 
Quality Assurance_GOOD LABORATORY PRACTICE
Quality Assurance_GOOD LABORATORY PRACTICEQuality Assurance_GOOD LABORATORY PRACTICE
Quality Assurance_GOOD LABORATORY PRACTICE
 
Presentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a ParagraphPresentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a Paragraph
 
How to Use api.constrains ( ) in Odoo 17
How to Use api.constrains ( ) in Odoo 17How to Use api.constrains ( ) in Odoo 17
How to Use api.constrains ( ) in Odoo 17
 
Benefits & Challenges of Inclusive Education
Benefits & Challenges of Inclusive EducationBenefits & Challenges of Inclusive Education
Benefits & Challenges of Inclusive Education
 
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptxPISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
 
AUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptxAUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptx
 
Personal Resilience in Project Management 2 - TV Edit 1a.pdf
Personal Resilience in Project Management 2 - TV Edit 1a.pdfPersonal Resilience in Project Management 2 - TV Edit 1a.pdf
Personal Resilience in Project Management 2 - TV Edit 1a.pdf
 
Philosophy of Education and Educational Philosophy
Philosophy of Education  and Educational PhilosophyPhilosophy of Education  and Educational Philosophy
Philosophy of Education and Educational Philosophy
 
Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...
 
Finals of Kant get Marx 2.0 : a general politics quiz
Finals of Kant get Marx 2.0 : a general politics quizFinals of Kant get Marx 2.0 : a general politics quiz
Finals of Kant get Marx 2.0 : a general politics quiz
 
Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.
 

Fixing the mobile web - Internet World Romania

  • 1. FIXING THE MOBILE WEB Lessons 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.
  • 2. 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.
  • 3. 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.
  • 4. 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-horn the web into it instead of starting with the web stack.
  • 5. 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. It is a daring endeavour and is already a reality.
  • 6. 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.
  • 7. "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.
  • 8. 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.
  • 9. ARCHITECTURE Linux/Gonk (ADB enabled) Gecko rendering engine Third Party HTML5 Apps Web APIs / Web Actitivies GAIA PlatformApps/3rdparty The architecture is simple, we build on top of the Gonk layer of Android (why reinvent 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.
  • 10. - + = In essence it is Android without the Java.
  • 11. 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.
  • 12. 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.
  • 13. 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.
  • 14. 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.
  • 15. 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.
  • 16. 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.
  • 17. HARDWARE ACCESS Web APIs are standards proposals and agreements with the W3C to enable JavaScript to access hardware and sensors of devices.
  • 18. 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.
  • 19. BATTERY STATUS API The battery status API allows you to read the current state of the battery. This is very useful to build apps that warn the user before losing data.
  • 20. 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.
  • 21. SCREEN ORIENTATION API The screen orientation API allows you to lock the orientation of your app.
  • 22. SCREEN ORIENTATION API // Portrait mode: screen.mozLockOrientation("portrait"); /* Possible values: "landscape" "portrait" "landscape-primary" "landscape-secondary" "portrait-primary" "portrait-secondary" */
  • 23. VIBRATION API The vibration API allows you to make a phone vibrate.
  • 24. VIBRATION API // Vibrate for one second navigator.vibrate(1000); // Vibration pattern [vibrationTime, pause,…] navigator.vibrate([200, 100, 200, 100]); // Vibrate for 5 seconds navigator.vibrate(5000); // Turn off vibration navigator.vibrate(0);
  • 25. 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.
  • 26. NETWORK INFORMATION API var connection = window.navigator.mozConnection, online = connection.bandwidth > 0, metered = connection.metered;
  • 27. ☼ AMBIENT LIGHT EVENTS The ambient light API allows you to detect if it is dark or light around the device and switch design accordingly.
  • 28. 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); });
  • 29. PAGE VISIBILITY The page visibility API tells you if the app is currently open and used or the user has another one in focus.
  • 30. PAGE VISIBILITY document.addEventListener("visibilitychange", function () { if (document.hidden) { console.log("App is hidden"); } else { console.log("App has focus"); } });
  • 31. 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.
  • 32. CONTACTS API For example, privileged apps can create new contacts on the fly.
  • 33. 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") };
  • 34. 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.
  • 35. CERTIFIED APPS = THE OS :) We used these to build all the apps that make up the operating system.
  • 36. 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.
  • 37. 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.
  • 38. 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.
  • 39. 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 };
  • 40. 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.
  • 41. APP DISTRIBUTION App distribution on Firefox OS works in two ways: as a marketplace and by distributing directly on the web using then Open Web Apps API.
  • 42. FIREFOX OS MARKETPLACE https://marketplace.firefox.com/ The marketplace works like any other out there: submit your app, get found, get rich.
  • 43. 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.
  • 44. 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.
  • 45. DEVELOPMENT ENVIRONMENT 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
  • 46. 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 have stub code for all activities and you can just comment out what you don’t need.
  • 47. 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.
  • 48. 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 help reviewing it - now it also features a way to make any code in it installable as an application in the simulator or on a device.
  • 49. BUILDING BLOCKS? 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.
  • 50. 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.
  • 51. CERTIFIED APPS BUILDING BLOCKS http://buildingfirefoxos.com/ This is a great resource to get inspiration for your own apps.
  • 52. 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.
  • 53. RESOURCES Where can you go if you want to learn more?
  • 54. 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.
  • 55. 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.
  • 56. https://hacks.mozilla.org/category/videoseries/ FIREFOX OS VIDEO SERIES We’ve recorded a series of short video interviews showing the different parts of Firefox OS. All of those are on YouTube.
  • 57. 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 technical information.