WebAPIs + Brick - WebBR2013
•
2 likes•1,218 views
This document discusses Firefox OS and open web apps. It provides an overview of Firefox OS as a mobile platform based on open web technologies. It describes how apps are built using HTML, CSS and JavaScript instead of native languages. It outlines several web APIs available to Firefox OS apps for accessing device capabilities like vibration, notifications, sensors and storage. It also discusses app security and privileges as well as features for packaging and installing apps. The document provides resources for developing Firefox OS apps including links to documentation, tools, components and forums for getting help.
Report
Share
WebAPIs + Brick - WebBR2013
- 5. A Plataforma é a Web
- 7. Plataformas
- 8. { "version": "1.0", "name": “Mozilla ", "description": "Exciting Open Web development action!", "icons": { "16": "/img/icon-16.png", "48": "/img/icon-48.png", "128": "/img/icon-128.png" }, "developer": { "name": "Mozilla Labs", "url": "http://mozillalabs.com" }, "installs_allowed_from": ["*"], "appcache_path": "/cache.manifest", "locales": { "es": { "description": "¡Acción abierta emocionante del desarrollo del Web!", "developer": { "url": "http://es.mozillalabs.com/" } }, "pt-BR": { "description": "Descrição da sua aplicação!", "developer": { "url": "http://pt-BR.mozillalabs.com/" } } }, "default_locale": "en" }
- 10. Packaged vs. Hosted Apps
- 11. WebAPIs
- 12. Segurança
- 13. Aplicações Conteúdo Web Apps Web Privilegiadas Conteúdo Web comum Mais acesso, mais responsabilidades App Web Instalada App Web Certificada Uma App Web comum Apps críticas aos aparelho (hardware)
- 15. "permissions": { "contacts": { "description": "Required for autocompletion in the share screen", "access": "readcreate" }, "alarms": { "description": "Required to schedule notifications" } }
- 16. WEB APIs
- 17. WEB APIS (PARA TODOS) Vibration API (W3C) Web Activities Screen Orientation Push Notifications API Geolocation API WebFM API Mouse Lock API (W3C) WebPayment Open WebApps IndexedDB (W3C) Network Information API (W3C) Ambient light sensor Battery Status API (W3C) Proximity sensor Alarm API Notification
- 19. 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); }
- 20. NOTIFICAÇÃO
- 21. var notification = navigator.mozNotification; notification.createNotification( "See this", "This is a notification", iconURL );
- 23. // Portrait mode: screen.mozLockOrientation("portrait"); /* Possible values: "landscape" "portrait" "landscape-primary" "landscape-secondary" "portrait-primary" "portrait-secondary" */
- 24. VIBRATION API
- 25. // 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);
- 27. document.addEventListener("visibilitychange", function (event) { if (document.hidden) { console.log(event."App is hidden"); } else { console.log(event."App has focus"); } });
- 28. NETWORK INFO API
- 29. var connection = window.navigator.mozConnection, online = connection.bandwidth > 0, metered = connection.metered;
- 30. PROXIMIDADE
- 31. 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); });
- 33. window.addEventListener("devicelight", function (event) { // The level of the ambient light in lux console.log(event.value); });
- 34. 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); });
- 35. WEB APIS (APPS PRIVILEGIADAS) Device Storage API Browser API TCP Socket API Contacts API systemXHR
- 36. DEVICE STORAGE
- 37. var deviceStorage = navigator.getDeviceStorage("videos");
- 38. // "external", "shared", or "default". deviceStorage.type; // Add a file - returns DOMRequest with file name deviceStorage.add(blob); // Same as .add, with provided name deviceStorage.addNamed(blob, name); // Returns DOMRequest/non-editable File object deviceStorage.get(name); // Returns editable FileHandle object deviceStorage.getEditable(name); // Returns DOMRequest with success or failure deviceStorage.delete(name); // Enumerates files deviceStorage.enumerate([directory]); // Enumerates files as FileHandles deviceStorage.enumerateEditable([directory]);
- 39. 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; } };
- 40. API DE CONTATOS
- 41. var addContact = document.querySelector("#add-contact"); if (addContact) { addContact.onclick = function () { var newContact = new MozActivity({ name: "new", // Possibly add-contact in future versions data: { type: "webcontacts/contact", params: { // Will possibly move to be direct properties under "data" giveName: "Fabio", familyName: "Magnoni", tel: "+5519988013586", email: "fabio@mozilla.com", address: "Campinas", note: “Se tiver cerveja envolvida, pode entrar em contato :)”, company: "Mozilla" } } }); } }
- 43. 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
- 44. WEB ACTIVITIES
- 46. 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!"); };
- 47. { "activities": { "share": { "filters": { "type": ["image/png", "image/gif"] } "href": "sharing.html", "disposition": "window" } } }
- 48. var register = navigator.mozRegisterActivityHandler({ name: "view", disposition: "inline", filters: { type: "image/png" } }); register.onerror = function () { console.log("Failed to register activity"); }
- 49. 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 });
- 51. Como Instalar pela WEB var install app = navigator.mozApps.install(manifestURL); installapp.onsucess = function(data) { //App is installed }; installapp.onerror = function() { //App wasn’t installed, info is in // installapp.error.name };
- 52. APIs Futuras
- 53. Resource lock API Spellcheck API UDP Datagram Socket API LogAPI Peer to Peer API Keyboard/IME API WebNFC WebRTC WebUSB FileHandle API HTTP-cache API Sync API Calendar API
- 55. o/ Docs e Ferramentas o/
- 61. Recursos