This document summarizes the state of mobile web browsers in 2013-2014. It discusses browser releases and features such as Blink, SPDY, CSS Flexbox, promises and hardware access APIs. Mobile browser usage statistics are presented. HTML5 features for building camera apps using the media capture API, canvas, IndexedDB and XHR2 are described. Touch and pointer events, and upcoming features like service workers and web components are also summarized.

1. 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 Andrew b

2. https://flick.kr/p/3fzVnW by Danny Sullivan b

4. Mobile Browser Releases 2013 -

5. Chrome Android Constant Releases

6. Chrome: WebKit -> Blink

7. Opera: Presto -> WebKit -> Blink

8. IndexedDB

9. SPDY

10. CSS Flexbox (New Spec)

11. ES: Promises, Object.observe()

12. Flat Icons

13. Mobile Browser Usage Stats
StatCounter Global Stats - Browser Market Share

14. Disrupt App Store
https://flic.kr/p/5r6RYe by Cristiano Betta b

15. Distributing outside of app stores
flappybird.io • 2048

16. Forking (in Doge style)
Flappy Doge • Doge2048

17. and Flappy 2048
Flappy 2048

18. Hardware Access
https://flic.kr/p/54oAAr by James Cridland b

19. HW Access with Device APIs
• GPS
• Camera, Video, & Microphone
• Audio HW
• Vibration HW
• Battery
• NFC

20. Sensors
• Accelerometer
• Magnetometer
• Gyrometer
• Light
• Proximity
• Barometer (Pressure)

21. Watch the demo video at: https://vimeo.com/92208773
Demo: http://girliemac.github.com/sushi-compass

22. Last Year
"Coremob
Camera"

23. Project Goals
1. Showcase the capabilities of the Web platform
2. Educate Web developers
3. Help improve browsers

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

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

26. HTML Media Capture
Taking a photo with using a native camera
<input type="file" accept="image/*">
18 15bl 3 10 6 10
10 11

27. 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);

28. 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);

29. IndexedDB
Storing the photos locally
if(window.indexedDB) {
var req = indexedDB.open('coremobCamera');
req.onsuccess = function(e) {
// async
}
}

30. IndexedDB Support
New in 2014:
• Android stock browser support
• Apple announced support for Safari 8
18* 25 15bl 10* 16 10
4.4 8

31. Inspect IndexedDB in Chrome

32. ...and now in Aurora too!
https://developer.mozilla.org/en-US/docs/Tools/Storage_Inspector

33. XMLHttpRequest Level 2
Sending a photo
var formData = new FormData();
formData.append('photo', blob);
3 5 10
12 15bl

34. 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).

35. 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', ...);
}

36. Touch vs. Pointer Events
Touch Pointer
Chrome 37 Yes will implement ->
No, they changed mind
Opera 22 Yes No
Firefox 26 Yes No
IE 10 No Yes
IE 11.next Yes Yes
Safari 7 Yes No
Android 4.4 Yes No
caniuse.com • groups.google.com/a/chromium.org

40. To-do list for the camera app
• Offline support
• Before - AppCache was Douchebag™
• Now - Service Workers
• Web Components
• Custom Elements
• Shadow DOM
• HTML Templates
• Imports

41. Keep up to date
https://flic.kr/p/8tuc1u by randomliteraturecouncil b

42. Chromium Dashboard

43. IE Platform Status

44. Thank you <3
Tomomi Imura
• girliemac.com
• twitter.com/girlie_mac
• github.com/girliemac