![Page 2: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/2.jpg)
![Page 3: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/3.jpg)
![Page 4: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/4.jpg)
![Page 5: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/5.jpg)
![Page 7: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/7.jpg)
![Page 8: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/8.jpg)
![Page 9: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/9.jpg)
![Page 11: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/11.jpg)
![Page 12: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/12.jpg)
![Page 13: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/13.jpg)
Using HTML5, CSS and JavaScript together with a number of APIs to build apps and customize the UI.
Firefox OS
![Page 14: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/14.jpg)
![Page 16: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/16.jpg)
Open Web Apps
![Page 17: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/17.jpg)
![Page 18: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/18.jpg)
HTML5 + manifest file (JSON)
![Page 19: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/19.jpg)
{ "version": "1", "name": "Firefox OS Boilerplate App", "launch_path": "/index.html", "description": "Boilerplate Firefox OS app", "icons": { "16": "/images/logo16.png", "32": "/images/logo32.png", "48": "/images/logo48.png", "64": "/images/logo64.png", "128": "/images/logo128.png" }, "developer": { "name": "Robert Nyman", "url": "http://robertnyman.com" }, "installs_allowed_from": ["*"], "default_locale": "en"}
![Page 20: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/20.jpg)
Packaged & hosted apps
![Page 22: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/22.jpg)
WebAPIs
![Page 23: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/23.jpg)
![Page 25: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/25.jpg)
Security Levels
![Page 26: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/26.jpg)
Web Content
Regular web content
Installed Web App
A regular web app
Privileged Web App
More access, more responsibility
Certified Web App
Device-critical applications
![Page 27: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/27.jpg)
https://wiki.mozilla.org/WebAPI#Planned_for_initial_release_of_B2G_.28aka_Basecamp.29
![Page 28: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/28.jpg)
"permissions": { "contacts": { "description": "Required for autocompletion in the share screen", "access": "readcreate" }, "alarms": { "description": "Required to schedule notifications" } }
![Page 29: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/29.jpg)
Permissions
![Page 30: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/30.jpg)
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
Regular APIs
![Page 31: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/31.jpg)
Battery Status API
![Page 32: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/32.jpg)
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 33: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/33.jpg)
Notifications
![Page 34: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/34.jpg)
var notification = navigator.mozNotification; notification.createNotification( "See this", "This is a notification", iconURL );
![Page 35: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/35.jpg)
Screen orientation API
![Page 36: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/36.jpg)
// Portrait mode: screen.mozLockOrientation("portrait"); /* Possible values: "landscape" "portrait" "landscape-primary" "landscape-secondary" "portrait-primary" "portrait-secondary" */
![Page 37: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/37.jpg)
Vibration API
![Page 38: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/38.jpg)
// 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 39: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/39.jpg)
DeviceProximity
![Page 40: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/40.jpg)
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 41: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/41.jpg)
Ambient Light Events
![Page 42: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/42.jpg)
window.addEventListener("devicelight", function (event) { // The lux values for "dim" typically begin below 50, // and the values for "bright" begin above 10000 console.log(event.value); });
![Page 43: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/43.jpg)
Page Visibility
![Page 44: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/44.jpg)
document.addEventListener("visibilitychange", function () { if (document.hidden) { console.log("App is hidden"); } else { console.log("App has focus"); } });
![Page 45: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/45.jpg)
Device Storage API
Browser API
TCP Socket API
Contacts API
systemXHR
Privileged APIs
![Page 46: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/46.jpg)
DEVICE STORAGE API
![Page 47: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/47.jpg)
var deviceStorage = navigator.getDeviceStorage("videos");
![Page 48: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/48.jpg)
var storage = navigator.getDeviceStorage("videos"), cursor = storage.enumerate(); cursor.onerror = function() { console.error("Error in DeviceStorage.enumerate()", cursor.error.name); }; cursor.onsuccess = function() { if (!cursor.result) return; var file = cursor.result; // If this isn't a video, skip it if (file.type.substring(0, 6) !== "video/") { cursor.continue(); return; } // If it isn't playable, skip it var testplayer = document.createElement("video"); if (!testplayer.canPlayType(file.type)) { cursor.continue(); return; } };
![Page 49: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/49.jpg)
Web Activities
![Page 50: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/50.jpg)
![Page 51: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/51.jpg)
var activity = new MozActivity({ name: "view", data: { type: "image/png", url: ... } });
activity.onsuccess = function () { console.log("Showing the image!"); };activity.onerror = function () { console.log("Can't view the image!"); };
![Page 52: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/52.jpg)
{ "activities": { "share": { "filters": { "type": ["image/png", "image/gif"] } "href": "sharing.html", "disposition": "window" } } }
![Page 53: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/53.jpg)
browseconfigurecostcontroldialopenpickrecordsave-bookmarkshareviewupdatenew:
type:"mail", “websms/sms” or “webcontacts/contact”
![Page 54: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/54.jpg)
Future APIs
![Page 55: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/55.jpg)
![Page 56: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/56.jpg)
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 57: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/57.jpg)
WebNFC
![Page 58: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/58.jpg)
{ "activities": { "nfc-ndef-discovered": { "filters": { "type": "url", "url": { "required":true, "pattern":"https?:.{1,16384}", "patternFlags":"i" } } } }}
![Page 59: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/59.jpg)
navigator.mozSetMessageHandler("activity", handlerFunction);
// Example handler to get the URL from the activity.function handlerFunction(activity) { if (activity.source.data.type == "url") { var url = activity.source.data.url; }}
![Page 60: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/60.jpg)
"permissions": { "nfc": { "access": "readwrite" }}
![Page 61: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/61.jpg)
// Constructing a MozNFCTag objectfunction ndefDiscoveredHandler(activity) { var data = activity.source.data; var tag = navigator.mozNfc.getNFCTag(data.sessionToken); console.log(tag instanceof MozNFCTag); // should print true}
![Page 62: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/62.jpg)
// Reading a MozNFCTag// tag is an instance of MozNFCTagvar request = tag.readNDEF();request.onsuccess = function() { var ndefRecords = request.result; // ndefRecords should be an array of MozNDEFRecord.};
![Page 63: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/63.jpg)
// Sending data to peers via NFCnavigator.mozNfc.onpeerready = function (evt) { var peer = navigator.mozNfc.getNFCPeer(evt.detail); console.log(peer instanceof MozNFCPeer); // should print true;
// construct the NDEF records to send by creating // an array of MozNDEFRecord objecs. var request = peer.sendNDEF(ndefRecords);};
![Page 64: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/64.jpg)
Get started
![Page 65: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/65.jpg)
Firefox OS Boilerplate App
https://github.com/robnyman/Firefox-OS-Boilerplate-App
![Page 66: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/66.jpg)
Choose Device Tools > Web Developer > App Manager
![Page 67: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/67.jpg)
Simulator Tools > Web Developer > App Manager
![Page 68: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/68.jpg)
Inspector Tools > Web Developer > App Manager
![Page 69: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/69.jpg)
Breakpoints Tools > Web Developer > App Manager
![Page 70: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/70.jpg)
Events Tools > Web Developer > App Manager
![Page 71: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/71.jpg)
Debug system apps Tools > Web Developer > App Manager
![Page 72: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/72.jpg)
Debug system apps - Firefox Tools > Web Developer > App Manager
![Page 73: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/73.jpg)
Debug system apps - Firefox on the device Tools > Web Developer > App Manager
![Page 75: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/75.jpg)
![Page 77: Firefox OS learnings & visions, WebAPIs - budapest.mobile](https://reader037.vdocument.in/reader037/viewer/2022110120/55851306d8b42ac60a8b4eba/html5/thumbnails/77.jpg)