Firefox OS – Webapps for Your Mobile Phone – http://anders.janmyr.com
Firefox OS – Webapps for Your Mobile Phone – http://anders.janmyr.com
0 1
firefoxos-webapps-for-your-mobile-phone
On Github andersjanmyr / firefoxos-webapps-for-your-mobile-phone
Firefox OS
Webapps for Your Mobile Phone
http://anders.janmyr.com
@andersjanmyr
anders.janmyr@jayway.com
The First
Next
Home Screen
Phone App
Contacts
Music Player
Notifications
Games
Architecture
Architecture
Responsive Design
App Manifest
{
"name": "FxOS Weather Local",
"description": "A Firefox OS Weather App",
"launch_path": "/",
"icons": {
"128": "/icons/128x128.png"
},
"default_locale": "en",
"permissions": {
"geolocation": {
"description": "Access to geolocation"
}
}
}
App Manifest
activities, appcache_path, chrome, csp, default_locale, description, developer, fullscreen, icons, installs_allowed_from, launch_path, locales, messages, name, orientation, origin, permissions, redirects, type, version
Installation API
navigator.mozApps.install()
navigator.mozApps.installPackage()
navigator.mozApps.getSelf()
navigator.mozApps.getInstalled()
navigator.mozApps.checkInstalled()
Installation API
var request = window.navigator.mozApps.install(manifestUrl);
request.onsuccess = function () {
// Save the App object that is returned
var appRecord = this.result;
alert('Installation successful!');
};
request.onerror = function () {
// Display the error information from the DOMError object
alert('Install failed, error: ' + this.error.name);
};
App Cache
CACHE MANIFEST
# DATE 20130929_174017
CACHE:
index.html
css/main.css
css/images/icons-36-white.png
lib/word-maestro.js
...
NETWORK:
*
FALLBACK:
/upload upload-offline.html
App Cache
<html manifest="wordmaestro.appcache">
Geolocation
// Getting the current location
navigator.geolocation.getCurrentPosition(function(position) {
do_something(position.coords.latitude, position.coords.longitude);
});
// Watching the location
var watchID = navigator.geolocation.watchPosition(function(position) {
do_something(position.coords.latitude, position.coords.longitude);
});
Device Storage
var pics = navigator.getDeviceStorage('pictures');
// Let's browse all the images available
var cursor = pics.enumerate();
cursor.onsuccess = function () {
var file = this.result;
// Once we found a file we check if there is other results
if (!this.done) {
this.continue(); // Next result
}
}
cursor.onerror = function () { // Handle error
}
WebSMS
// Simple SMS send
var request = navigator.mozMobileMessage.send(number, message);
// Getting a single message
MozMobileMessageManager.getMessage()
WebMMS
var message = {
receivers: numbers,
subject: "Pic from my wedding"
smil: '<smil><body><par><img src="wedding.jpg" />' +
'<text src="txt" />/<par></body></smil>',
attachments: [ { location: 'txt',
content : new Blob(['Me and my wife'], {type: 'text/plain'})
}, {
location: 'wedding.jpg', content : file
} ] }
// Send the message
navigator.mozMobileMessage.sendMMS(message);
Web Telephony
// 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);
Web Telephony
// Place a call
var call = tel.dial("123456789");
// Above options as direct events
call.onconnected = function () {
// Call was connected
};
call.ondisconnected = function () {
// Call was disconnected
};
// Hang up call
call.hangUp();
Permissions
CSP
Content Security Policy (CSP)
"default-src *; script-src 'self';
object-src 'none'; style-src 'self'"