The State of Mobile HTML5 (2013 -> 2014)

@ Craft Conf Budapest (April 2014)

The interactive slides (in html) is hosted on Github:
http://girliemac.github.io/presentation-slides/html5-mobile-2014/index.html

Transcript

1. State of Mobile HTML5 Half full or half empty? Tomomi Imura (@girlie_mac) https://flic.kr/p/9WjAnE by slavik_V b
2. H E L L O M Y N A M E I S Tomomi @girlie_mac
3. Mobile Browser Releases 2013 -
4. https://flic.kr/p/7634a3 (modified) by Danny Choo ban
5. Mobile Browser Usage Stats StatCounter Global Stats - Browser Market Share
6. Feature Support Stats Can I Use...
7. Disrupt App Store https://flic.kr/p/5r6RYe by Cristiano Betta b
8. Distributing outside of app stores flappybird.io • 2048
9. Forking (in Doge style) Flappy Doge • Doge2048
10. and Flappy 2048 Flappy 2048
11. Last Year "Coremob Camera"
12. Project Goals 1. Showcase the capabilities of the Web platform 2. Educate Web developers 3. Help improve browsers
13. Watch the demo video at: http://sdrv.ms/UF55gM 1:18
14. 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
15. HTML Media Capture Taking a photo with using a native camera < i n p u t t y p e = " f i l e " a c c e p t = " i m a g e / * " > 18 15bl 3 10 6 10 11 10
16. < i n p u t t y p e = " f i l e " a c c e p t = " i m a g e / * " c a p t u r e > open camera!
17. File API Camera returns the photo as a f i l e object v a r i n p u t = d o c u m e n t . q u e r y S e l e c t o r ( ' i n p u t [ t y p e = f i l e ] ' ) ; c a m e r a . a d d E v e n t L i s t e n e r ( ' c h a n g e ' , f u n c t i o n ( ) { v a r l o c a l F i l e = i n p u t . f i l e s [ 0 ] ; v a r r e a d e r = n e w F i l e R e a d e r ( ) ; r e a d e r . r e a d A s D a t a U R L ( l o c a l F i l e ) ; r e a d e r . o n l o a d = f u n c t i o n ( e ) { p r e v i e w . s r c = e . t a r g e t . r e s u l t ; } } , f a l s e ) ;
18. Canvas Applying filters to the photo v a r c = d o c u m e n t . c r e a t e E l e m e n t ( ' c a n v a s ' ) ; v a r c t x = t h i s . c . g e t C o n t e x t ( ' 2 d ' ) ; c t x . d r a w I m a g e ( i m g O b j , 0 , 0 ) ; v a r i m g D a t a = c t x . g e t I m a g e D a t a ( x , y , w , h ) ; / / . . . P i x e l m a n i p u l a t i o n . . . c t x . p u t I m a g e D a t a ( i m g D a t a , 0 , 0 ) ;
19. IndexedDB Storing the photos locally i f ( w i n d o w . i n d e x e d D B ) { v a r r e q = i n d e x e d D B . o p e n ( ' c o r e m o b C a m e r a ' ) ; r e q . o n s u c c e s s = f u n c t i o n ( e ) { / / a s y n c } } 18* 25 15bl 10* 16 10 4.4
20. Polyfill or not? Indexed DB Web SQL Chrome 37 Yes Yes Opera 22 Yes Yes Blackberry 10 Yes Yes Firefox 26 Yes No IE 11 Yes No Android 4.4 Yes Yes Safari 7 No Yes ← caniuse.com
21. XMLHttpRequest Level 2 Sending a photo v a r f o r m D a t a = n e w F o r m D a t a ( ) ; f o r m D a t a . a p p e n d ( ' p h o t o ' , b l o b ) ; 3 5 10 12 15bl
22. XMLHttpRequest Level 2 Sending a photo v a r x h r = n e w X M L H t t p R e q u e s t ( ) ; x h r . o p e n ( ' P O S T ' , ' / g a l l e r y ' ) ; x h r . u p l o a d . a d d E v e n t L i s t e n e r ( ' p r o g r e s s ' , h a n d l e P r o g r e s s , f a l s e ) ; x h r . a d d E v e n t L i s t e n e r ( ' l o a d ' , h a n d l e F i n i s h , f a l s e ) ; x h r . a d d E v e n t L i s t e n e r ( ' e r r o r ' , h a n d l e E r r o r , f a l s e ) ; x h r . a d d E v e n t L i s t e n e r ( ' a b o r t ' , h a n d l e A b o r t , f a l s e ) ; x h r . s e n d ( f o r m D a t a ) ;
23. XMLHttpRequest Level 2 Sending a photo f u n c t i o n h a n d l e P r o g r e s s ( e ) { i f ( e . l e n g t h C o m p u t a b l e ) { e l . t e x t C o n t e n t = ( e . l o a d e d / e . t o t a l * 1 0 0 ) > > > 0 + ' % ' ; } }
24. CORS: Cross Origin Resource Sharing A c c e s s - C o n t r o l - A l l o w - O r i g i n : h t t p : / / s o m e - d o m a i n . o r g / / A p a c h e . h t a c c e s s < I f M o d u l e m o d _ h e a d e r s . c > H e a d e r s e t A c c e s s - C o n t r o l - A l l o w - O r i g i n " * " < / I f M o d u l e > 12 15bl
25. Touch Events v.1 Photo Gallery Carousel e l . a d d E v e n t L i s t e n e r ( ' t o u c h s t a r t ' , s t a r t H a n d l e r , f a l s e ) ; e l . a d d E v e n t L i s t e n e r ( ' t o u c h m o v e ' . . . ) ; e l . a d d E v e n t L i s t e n e r ( ' t o u c h e n d ' . . . ) ; You probably want to include mouse events too ( m o u s e d o w n, m o u s e m o v e, and m o u s e u p).
26. Pointer Events For any input devices: touch, mouse, pen... i f ( t y p e o f w i n d o w . P o i n t e r E v e n t ! = ' u n d e f i n e d ' ) { e l . a d d E v e n t L i s t e n e r ( ' p o i n t e r d o w n ' , s t a r t H a n d l e r , f a l s e ) ; e l . a d d E v e n t L i s t e n e r ( ' p o i n t e r m o v e ' , . . . ) ; e l . a d d E v e n t L i s t e n e r ( ' p o i n t e r u p ' , . . . ) ; }
27. Touch vs. Pointer Events Touch Pointer Chrome 37 Yes No (Will implement) Opera 22 Yes No (Will implement) Blackberry 10 Yes No Firefox 26 Yes No IE 10 No Yes Safari 7 Yes No Android 4.4 Yes No caniuse.com • groups.google.com/a/chromium.org
28. github.com/coremob/camera 
29. Hardware Access https://flic.kr/p/54oAAr by James Cridland b
30. Device APIs • GPS • Camera, Video, & Microphone • Audio HW • Vibration HW • Battery • NFC
31. Device APIs - Sensors • Accelerometer • Magnetometer • Gyrometer • Light • Proximity • Barometer (Pressure)
32. Geolocation i f ( n a v i g a t o r . g e o l o c a t i o n ) { n a v i g a t o r . g e o l o c a t i o n . g e t C u r r e n t P o s i t i o n ( s u c c e s s , f a i l ) ; } f u n c t i o n s u c c e s s ( p o s i t i o n ) { a l e r t ( ' L a t i t u d e : ' + p o s i t i o n . c o o r d s . l a t i t u d e + ' , L o n g i t u d e : ' + p o s i t i o n . c o o r d s . l o n g i t u d e ) ; }
33. Device Orientation Events Dev Opera (Diagram)
34. i f ( w i n d o w . D e v i c e O r i e n t a t i o n E v e n t ) { w i n d o w . a d d E v e n t L i s t e n e r ( ' d e v i c e o r i e n t a t i o n ' , f u n c t i o n ( e ) { c o m p a s s = e . a l p h a ; / / d e g r e e f r o n t B a c k = e . b e t a ; l e f t R i g h t = e . g a m m a ; . . . } , f a l s e ) ; } Partial support 4.2 3.0 18 10 14 12
35. User Cases Can we re-create this iOS app in HTML5? http://pizza-compass.com/
36. Watch the demo video at: https://vimeo.com/92208773 Demo: http://girliemac.github.com/sushi-compass
37. Battery Status API v a r b a t t e r y = n a v i g a t o r . b a t t e r y | | n a v i g a t o r . m o z B a t t e r y ; b a t t e r y . a d d E v e n t L i s t e n e r ( ' c h a r g i n g c h a n g e ' , u p d a t e S t a t u s ) ; b a t t e r y . a d d E v e n t L i s t e n e r ( ' l e v e l c h a n g e ' , u p d a t e S t a t u s ) ; f u n c t i o n u p d a t e S t a t u s ( ) { a l e r t ( ' B a t t e r y s t a t u s : ' + b a t t e r y . l e v e l * 1 0 0 + ' % ' ) ; i f ( b a t t e r y . c h a r g i n g ) { a l e r t ( ' B a t t e r y i s c h a r g i n g . . . ' ) ; } } 14* 16
38. Battery Status API http://goo.gl/V1n6h (Pictured: Firefox)
39. Vibration API v a r v i b r a t e = n a v i g a t o r . v i b r a t e | | n a v i g a t o r . m o z V i b r a t e ; / / v i b r a t e f o r 1 s e c v i b r a t e ( 1 0 0 0 ) ; / / v i b r a t e s f o r 1 s e c , s t i l l f o r 0 . 5 s e c o n d s , / / a n d v i b r a t e s a g a i n f o r 2 s e c v i b r a t e ( [ 1 0 0 0 , 5 0 0 , 2 0 0 0 ] ) ; 14* 16 30
40. Watch the demo video at: https://vimeo.com/86735842 Demo: http://goo.gl/SFzKaH
41. Ambient Light Events w i n d o w . a d d E v e n t L i s t e n e r ( ' d e v i c e l i g h t ' , f u n c t i o n ( e ) { a l e r t ( e . v a l u e ) ; } ) ; Returned value (in lux) My Observations < 400 Indoor 400-1000 Office lighting. Outdoor (in foggy San Francisco) > 1000 Outdoor daylight (anywhere else in California) 15
42. Watch the demo video at: https://vimeo.com/79466285 Demo: http://codepen.io/girliemac/pen/pvmBs
43. Keep up to date https://flic.kr/p/8tuc1u by randomliteraturecouncil b
44. Chromium Dashboard
45. IE Platform Status
46. Köszönöm! Tomomi Imura • girliemac.com • twitter.com/girlie_mac • github.com/girliemac