State of Mobile HTML5

State of Mobile Web

Have smartphone browsers gotten smarter?

Tomomi Imura @girlie_mac

Public domain photo from NASA, modifed with https://flic.kr/p/Ea32T by Andrewb

https://flick.kr/p/3fzVnW by Danny Sullivanb

Mobile Browser Releases 2013 -

Chrome Android Constant Releases

Chrome: WebKit -> Blink

Opera: Presto -> WebKit -> Blink

IndexedDB

SPDY

CSS Flexbox (New Spec)

ES: Promises, Object.observe()

Flat Icons

Mobile Browser Usage Stats

StatCounter Global Stats - Browser Market Share

Disrupt App Store

https://flic.kr/p/5r6RYe by Cristiano Bettab

Distributing outside of app stores

flappybird.io • 2048

Forking (in Doge style)

Flappy Doge • Doge2048

and Flappy 2048

Flappy 2048

Hardware Access

https://flic.kr/p/54oAAr by James Cridlandb

HW Access with Device APIs

GPS
Camera, Video, & Microphone
Audio HW
Vibration HW
Battery
NFC

Sensors

Accelerometer
Magnetometer
Gyrometer
Light
Proximity
Barometer (Pressure)

Watch the demo video at: https://vimeo.com/92208773

Demo: http://girliemac.github.com/sushi-compass

Last Year

"Coremob
Camera"

Project Goals

Showcase the capabilities of the Web platform
Educate Web developers
Help improve browsers

Watch the demo video at: http://sdrv.ms/UF55gM

HTML5 APIs

Take a picture via HTML Media Capture
Use FileReader() to return the picture as a object
drawImage() to draw the image object in canvas
getImageData() to get an ImageData object containing a copy of the pixel data, then alter the pixels
Store the blob locally with IndexedDB
Upload the final photo with XHR2/CORS

HTML Media Capture

Taking a photo with using a native camera


<input type="file" accept="image/*">

18

15bl

3

10

6

10

11

File API

Camera returns the photo as a file object

var input = document.querySelector('input[type=file]'); 
input.addEventListener('change', function() {
    var localFile = input.files[0];
    var reader = new FileReader();
    reader.readAsDataURL(localFile);
    reader.onload = function(e){
        preview.src = e.target.result;
    }
}, false);

Canvas

Applying filters to the photo


var c = document.createElement('canvas');
var ctx = this.c.getContext('2d');
ctx.drawImage(imgObj, 0, 0);
var imgData = ctx.getImageData(x, y, w, h); 
//...Pixel manipulation ...
ctx.putImageData(imgData, 0, 0);

7

9

IndexedDB

Storing the photos locally


if(window.indexedDB) {
   var req = indexedDB.open('coremobCamera'); 
   req.onsuccess = function(e) {
      // async
   }
}

IndexedDB Support

New in 2014:

Android stock browser support
Apple announced support for Safari 8

18*

25

15bl

10*

16

10

4.4

8

Inspect IndexedDB in Chrome

...and now in Aurora too!

https://developer.mozilla.org/en-US/docs/Tools/Storage_Inspector

XMLHttpRequest Level 2

Sending a photo


var formData = new FormData();
formData.append('photo', blob);

3

5

10

12

15bl

Touch Events v.1

Photo Gallery Carousel


el.addEventListener('touchstart', 
                    startHandler, false);
el.addEventListener('touchmove'...);
el.addEventListener('touchend'...);

You probably want to include mouse events too (mousedown, mousemove, and mouseup).

Pointer Events

For any input devices: touch, mouse, pen...


if (typeof window.PointerEvent != 'undefined') {
   el.addEventListener('pointerdown', 
                         startHandler, false);
   el.addEventListener('pointermove', ...);
   el.addEventListener('pointerup', ...);
}