Upload
fitc
View
326
Download
2
Embed Size (px)
DESCRIPTION
Empowering the “Mobile Web” with Chris Mills “Mobile web” applications are often criticised for having inferior performance and a limited feature set, compared to “native” apps. To redress the balance, browser vendors are working on a number of technologies to grant them superpowers. In this talk, Chris Mills will discuss the inherent historic problems with mobile apps and which technologies are stepping up to fill the holes. This includes device APIs such as Web Activities, Notification, Network Information and Vibration, offline apps, installable apps and performance enhancers such as asm.js and Emscripten. Presented at FITC Toronto 2014 on April 27-29, 2014 More info at www.FITC.ca
Citation preview
EMPOWERING THE MOBILE WEB
Chris Mills // Mozilla [email protected] // @chrisdavidmills
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
๏ 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" } }, "it": {
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,100,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