Empowering the "mobile web"
-
Upload
chris-mills -
Category
Technology
-
view
429 -
download
2
Transcript of Empowering the "mobile web"
![Page 2: Empowering the "mobile web"](https://reader038.fdocuments.net/reader038/viewer/2022102901/554f7bb3b4c905d25b8b47d3/html5/thumbnails/2.jpg)
don’t stress about taking notes:
๏ These slides are all at slideshare.net/chrisdavidmills
๏ developer.mozilla.org
๏ @chrisdavidmills
๏ #mdn irc channel on mozilla irc
๏ [email protected] mailing list
![Page 3: Empowering the "mobile web"](https://reader038.fdocuments.net/reader038/viewer/2022102901/554f7bb3b4c905d25b8b47d3/html5/thumbnails/3.jpg)
๏ heavy metal drummer turned web nerd
๏ tech writer @ mozilla
๏ web tinkerer (HTML, CSS, JS)
๏ accessibility whiner
๏ educator
who am i?
mdn!!
![Page 4: Empowering the "mobile web"](https://reader038.fdocuments.net/reader038/viewer/2022102901/554f7bb3b4c905d25b8b47d3/html5/thumbnails/4.jpg)
what is THE MOBILE WEB?
![Page 5: Empowering the "mobile web"](https://reader038.fdocuments.net/reader038/viewer/2022102901/554f7bb3b4c905d25b8b47d3/html5/thumbnails/5.jpg)
what is the mobile web?
wap
๏ (blarrrgh, awful...)
![Page 6: Empowering the "mobile web"](https://reader038.fdocuments.net/reader038/viewer/2022102901/554f7bb3b4c905d25b8b47d3/html5/thumbnails/6.jpg)
what is the mobile web?
the web for mobile phones
๏ real mobile browsers
๏ separate web sites for mobiles
๏ lots of ua sniffing crimes
![Page 7: Empowering the "mobile web"](https://reader038.fdocuments.net/reader038/viewer/2022102901/554f7bb3b4c905d25b8b47d3/html5/thumbnails/7.jpg)
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
![Page 8: Empowering the "mobile web"](https://reader038.fdocuments.net/reader038/viewer/2022102901/554f7bb3b4c905d25b8b47d3/html5/thumbnails/8.jpg)
what is the mobile web?
the web while you’re on the move
๏ geolocation
๏ offline data storage
![Page 9: Empowering the "mobile web"](https://reader038.fdocuments.net/reader038/viewer/2022102901/554f7bb3b4c905d25b8b47d3/html5/thumbnails/9.jpg)
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
![Page 10: Empowering the "mobile web"](https://reader038.fdocuments.net/reader038/viewer/2022102901/554f7bb3b4c905d25b8b47d3/html5/thumbnails/10.jpg)
what’s the problem?
![Page 11: Empowering the "mobile web"](https://reader038.fdocuments.net/reader038/viewer/2022102901/554f7bb3b4c905d25b8b47d3/html5/thumbnails/11.jpg)
web versus native, the age-old struggle
![Page 12: Empowering the "mobile web"](https://reader038.fdocuments.net/reader038/viewer/2022102901/554f7bb3b4c905d25b8b47d3/html5/thumbnails/12.jpg)
the usual arguments
native is better?
๏ faster?
๏ more integrated, consistent experience?
๏ better developer ecosystem?
๏ more secure?
![Page 13: Empowering the "mobile web"](https://reader038.fdocuments.net/reader038/viewer/2022102901/554f7bb3b4c905d25b8b47d3/html5/thumbnails/13.jpg)
the usual arguments
๏ web sites accessing other tabs or apps?
๏ web sites accessing camera contacts e-mail?
![Page 14: Empowering the "mobile web"](https://reader038.fdocuments.net/reader038/viewer/2022102901/554f7bb3b4c905d25b8b47d3/html5/thumbnails/14.jpg)
solutions,moz style
![Page 15: Empowering the "mobile web"](https://reader038.fdocuments.net/reader038/viewer/2022102901/554f7bb3b4c905d25b8b47d3/html5/thumbnails/15.jpg)
solutions
we’ve been working hard on this at mozilla
๏ app ecosystem
๏ firefox os
๏ apis
๏ developer experience and tools
๏ performance
![Page 16: Empowering the "mobile web"](https://reader038.fdocuments.net/reader038/viewer/2022102901/554f7bb3b4c905d25b8b47d3/html5/thumbnails/16.jpg)
app ecosystem
![Page 17: Empowering the "mobile web"](https://reader038.fdocuments.net/reader038/viewer/2022102901/554f7bb3b4c905d25b8b47d3/html5/thumbnails/17.jpg)
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
![Page 18: Empowering the "mobile web"](https://reader038.fdocuments.net/reader038/viewer/2022102901/554f7bb3b4c905d25b8b47d3/html5/thumbnails/18.jpg)
{ "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" } }, "it": {
manifest example
![Page 19: Empowering the "mobile web"](https://reader038.fdocuments.net/reader038/viewer/2022102901/554f7bb3b4c905d25b8b47d3/html5/thumbnails/19.jpg)
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
![Page 20: Empowering the "mobile web"](https://reader038.fdocuments.net/reader038/viewer/2022102901/554f7bb3b4c905d25b8b47d3/html5/thumbnails/20.jpg)
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)
![Page 21: Empowering the "mobile web"](https://reader038.fdocuments.net/reader038/viewer/2022102901/554f7bb3b4c905d25b8b47d3/html5/thumbnails/21.jpg)
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
![Page 22: Empowering the "mobile web"](https://reader038.fdocuments.net/reader038/viewer/2022102901/554f7bb3b4c905d25b8b47d3/html5/thumbnails/22.jpg)
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
![Page 23: Empowering the "mobile web"](https://reader038.fdocuments.net/reader038/viewer/2022102901/554f7bb3b4c905d25b8b47d3/html5/thumbnails/23.jpg)
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
![Page 24: Empowering the "mobile web"](https://reader038.fdocuments.net/reader038/viewer/2022102901/554f7bb3b4c905d25b8b47d3/html5/thumbnails/24.jpg)
firefox os
![Page 25: Empowering the "mobile web"](https://reader038.fdocuments.net/reader038/viewer/2022102901/554f7bb3b4c905d25b8b47d3/html5/thumbnails/25.jpg)
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
![Page 26: Empowering the "mobile web"](https://reader038.fdocuments.net/reader038/viewer/2022102901/554f7bb3b4c905d25b8b47d3/html5/thumbnails/26.jpg)
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
![Page 27: Empowering the "mobile web"](https://reader038.fdocuments.net/reader038/viewer/2022102901/554f7bb3b4c905d25b8b47d3/html5/thumbnails/27.jpg)
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
![Page 28: Empowering the "mobile web"](https://reader038.fdocuments.net/reader038/viewer/2022102901/554f7bb3b4c905d25b8b47d3/html5/thumbnails/28.jpg)
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
![Page 29: Empowering the "mobile web"](https://reader038.fdocuments.net/reader038/viewer/2022102901/554f7bb3b4c905d25b8b47d3/html5/thumbnails/29.jpg)
apis
![Page 30: Empowering the "mobile web"](https://reader038.fdocuments.net/reader038/viewer/2022102901/554f7bb3b4c905d25b8b47d3/html5/thumbnails/30.jpg)
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
![Page 31: Empowering the "mobile web"](https://reader038.fdocuments.net/reader038/viewer/2022102901/554f7bb3b4c905d25b8b47d3/html5/thumbnails/31.jpg)
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)
![Page 32: Empowering the "mobile web"](https://reader038.fdocuments.net/reader038/viewer/2022102901/554f7bb3b4c905d25b8b47d3/html5/thumbnails/32.jpg)
var pick = new MozActivity({ name: "pick", data: { type: ["image/png", "image/jpg", "image/jpeg"] } });
web activities (intents)
![Page 33: Empowering the "mobile web"](https://reader038.fdocuments.net/reader038/viewer/2022102901/554f7bb3b4c905d25b8b47d3/html5/thumbnails/33.jpg)
web activities
![Page 34: Empowering the "mobile web"](https://reader038.fdocuments.net/reader038/viewer/2022102901/554f7bb3b4c905d25b8b47d3/html5/thumbnails/34.jpg)
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
![Page 35: Empowering the "mobile web"](https://reader038.fdocuments.net/reader038/viewer/2022102901/554f7bb3b4c905d25b8b47d3/html5/thumbnails/35.jpg)
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
![Page 36: Empowering the "mobile web"](https://reader038.fdocuments.net/reader038/viewer/2022102901/554f7bb3b4c905d25b8b47d3/html5/thumbnails/36.jpg)
!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
![Page 37: Empowering the "mobile web"](https://reader038.fdocuments.net/reader038/viewer/2022102901/554f7bb3b4c905d25b8b47d3/html5/thumbnails/37.jpg)
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
![Page 38: Empowering the "mobile web"](https://reader038.fdocuments.net/reader038/viewer/2022102901/554f7bb3b4c905d25b8b47d3/html5/thumbnails/38.jpg)
alarm + notification
![Page 39: Empowering the "mobile web"](https://reader038.fdocuments.net/reader038/viewer/2022102901/554f7bb3b4c905d25b8b47d3/html5/thumbnails/39.jpg)
window.navigator.vibrate(200); // vibrate for 200ms !window.navigator.vibrate([100,30,100,30,100,200,200,30,200,30,200,200,100,30,100,30,100]); // Vibrate 'SOS' in Morse.
vibration
![Page 40: Empowering the "mobile web"](https://reader038.fdocuments.net/reader038/viewer/2022102901/554f7bb3b4c905d25b8b47d3/html5/thumbnails/40.jpg)
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
![Page 41: Empowering the "mobile web"](https://reader038.fdocuments.net/reader038/viewer/2022102901/554f7bb3b4c905d25b8b47d3/html5/thumbnails/41.jpg)
light sensor
![Page 42: Empowering the "mobile web"](https://reader038.fdocuments.net/reader038/viewer/2022102901/554f7bb3b4c905d25b8b47d3/html5/thumbnails/42.jpg)
light sensor
![Page 43: Empowering the "mobile web"](https://reader038.fdocuments.net/reader038/viewer/2022102901/554f7bb3b4c905d25b8b47d3/html5/thumbnails/43.jpg)
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
![Page 44: Empowering the "mobile web"](https://reader038.fdocuments.net/reader038/viewer/2022102901/554f7bb3b4c905d25b8b47d3/html5/thumbnails/44.jpg)
device orientation
alpha
betagamma
![Page 45: Empowering the "mobile web"](https://reader038.fdocuments.net/reader038/viewer/2022102901/554f7bb3b4c905d25b8b47d3/html5/thumbnails/45.jpg)
window.addEventListener('devicemotion', function(event) { console.log(event.acceleration.x + ' m/s2'); });
device motion
![Page 46: Empowering the "mobile web"](https://reader038.fdocuments.net/reader038/viewer/2022102901/554f7bb3b4c905d25b8b47d3/html5/thumbnails/46.jpg)
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
![Page 47: Empowering the "mobile web"](https://reader038.fdocuments.net/reader038/viewer/2022102901/554f7bb3b4c905d25b8b47d3/html5/thumbnails/47.jpg)
var message = "Hi!"; var number = "1234"; // There are several ways to retrieve a valid phone number !navigator.mozMobileMessage.send(number, message);
SMS
![Page 48: Empowering the "mobile web"](https://reader038.fdocuments.net/reader038/viewer/2022102901/554f7bb3b4c905d25b8b47d3/html5/thumbnails/48.jpg)
regular web stuff!
other standards features also work great in this context:
๏ indexeddb/localstorage
๏ web rtc/getusermedia
๏ css animations
๏ SVg
![Page 49: Empowering the "mobile web"](https://reader038.fdocuments.net/reader038/viewer/2022102901/554f7bb3b4c905d25b8b47d3/html5/thumbnails/49.jpg)
developer experience
![Page 50: Empowering the "mobile web"](https://reader038.fdocuments.net/reader038/viewer/2022102901/554f7bb3b4c905d25b8b47d3/html5/thumbnails/50.jpg)
developer experience
we want to give the web a first class development experience,
alongside native ecosystems:
๏ documentation
๏ developer tools
๏ frameworks, templates, libraries
![Page 51: Empowering the "mobile web"](https://reader038.fdocuments.net/reader038/viewer/2022102901/554f7bb3b4c905d25b8b47d3/html5/thumbnails/51.jpg)
documentation
announce new things, provide useful references, give
recommendations
๏ hacks blog
๏ mdn app center
![Page 52: Empowering the "mobile web"](https://reader038.fdocuments.net/reader038/viewer/2022102901/554f7bb3b4c905d25b8b47d3/html5/thumbnails/52.jpg)
developer tools
developer tools
๏ firefox’s standard toolbox
๏ app manager
๏ remote debugging
๏ you can run gaia inside desktop firefox too
![Page 53: Empowering the "mobile web"](https://reader038.fdocuments.net/reader038/viewer/2022102901/554f7bb3b4c905d25b8b47d3/html5/thumbnails/53.jpg)
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
![Page 54: Empowering the "mobile web"](https://reader038.fdocuments.net/reader038/viewer/2022102901/554f7bb3b4c905d25b8b47d3/html5/thumbnails/54.jpg)
performance enhancers
![Page 55: Empowering the "mobile web"](https://reader038.fdocuments.net/reader038/viewer/2022102901/554f7bb3b4c905d25b8b47d3/html5/thumbnails/55.jpg)
performance enhancers
because the web can still be a bit slow
๏ web workers
๏ asm.js
๏ emscripten
![Page 56: Empowering the "mobile web"](https://reader038.fdocuments.net/reader038/viewer/2022102901/554f7bb3b4c905d25b8b47d3/html5/thumbnails/56.jpg)
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
![Page 57: Empowering the "mobile web"](https://reader038.fdocuments.net/reader038/viewer/2022102901/554f7bb3b4c905d25b8b47d3/html5/thumbnails/57.jpg)
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
![Page 58: Empowering the "mobile web"](https://reader038.fdocuments.net/reader038/viewer/2022102901/554f7bb3b4c905d25b8b47d3/html5/thumbnails/58.jpg)
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” ™
![Page 59: Empowering the "mobile web"](https://reader038.fdocuments.net/reader038/viewer/2022102901/554f7bb3b4c905d25b8b47d3/html5/thumbnails/59.jpg)
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