Firefox OS - Answering global challenges
-
Upload
christian-heilmann -
Category
Education
-
view
5.374 -
download
1
description
Transcript of Firefox OS - Answering global challenges
![Page 1: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/1.jpg)
FIREFOX OSAnswering global challenges
Christian Heilmann (@codepo8) Developerweek, San Francisco, Feb. 2014
![Page 2: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/2.jpg)
SOME FACTS…★ Released in fourteen countries: Spain, Poland, Venezuela,
Colombia, Peru, Uruguay, Mexico, Brasil (more soon)
★ Released with 7 mobile operator partners, 3 hardware partners
★ Hardware options: Alcatel One Touch Fire, ZTE Open, Geeksphone Keon, Geeksphone Peak, LG Fireweb…
★ 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
![Page 3: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/3.jpg)
"Movistar offers the ZTE Open for €69, including €30 of balance for prepaid customers and a 4GB microSD card"
![Page 4: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/4.jpg)
I LIVE BY THE RIVER…
![Page 5: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/5.jpg)
![Page 6: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/6.jpg)
![Page 7: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/7.jpg)
![Page 8: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/8.jpg)
![Page 9: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/9.jpg)
![Page 10: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/10.jpg)
![Page 11: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/11.jpg)
PEOPLE ARE BUSY…
![Page 12: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/12.jpg)
![Page 13: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/13.jpg)
BENEFITS OF HTML5
★ In-built distribution - the web
★ Simple technologies used by lots of developers
★ Evolution of existing practices
★ Open, independent, standardised
![Page 14: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/14.jpg)
PROMISES OF HTML5
![Page 15: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/15.jpg)
LOCKOUT
![Page 16: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/16.jpg)
![Page 17: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/17.jpg)
![Page 18: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/18.jpg)
![Page 19: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/19.jpg)
FIXING HTML ISSUES
![Page 21: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/21.jpg)
ARCHITECTURE
Linux/Gonk (ADB enabled)
Gecko rendering engine
Third Party HTML5 Apps
Web APIs / Web Actitivies
GAIA
![Page 22: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/22.jpg)
- + =
![Page 23: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/23.jpg)
PREDICTABLE HTML5 SUPPORT
![Page 24: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/24.jpg)
SECURITY
![Page 25: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/25.jpg)
AVOIDING USER OVERLOAD…
http://smus.com/installable-webapps/
![Page 26: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/26.jpg)
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" }
![Page 27: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/27.jpg)
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
![Page 29: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/29.jpg)
PERMISSIONS
"permissions": { "contacts": { "description": "Required for autocompletion in the share screen", "access": "readcreate" }, "alarms": { "description": "Required to schedule notifications" } }
![Page 30: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/30.jpg)
WEB APIS
![Page 31: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/31.jpg)
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
![Page 32: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/32.jpg)
BATTERY STATUS API
![Page 33: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/33.jpg)
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); }
![Page 34: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/34.jpg)
VIBRATION API
![Page 35: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/35.jpg)
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);
![Page 36: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/36.jpg)
NETWORK INFORMATION API
![Page 37: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/37.jpg)
NETWORK INFORMATION API
var connection = window.navigator.mozConnection, online = connection.bandwidth > 0, metered = connection.metered;
![Page 38: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/38.jpg)
PAGE VISIBILITY
![Page 39: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/39.jpg)
PAGE VISIBILITY
document.addEventListener("visibilitychange", function () { if (document.hidden) { console.log("App is hidden"); } else { console.log("App has focus"); } });
![Page 40: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/40.jpg)
PUSH NOTIFICATIONS
![Page 41: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/41.jpg)
PUSH NOTIFICATIONS (REQUEST)
![Page 42: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/42.jpg)
PUSH NOTIFICATIONS (RECEIVE)
![Page 43: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/43.jpg)
WEB APIS (PRIVILEGED APPS)
Device Storage API
Browser API
TCP Socket API
Contacts API
systemXHR
![Page 44: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/44.jpg)
CONTACTS API
![Page 45: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/45.jpg)
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") };
![Page 46: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/46.jpg)
!
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
![Page 47: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/47.jpg)
CERTIFIED APPS = THE OS :)
![Page 48: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/48.jpg)
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
![Page 49: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/49.jpg)
WEB ACTIVITIES
![Page 50: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/50.jpg)
![Page 51: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/51.jpg)
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};
![Page 52: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/52.jpg)
APP DISTRIBUTION
![Page 54: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/54.jpg)
INSTALL FROM THE WEB…
![Page 55: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/55.jpg)
DYNAMIC APP WEB SEARCH
![Page 56: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/56.jpg)
DEVELOPMENT ENVIRONMENT
![Page 57: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/57.jpg)
DEVELOPER ENVIRONMENT
![Page 58: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/58.jpg)
FIREFOX OS BOILERPLATE APP
https://github.com/robnyman/Firefox-OS-Boilerplate-App
![Page 59: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/59.jpg)
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
![Page 60: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/60.jpg)
BUILDING BLOCKS?
![Page 64: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/64.jpg)
MOZILLA BRICK<x-flipbox> <div>I'm the front face.</div> <div>And I'm the back face.</div> </x-flipbox> !
//JavaScript toggleButton.addEventListener("click", function() { flipBox.toggle(); });
http://mozilla.github.io/brick/
![Page 65: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/65.jpg)
WHAT’S COOKING?
![Page 66: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/66.jpg)
CORDOVA IMPLEMENTATION APIS
• Camera • Contacts • Device • Device-motion • Geolocation • Orientation • Vibration
![Page 67: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/67.jpg)
CORDOVA IMPLEMENTATION APIS
$ sudo npm install -g cordova
$ cordova create hello com.example.hello HelloWorld
$ cd hello
$ cordova platform add firefoxos
$ cordova prepare firefoxos
![Page 68: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/68.jpg)
CAMERA API$ cordova plugin add org.apache.cordova.camera !
//Cordova code navigator.camera.getPicture(function (src) { var img = document.createElement('img'); img.id = 'slide'; img.src = src; }, function () {}, { destinationType: 1 });
![Page 69: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/69.jpg)
MORE WEB APIS…
Resource lock API
UDP Datagram Socket API
Peer to Peer API
WebNFC
WebUSB
HTTP-cache API
Calendar API
Spellcheck API
LogAPI
Keyboard/IME API
WebRTC
FileHandle API
Sync API
![Page 70: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/70.jpg)
APPMAKER!
Resource lock API
UDP Datagram Socket API
Peer to Peer API
WebNFC
WebUSB
HTTP-cache API
Calendar API
Spellcheck API
LogAPI
Keyboard/IME API
WebRTC
FileHandle API
Sync API
![Page 71: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/71.jpg)
https://marketplace.firefox.com/developers/
DEVELOPER HUB
![Page 72: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/72.jpg)
https://hacks.mozilla.org/category/firefox-os/
MOZILLA DEVELOPER BLOG
![Page 73: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/73.jpg)
https://hacks.mozilla.org/category/videoseries/
FIREFOX OS VIDEO SERIES
![Page 74: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/74.jpg)
https://developer.mozilla.org/en/docs/Mozilla/Firefox_OS
FIREFOX OS WIKI
![Page 75: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/75.jpg)
TO WRAP UP…
![Page 76: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/76.jpg)
https://hacks.mozilla.org/2013/12/write-elsewhere-run-on-firefox/
! Aquarium Plants (Android w/ hand-coded native wrapper) Calc (iOS w/ hand-coded native wrapper) Calcula Hipoteca (Amazon Appstore) Captain Rogers (HTML5 Desktop) Cartelera Panama (Appcelerator Titanium) Fresh Food Finder (PhoneGap) Picross (WebOS) Reditr (Chrome Dev Store) Speed Cube Timer (Blackberry Webworks) Squarez (C++) Touch 12i (Windows Phone/ HTML5)
NOTHING IS WASTED…
![Page 77: Firefox OS - Answering global challenges](https://reader030.fdocuments.in/reader030/viewer/2022012922/53f32d7c8d7f728e318b45b2/html5/thumbnails/77.jpg)
THANKS! CHRIS HEILMANN @CODEPO8