Bringing the Open Web & APIs to @robertnyman mobile devices - - PowerPoint PPT Presentation

▶
bringing the open web apis to
SMART_READER_LITE
LIVE PREVIEW

Bringing the Open Web & APIs to @robertnyman mobile devices - - PowerPoint PPT Presentation

Feb 01, 2024 229 likes •1.06k views

Bringing the Open Web & APIs to @robertnyman mobile devices with Firefox OS @robertnyman 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

slide-1
SLIDE 1

Bringing the Open Web & APIs to mobile devices with Firefox OS

@robertnyman

slide-2
SLIDE 2
slide-3
SLIDE 3
slide-4
SLIDE 4
slide-5
SLIDE 5

@robertnyman

slide-6
SLIDE 6

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

slide-7
SLIDE 7
slide-8
SLIDE 8
slide-9
SLIDE 9
slide-10
SLIDE 10
slide-11
SLIDE 11
slide-12
SLIDE 12

Using HTML5, CSS and JavaScript together with a number of APIs to build apps and customize the UI.

Firefox OS

slide-13
SLIDE 13

"Movistar to offer the ZTE Open for €69, including €30 of balance for prepaid customers and a 4GB microSD card"

Launch!

slide-14
SLIDE 14

Foxconn

slide-15
SLIDE 15
slide-16
SLIDE 16

Open Web Apps

slide-17
SLIDE 17
slide-18
SLIDE 18
slide-19
SLIDE 19

HTML5 + manifest file (JSON)

slide-20
SLIDE 20

{ "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" }

slide-21
SLIDE 21

MANIFEST CHECKER

http://appmanifest.org/

slide-22
SLIDE 22

Packaged & hosted apps

slide-23
SLIDE 23

WebAPIs

slide-24
SLIDE 24
slide-25
SLIDE 25
slide-26
SLIDE 26

Security Levels

slide-27
SLIDE 27

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

slide-28
SLIDE 28

https://wiki.mozilla.org/ WebAPI#Planned_for_initial_release_of_B2G_.28aka_Basecamp.29

slide-29
SLIDE 29

"permissions": { "contacts": { "description": "Required for autocompletion in the share screen", "access": "readcreate" }, "alarms": { "description": "Required to schedule notifications" } }

slide-30
SLIDE 30

PERMISSIONS

slide-31
SLIDE 31

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

slide-32
SLIDE 32

BATTERY STATUS API

slide-33
SLIDE 33

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); }

slide-34
SLIDE 34

NOTIFICATION

slide-35
SLIDE 35

var notification = navigator.mozNotification; notification.createNotification( "See this", "This is a notification", iconURL );

slide-36
SLIDE 36

SCREEN ORIENTATION API

slide-37
SLIDE 37

// Portrait mode: screen.mozLockOrientation("portrait"); /* Possible values: "landscape" "portrait" "landscape-primary" "landscape-secondary" "portrait-primary" "portrait-secondary" */

slide-38
SLIDE 38

VIBRATION API

slide-39
SLIDE 39

// 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);

slide-40
SLIDE 40

WEB PAYMENTS

slide-41
SLIDE 41

var pay = navigator.mozPay(paymentToken); pay.onsuccess = function (event) { // Weee! Money! };

slide-42
SLIDE 42
slide-43
SLIDE 43

mozmarket.receipts.Prompter({ storeURL: "https://marketplace.mozilla.org/app/myapp", supportHTML: '<a href="mailto:me@example.com">email me@example.com</a>', verify: true });

slide-44
SLIDE 44
slide-45
SLIDE 45

DEVICEPROXIMITY

slide-46
SLIDE 46

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); });

slide-47
SLIDE 47

AMBIENT LIGHT EVENTS

slide-48
SLIDE 48

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); });

slide-49
SLIDE 49

PAGE VISIBILITY

slide-50
SLIDE 50

document.addEventListener("visibilitychange", function () { if (document.hidden) { console.log("App is hidden"); } else { console.log("App has focus"); } });

slide-51
SLIDE 51

Device Storage API Browser API TCP Socket API Contacts API systemXHR

PRIVILEGED APIS

slide-52
SLIDE 52

DEVICE STORAGE API

slide-53
SLIDE 53

var deviceStorage = navigator.getDeviceStorage("videos");

slide-54
SLIDE 54

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; } };

slide-55
SLIDE 55

WEB ACTIVITIES

slide-56
SLIDE 56

Interacting with the camera

slide-57
SLIDE 57
slide-58
SLIDE 58

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!"); };

slide-59
SLIDE 59

{ "activities": { "share": { "filters": { "type": ["image/png", "image/gif"] } "href": "sharing.html", "disposition": "window" } } }

slide-60
SLIDE 60

navigator.mozSetMessageHandler("activity", function (a) { var img = getImageObject(); img.src = a.source.url; // Call a.postResult() or a.postError() if // the activity should return a value });

slide-61
SLIDE 61

Future APIs

slide-62
SLIDE 62
slide-63
SLIDE 63

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

slide-64
SLIDE 64

Web Apps from Mozilla

slide-65
SLIDE 65
slide-66
SLIDE 66

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

slide-67
SLIDE 67
slide-68
SLIDE 68

Web Components & Mozilla Brick

slide-69
SLIDE 69

http://mozilla.github.io/brick/

slide-70
SLIDE 70

<x-flipbox> <div>I'm the front face.</div> <div>And I'm the back face.</div> </x-flipbox>

slide-71
SLIDE 71

// assume that toggleButton and flipBox are already // defined as their respective DOM elements toggleButton.addEventListener("click", function(){ flipBox.toggle(); });

slide-72
SLIDE 72

appbar calendar datepicker deck flipbox iconbutton layout slidebox slider tabbar toggle togglegroup tooltip

slide-73
SLIDE 73

Get started

slide-74
SLIDE 74

https://addons.mozilla.org/firefox/addon/firefox-os- simulator/

slide-75
SLIDE 75

FIREFOX OS BOILERPLATE APP

https://github.com/robnyman/Firefox-OS-Boilerplate-App

slide-76
SLIDE 76

https://marketplace.firefox.com/

slide-77
SLIDE 77

https://marketplace.firefox.com/developers/

slide-78
SLIDE 78

Trying things out

slide-79
SLIDE 79
slide-80
SLIDE 80
slide-81
SLIDE 81

Go have some fun!

slide-82
SLIDE 82

Robert Nyman

robertnyman.com robert@mozilla.com Mozilla

@robertnyman