Firefox OS Web APIs, taking it to the next level
-
date post
18-Oct-2014 -
Category
Technology
-
view
975 -
download
0
description
Transcript of Firefox OS Web APIs, taking it to the next level
![Page 1: Firefox OS Web APIs, taking it to the next level](https://reader034.fdocuments.in/reader034/viewer/2022051512/5442d076b1af9f350a8b4775/html5/thumbnails/1.jpg)
Firefox OS Web APIs, taking it to the next level
Frédéric Harper
Firefox OS Technical Evangelist @ Mozilla
@fharper | outofcomfortzone.net
Kra
kow
Fir
efo
x O
S w
ork
shop –
20
13
-09
-12
![Page 2: Firefox OS Web APIs, taking it to the next level](https://reader034.fdocuments.in/reader034/viewer/2022051512/5442d076b1af9f350a8b4775/html5/thumbnails/2.jpg)
Taking it to the next level
Web APIs
Regular APIs
Privileged APIs
Certified APIs
![Page 3: Firefox OS Web APIs, taking it to the next level](https://reader034.fdocuments.in/reader034/viewer/2022051512/5442d076b1af9f350a8b4775/html5/thumbnails/3.jpg)
Regular APIs
![Page 4: Firefox OS Web APIs, taking it to the next level](https://reader034.fdocuments.in/reader034/viewer/2022051512/5442d076b1af9f350a8b4775/html5/thumbnails/4.jpg)
Regular APIs
packaged hosted
![Page 5: Firefox OS Web APIs, taking it to the next level](https://reader034.fdocuments.in/reader034/viewer/2022051512/5442d076b1af9f350a8b4775/html5/thumbnails/5.jpg)
Regular APIsAmbient Light
![Page 6: Firefox OS Web APIs, taking it to the next level](https://reader034.fdocuments.in/reader034/viewer/2022051512/5442d076b1af9f350a8b4775/html5/thumbnails/6.jpg)
Ambient Light Sensor
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 7: Firefox OS Web APIs, taking it to the next level](https://reader034.fdocuments.in/reader034/viewer/2022051512/5442d076b1af9f350a8b4775/html5/thumbnails/7.jpg)
DEMO Firefox OS Boilerplate App
![Page 8: Firefox OS Web APIs, taking it to the next level](https://reader034.fdocuments.in/reader034/viewer/2022051512/5442d076b1af9f350a8b4775/html5/thumbnails/8.jpg)
Regular APIsBattery Status
![Page 9: Firefox OS Web APIs, taking it to the next level](https://reader034.fdocuments.in/reader034/viewer/2022051512/5442d076b1af9f350a8b4775/html5/thumbnails/9.jpg)
Battery Status
var battery = navigator.battery;
if (battery) {
var batteryLevel = Math.round(battery.level * 100) + "%",
charging = (battery.charging)? “yes" : "no",
chargingTime = parseInt(battery.chargingTime / 60, 10,
dischargingTime = parseInt(battery.dischargingTime / 60, 10);
battery.addEventListener("levelchange", setStatus, false);
battery.addEventListener("chargingchange", setStatus, false);
battery.addEventListener("chargingtimechange", setStatus, false);
}
![Page 10: Firefox OS Web APIs, taking it to the next level](https://reader034.fdocuments.in/reader034/viewer/2022051512/5442d076b1af9f350a8b4775/html5/thumbnails/10.jpg)
DEMO Firefox OS Boilerplate App
![Page 11: Firefox OS Web APIs, taking it to the next level](https://reader034.fdocuments.in/reader034/viewer/2022051512/5442d076b1af9f350a8b4775/html5/thumbnails/11.jpg)
Regular APIsDevice Light
![Page 12: Firefox OS Web APIs, taking it to the next level](https://reader034.fdocuments.in/reader034/viewer/2022051512/5442d076b1af9f350a8b4775/html5/thumbnails/12.jpg)
Device Light
window.addEventListener("lightlevel", function (event) {
console.log(event.value);
});
/*
Possible values:
"normal"
"bright"
"dim"
*/
![Page 13: Firefox OS Web APIs, taking it to the next level](https://reader034.fdocuments.in/reader034/viewer/2022051512/5442d076b1af9f350a8b4775/html5/thumbnails/13.jpg)
Regular APIsNetwork Information
![Page 14: Firefox OS Web APIs, taking it to the next level](https://reader034.fdocuments.in/reader034/viewer/2022051512/5442d076b1af9f350a8b4775/html5/thumbnails/14.jpg)
Network Information
var connection = window.navigator.mozConnection,
online = connection.bandwidth > 0,
metered = connection.metered;
connection.addEventListener("change", updateConnectionStatus);
![Page 15: Firefox OS Web APIs, taking it to the next level](https://reader034.fdocuments.in/reader034/viewer/2022051512/5442d076b1af9f350a8b4775/html5/thumbnails/15.jpg)
Regular APIsNotification
![Page 16: Firefox OS Web APIs, taking it to the next level](https://reader034.fdocuments.in/reader034/viewer/2022051512/5442d076b1af9f350a8b4775/html5/thumbnails/16.jpg)
Notification
var notification = navigator.mozNotification;
notification.createNotification(
"See this",
"This is a notification",
iconURL
);
![Page 17: Firefox OS Web APIs, taking it to the next level](https://reader034.fdocuments.in/reader034/viewer/2022051512/5442d076b1af9f350a8b4775/html5/thumbnails/17.jpg)
A good article on Push Notification
http://j.mp/fxosPushPost
![Page 18: Firefox OS Web APIs, taking it to the next level](https://reader034.fdocuments.in/reader034/viewer/2022051512/5442d076b1af9f350a8b4775/html5/thumbnails/18.jpg)
Regular APIsProximity Sensor
![Page 19: Firefox OS Web APIs, taking it to the next level](https://reader034.fdocuments.in/reader034/viewer/2022051512/5442d076b1af9f350a8b4775/html5/thumbnails/19.jpg)
Proximity Sensor
window.addEventListener("deviceproximity", function (event) {
// Current device proximity, in centimeters
console.log(event.value);
// The maximum sensing distance the sensor is able to report, in centimeters
console.log(event.max);
// The minimum sensing distance the sensor is able to report, in centimeters
console.log(event.min);
});
![Page 20: Firefox OS Web APIs, taking it to the next level](https://reader034.fdocuments.in/reader034/viewer/2022051512/5442d076b1af9f350a8b4775/html5/thumbnails/20.jpg)
Regular APIsScreen Orientation
![Page 21: Firefox OS Web APIs, taking it to the next level](https://reader034.fdocuments.in/reader034/viewer/2022051512/5442d076b1af9f350a8b4775/html5/thumbnails/21.jpg)
Screen Orientation
// Portrait mode:
screen.mozLockOrientation("portrait");
/*
Possible values:
"landscape"
"portrait"
*/
![Page 22: Firefox OS Web APIs, taking it to the next level](https://reader034.fdocuments.in/reader034/viewer/2022051512/5442d076b1af9f350a8b4775/html5/thumbnails/22.jpg)
Screen Orientation
window.addEventListener(“onmozorientationchange”, function (event) {
var orientation = screen.mozOrientation;
}
/*
Possible values:
"landscape-primary"
"landscape-secondary"
"portrait-primary"
"portrait-secondary"
*/
![Page 23: Firefox OS Web APIs, taking it to the next level](https://reader034.fdocuments.in/reader034/viewer/2022051512/5442d076b1af9f350a8b4775/html5/thumbnails/23.jpg)
DEMO Paint app
![Page 24: Firefox OS Web APIs, taking it to the next level](https://reader034.fdocuments.in/reader034/viewer/2022051512/5442d076b1af9f350a8b4775/html5/thumbnails/24.jpg)
Regular APIsVibration
![Page 25: Firefox OS Web APIs, taking it to the next level](https://reader034.fdocuments.in/reader034/viewer/2022051512/5442d076b1af9f350a8b4775/html5/thumbnails/25.jpg)
Vibration
// Vibrate for 1 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 26: Firefox OS Web APIs, taking it to the next level](https://reader034.fdocuments.in/reader034/viewer/2022051512/5442d076b1af9f350a8b4775/html5/thumbnails/26.jpg)
Privileged APIs
![Page 27: Firefox OS Web APIs, taking it to the next level](https://reader034.fdocuments.in/reader034/viewer/2022051512/5442d076b1af9f350a8b4775/html5/thumbnails/27.jpg)
Privileged APIs
packaged
![Page 28: Firefox OS Web APIs, taking it to the next level](https://reader034.fdocuments.in/reader034/viewer/2022051512/5442d076b1af9f350a8b4775/html5/thumbnails/28.jpg)
Privileged APIsBrowser
![Page 29: Firefox OS Web APIs, taking it to the next level](https://reader034.fdocuments.in/reader034/viewer/2022051512/5442d076b1af9f350a8b4775/html5/thumbnails/29.jpg)
Browser
<div>
<span id='location-bar'></span>
<button onclick='go_button_clicked()'>Go</button>
</div>
<div id='load-status'></div>
<div id='security-status'></div>
<img id='favicon'>
<div id='title'></div>
<iframe mozbrowser src=‘yoursite.com' id='browser'></iframe>
![Page 30: Firefox OS Web APIs, taking it to the next level](https://reader034.fdocuments.in/reader034/viewer/2022051512/5442d076b1af9f350a8b4775/html5/thumbnails/30.jpg)
Browser
addEventListener('mozbrowserloadstart', function(e) {
//Do stuff
});
/*
Possible values:
"mozbrowserloadstart“ "mozbrowserloadend"
"mozbrowserlocationchange“ "mozbrowsertitlechange"
"mozbrowsericonchange“ "mozbrowsersecuritychange"
"mozbrowsercontextmenu“ "mozbrowsererror"
"mozbrowserkeyevent“ "mozbrowsershowmodalprompt"
"mozbrowseropenwindow“ "mozbrowserclose"
*/
![Page 31: Firefox OS Web APIs, taking it to the next level](https://reader034.fdocuments.in/reader034/viewer/2022051512/5442d076b1af9f350a8b4775/html5/thumbnails/31.jpg)
Privileged APIsContacts
![Page 32: Firefox OS Web APIs, taking it to the next level](https://reader034.fdocuments.in/reader034/viewer/2022051512/5442d076b1af9f350a8b4775/html5/thumbnails/32.jpg)
Contacts
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 33: Firefox OS Web APIs, taking it to the next level](https://reader034.fdocuments.in/reader034/viewer/2022051512/5442d076b1af9f350a8b4775/html5/thumbnails/33.jpg)
Certified APIs
![Page 34: Firefox OS Web APIs, taking it to the next level](https://reader034.fdocuments.in/reader034/viewer/2022051512/5442d076b1af9f350a8b4775/html5/thumbnails/34.jpg)
Certified APIsWebSMS
![Page 35: Firefox OS Web APIs, taking it to the next level](https://reader034.fdocuments.in/reader034/viewer/2022051512/5442d076b1af9f350a8b4775/html5/thumbnails/35.jpg)
WebSMS
// SMS object
var sms = navigator.mozSMS;
// Send a message
sms.send("123456789", "Hello world!");
// Receive a message
sms.onreceived = function (event) {
// Read message
console.log(event.message);
};
![Page 36: Firefox OS Web APIs, taking it to the next level](https://reader034.fdocuments.in/reader034/viewer/2022051512/5442d076b1af9f350a8b4775/html5/thumbnails/36.jpg)
Certified APIsWebTelephony
![Page 37: Firefox OS Web APIs, taking it to the next level](https://reader034.fdocuments.in/reader034/viewer/2022051512/5442d076b1af9f350a8b4775/html5/thumbnails/37.jpg)
WebTelephony
// Telephony object
var tel = navigator.mozTelephony;
// Check if the phone is muted (read/write property)
console.log(tel.muted);
// Check if the speaker is enabled (read/write property)
console.log(tel.speakerEnabled);
// Place a call
var cal = tel.dial(“123456789”);
![Page 38: Firefox OS Web APIs, taking it to the next level](https://reader034.fdocuments.in/reader034/viewer/2022051512/5442d076b1af9f350a8b4775/html5/thumbnails/38.jpg)
WebTelephony
// Receiving a call
tel.onincoming = function (event) {
var incomingCall = event.call;
// Get the number of the incoming call
console.log(incomingCall.number);
// Answer the call
incomingCall.answer();
};
![Page 39: Firefox OS Web APIs, taking it to the next level](https://reader034.fdocuments.in/reader034/viewer/2022051512/5442d076b1af9f350a8b4775/html5/thumbnails/39.jpg)
WebTelephony
// Disconnect a call
call.hangUp();
// Iterating over calls, and taking action depending on their changed status
tel.oncallschanged = function (event) {
tel.calls.forEach(function (call) {
// Log the state of each call
console.log(call.state);
});
};
![Page 40: Firefox OS Web APIs, taking it to the next level](https://reader034.fdocuments.in/reader034/viewer/2022051512/5442d076b1af9f350a8b4775/html5/thumbnails/40.jpg)
Note that for some of the Web API, you’ll need to add
permission to the manifest file.
![Page 41: Firefox OS Web APIs, taking it to the next level](https://reader034.fdocuments.in/reader034/viewer/2022051512/5442d076b1af9f350a8b4775/html5/thumbnails/41.jpg)
Resources
Web API - Mozilla Developer Network http://j.mp/fxosWebAPI
Packages vs hosted apps – Firefox Marketplace Developer Hubhttp://j.mp/fxosQuickStart
Firefox OS Boilerplate App - GitHubhttp://j.mp/fxosBoilerplate