Empowering the "mobile web"
Upcoming SlideShare
Loading in...5
×
 

Empowering the "mobile web"

on

  • 397 views

 

Statistics

Views

Total Views
397
Views on SlideShare
395
Embed Views
2

Actions

Likes
1
Downloads
3
Comments
0

1 Embed 2

https://twitter.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Empowering the "mobile web" Empowering the "mobile web" Presentation Transcript

  • EMPOWERING THE
 MOBILE WEB Chris Mills // Mozilla cmills@mozilla.com // @chrisdavidmills
  • don’t stress about taking notes: ๏ These slides are all at slideshare.net/chrisdavidmills ๏ developer.mozilla.org ๏ @chrisdavidmills ๏ cmills@mozilla.com ๏ #mdn irc channel on mozilla irc ๏ dev-mdc@lists.mozilla.org mailing list
  • ๏ heavy metal drummer turned web nerd ๏ tech writer @ mozilla ๏ web tinkerer (HTML, CSS, JS) ๏ accessibility whiner ๏ educator who am i? mdn!!
  • what is THE
 MOBILE WEB?
  • what is the mobile web? wap ๏ (blarrrgh, awful...)
  • what is the mobile web? the web for mobile phones ๏ real mobile browsers ๏ separate web sites for mobiles ๏ lots of ua sniffing crimes
  • what is the mobile web? the web as it is experienced on mobiles/tablets/etc. ๏ more thought given to ux; to context ๏ progressive enhancement ๏ feature detection ๏ responsive
  • what is the mobile web? the web while you’re on the move ๏ geolocation ๏ offline data storage
  • what is the mobile web? web technologies providing “native” capabilities ๏ installable apps ๏ control over device hardware and key services ๏ app ecosystem/marketplace ๏ fully functional offline apps ๏ high fps performance
  • what’s the
 problem?
  • web versus native, the age-old struggle
  • the usual arguments native is better? ๏ faster? ๏ more integrated, consistent experience? ๏ better developer ecosystem? ๏ more secure?
  • the usual arguments ๏ web sites accessing other tabs or apps? ๏ web sites accessing
 camera
 contacts
 e-mail?
  • solutions,
 moz style
  • solutions we’ve been working hard on this at mozilla ๏ app ecosystem ๏ firefox os ๏ apis ๏ developer experience and tools ๏ performance
  • app ecosystem
  • installable apps not a new phenomenon, but... ๏ pretty recent concept for the web ๏ manifest file defines app (manifest.webapp) ๏ installation controlled by app installation and management apis
  • { "version": "0.1", "name": "To-do alarms", "description": "My awesome open web app", "launch_path": "/index.html", "icons": { "128": "/img/icon-128.png" }, "developer": { "name": "Chris Mills", "url": "http://yourawesomeapp.com" }, "locales": { "es": { "description": "Su nueva aplicación impresionante Open Web", "developer": { "url": "http://yourawesomeapp.com" } }, manifest example
  • var manifest_url = location.href.substring(0, location.href.lastIndexOf("/")) + "/manifest.webapp"; function install() { // install the app var install = navigator.mozApps.install(manifest_url); install.onsuccess = function(data) { // App is installed, do something if you like }; install.onerror = function() { // App wasn't installed, info is in // install.error.name alert(install.error.name); }; }; installation example
  • app types Apps can be: ๏ hosted: just like a normal web site, but with a manifest and install functionality ๏ packaged: zipped up, hosted somewhere (like the firefox marketplace)
  • app stores you are free to distribute your apps how you like ๏ marketplace.firefox.com ๏ team of reviewers verify apps before they are accepted ๏ you can also host your own apps ๏ or set up your own marketplace
  • app payments now you can charge money for web apps ๏ payments api (mozpay) that uses the bango payments provider ๏ receipt verification to make sure payments are completed ๏ in-app payments also available
  • web runtime web rt allows installable apps to work on other platforms ๏ apk wrapper for android apps, which includes native equivalents where possible ๏ similar native wrappers for desktop platforms coming up ๏ firefox marketplace/Firefox will generate these
  • firefox os
  • firefox os! our mobile platform ๏ totally built on open web technologies ๏ mostly standards ๏ some are new inventions, with standardization being worked on ๏ designed for low power devices
  • successes so far lots of success so far: ๏ 4 hardware partners ๏ 16 launches in 15 countries ๏ 30% market share with TEF in Uruguay; 12% market share with TEF in Colombia ๏ vibrant developer community ๏ developer preview devices available
  • architecture three main layers ๏ gonk: linux kernel plus hardware abstraction layer ๏ gecko: entire system runs on our rendering engine ๏ gaia: ui plus default system apps
  • architecture everything runs in gecko ๏ each app runs in an iframe, hanging off main process ๏ this enforces cross app security (sandbox) ๏ as does api permissions system (see later) ๏ oom errors handled via a priority system
  • apis
  • apis!!! we want to control everything from the web ๏ so we’re creating apis to handle access to device hardware, system functions, etc. ๏ security handled by permissions, in the manifest
  • api permissions different apis have different permission levels: ๏ standard apis can be accessed by any app ๏ privileged apis can only be used in a packaged, verified apps (e.g. contacts, device storage, keyboard) ๏ certified apis can only be used by vendor-installed apps (e.g. camera, sms, dialer, bluetooth)
  • var pick = new MozActivity({ name: "pick", data: { type: ["image/png", "image/jpg", "image/jpeg"] 
 } }); web activities (intents)
  • web activities
  • pick.onsuccess = function () { // Create image and set the returned blob as the src var img = document.createElement("img"); img.src = window.URL.createObjectURL(this.result.blob); // Present that image in your app var imagePresenter = document.querySelector("#image-presenter"); imagePresenter.appendChild(img); }; pick.onerror = function () { // If an error occurred or the user canceled the activity alert("Can't view the image!"); }; web activities
  • var img = '/to-do-notifications/img/icon-128.png'; var text = 'HEY! Your task "' + title + '" is now overdue.'; var notification = new Notification('To do list', { body: text, icon: img }); notification
  • ! var myAlarmDate = new Date(month.value + " " + day.value + ", " + year.value + " " + hours.value + ":" + minutes.value + ":00"); ! var data = { task: title.value } ! var request = navigator.mozAlarms.add(myAlarmDate, "ignoreTimezone", data); ! request.onsuccess = function () { console.log("Alarm successfully scheduled"); var alarmRequest = navigator.mozAlarms.getAll(); alarmRequest.onsuccess = function() { newAlarmId = this.result[(this.result.length)-1].id; } }; alarm
  • navigator.mozSetMessageHandler("alarm", function (alarm) { // only launch a notification if the Alarm is of the right type for this app if(alarm.data.task) { // Create a notification when the alarm is due new Notification("Your task " + alarm.data.task + " is now due!"); updateNotified(alarm.data.task); } }); alarm + notification
  • alarm + notification
  • window.navigator.vibrate(200); // vibrate for 200ms ! window.navigator.vibrate([100,30,100,30,100,200,200,30,200,30,200,200,10 0,30,100,30,100]); // Vibrate 'SOS' in Morse. vibration
  • window.addEventListener('devicelight', function(deviceLightEvent) { /* Check ambient light status */ if (deviceLightEvent.value > 500) { // snow _self.setSnow(); } else if (deviceLightEvent.value > 100) { // morning _self.setMorning(); } else if (deviceLightEvent.value > 10) { // evening _self.setEvening(); } else { // night _self.setNight(); } }); light sensor
  • light sensor
  • light sensor
  • window.addEventListener("deviceorientation", handleOrientation, true); ! function handleOrientation(event) { var alpha = event.alpha; var beta = event.beta; var gamma = event.gamma; ! // Do stuff with the new orientation data } device orientation
  • device orientation alpha betagamma
  • window.addEventListener('devicemotion', function(event) { console.log(event.acceleration.x + ' m/s2'); }); device motion
  • var person = new mozContact(); person.givenName = ["John"]; person.familyName = ["Doe"]; person.nickname = ["No kidding"]; ! var person = new mozContact(contactData); // Firefox OS 1.3 takes a parameter to initialize the object if ("init" in person) { // Firefox OS 1.2 and below uses a "init" method to initialize the object person.init(contactData); } ! // save the new contact var saving = navigator.mozContacts.save(person); ! saving.onsuccess = function() { console.log('new contact saved'); }; contacts
  • var message = "Hi!"; var number = "1234"; // There are several ways to retrieve a valid phone number ! navigator.mozMobileMessage.send(number, message); SMS
  • regular web stuff! other standards features also work great in this context: ๏ indexeddb/localstorage ๏ web rtc/getusermedia ๏ css animations ๏ SVg
  • developer
 experience
  • developer experience we want to give the web a first class development experience, alongside native ecosystems: ๏ documentation ๏ developer tools ๏ frameworks, templates, libraries
  • documentation announce new things, provide useful references, give recommendations ๏ hacks blog ๏ mdn app center
  • developer tools developer tools ๏ firefox’s standard toolbox ๏ app manager ๏ remote debugging ๏ you can run gaia inside desktop firefox too
  • frameworks and libraries ready made code to make development easier ๏ mortar app templates ๏ brick: web components for building up interfaces quickly ๏ libraries to solve real world problems, for example localforage ๏ firefox os boilerplate: great resource for learning about fxos ๏ phonegap now has firefox os as a target platform
  • performance
 enhancers
  • performance enhancers because the web can still be a bit slow ๏ web workers ๏ asm.js ๏ emscripten
  • web workers web workers ๏ run scripts in a background thread ๏ don’t block the main thread execution ๏ specify a script to run in the background ๏ pass messages between the two
  • asm.js asm.js ๏ just javascript ๏ a very efficient low-level subset ๏ suitable for ahead-of-time optimizing compilation ๏ Unity3d now has asm.js/WebGL support
  • emscripten emscripteN ๏ an LLVM to javascript compiler (well, asm.js, specifically) ๏ compile c++ (and others) into JS and run it on the web ๏ = “very fast shit” ™
  • resources ๏ look up localforage - polyfill for indexeddb/websql/localstorage ๏ simplewebrtc.com - simple webrtc library ๏ animate.css - good library for css animations ๏ raphaeljs.com, d3js.org - svg libraries ๏ emscripten.org - try quakejs.com and unrealengine.com/html5 in a recent version of firefox, opera or chrome ๏ asmjs.org ๏ MDN app center: developer.mozilla.org/en-US/Apps ๏ hacks blog: hacks.mozilla.org
  • thanks for
 listening!! slideshare.net/chrisdavidmills cmills@mozilla.com // @chrisdavidmills The end