firefox os, the open web & webapis - geek meet västerås
TRANSCRIPT
![Page 2: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/2.jpg)
![Page 4: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/4.jpg)
Mozilla is a global non-profit dedicated to putting you in control of your online experience and shaping the future of the Web for the public good
![Page 6: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/6.jpg)
![Page 7: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/7.jpg)
![Page 8: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/8.jpg)
![Page 9: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/9.jpg)
![Page 10: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/10.jpg)
![Page 11: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/11.jpg)
![Page 12: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/12.jpg)
![Page 13: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/13.jpg)
![Page 14: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/14.jpg)
Using HTML5, CSS and JavaScript together with a number of APIs to build apps and customize the UI.
Firefox OS
![Page 18: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/18.jpg)
Open Web Apps
![Page 19: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/19.jpg)
![Page 20: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/20.jpg)
HTML5 + manifest file ( JSON)
![Page 21: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/21.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 22: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/22.jpg)
Packaged & hosted apps
![Page 23: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/23.jpg)
WebAPIs
![Page 24: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/24.jpg)
![Page 25: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/25.jpg)
![Page 26: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/26.jpg)
Security Levels
![Page 27: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/27.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 28: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/28.jpg)
https://wiki.mozilla.org/WebAPI#Planned_for_initial_release_of_B2G_.28aka_Basecamp.29
![Page 29: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/29.jpg)
"permissions": { "contacts": { "description": "Required for autocompletion in the share screen", "access": "readcreate" }, "alarms": { "description": "Required to schedule notifications" } }
![Page 30: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/30.jpg)
PERMISSIONS
![Page 31: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/31.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 32: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/32.jpg)
BATTERY STATUS API
![Page 33: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/33.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 34: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/34.jpg)
NOTIFICATION
![Page 35: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/35.jpg)
var notification = navigator.mozNotification; notification.createNotification( "See this", "This is a notification", iconURL );
![Page 36: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/36.jpg)
SCREEN ORIENTATION API
![Page 37: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/37.jpg)
// Portrait mode: screen.mozLockOrientation("portrait"); /* Possible values: "landscape" "portrait" "landscape-primary" "landscape-secondary" "portrait-primary" "portrait-secondary" */
![Page 38: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/38.jpg)
VIBRATION API
![Page 39: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/39.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 40: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/40.jpg)
WEB PAYMENTS
![Page 41: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/41.jpg)
var pay = navigator.mozPay(paymentToken); pay.onsuccess = function (event) { // Weee! Money! };
![Page 43: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/43.jpg)
mozmarket.receipts.Prompter({ storeURL: "https://marketplace.mozilla.org/app/myapp", supportHTML: '<a href="mailto:[email protected]">email [email protected]</a>', verify: true });
![Page 44: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/44.jpg)
![Page 45: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/45.jpg)
DEVICEPROXIMITY
![Page 46: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/46.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 47: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/47.jpg)
AMBIENT LIGHT EVENTS
![Page 48: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/48.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 49: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/49.jpg)
PAGE VISIBILITY
![Page 50: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/50.jpg)
document.addEventListener("visibilitychange", function () { if (document.hidden) { console.log("App is hidden"); } else { console.log("App has focus"); } });
![Page 51: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/51.jpg)
Device Storage API
Browser API
TCP Socket API
Contacts API
systemXHR
PRIVILEGED APIS
![Page 52: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/52.jpg)
DEVICE STORAGE API
![Page 53: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/53.jpg)
var deviceStorage = navigator.getDeviceStorage("videos");
![Page 54: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/54.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 55: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/55.jpg)
WEB ACTIVITIES
![Page 56: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/56.jpg)
Interacting with the camera
![Page 57: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/57.jpg)
![Page 58: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/58.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 59: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/59.jpg)
{ "activities": { "share": { "filters": { "type": ["image/png", "image/gif"] } "href": "sharing.html", "disposition": "window" } } }
![Page 60: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/60.jpg)
Future APIs
![Page 61: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/61.jpg)
![Page 62: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/62.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 63: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/63.jpg)
Web Apps from Mozilla
![Page 64: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/64.jpg)
![Page 65: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/65.jpg)
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 67: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/67.jpg)
Web Components & Mozilla Brick
![Page 69: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/69.jpg)
<x-flipbox> <div>I'm the front face.</div> <div>And I'm the back face.</div> </x-flipbox>
![Page 70: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/70.jpg)
// assume that toggleButton and flipBox are already // defined as their respective DOM elements toggleButton.addEventListener("click", function(){ flipBox.toggle(); });
![Page 71: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/71.jpg)
appbar calendar datepicker deck flipbox iconbutton layout
slidebox slider tabbar toggle togglegroup tooltip
![Page 72: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/72.jpg)
Get started
![Page 73: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/73.jpg)
![Page 74: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/74.jpg)
Tools > Web Developer > App Manager
![Page 75: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/75.jpg)
FIREFOX OS BOILERPLATE APP
https://github.com/robnyman/Firefox-OS-Boilerplate-App
![Page 76: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/76.jpg)
https://marketplace.firefox.com/
![Page 77: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/77.jpg)
https://marketplace.firefox.com/developers/
![Page 78: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/78.jpg)
Trying things out
![Page 79: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/79.jpg)
![Page 80: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/80.jpg)
![Page 81: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/81.jpg)
Go have some fun!
![Page 82: Firefox OS, the Open Web & WebAPIs - Geek Meet Västerås](https://reader033.vdocuments.net/reader033/viewer/2022042700/5549a79cb4c905a6758b5319/html5/thumbnails/82.jpg)