The State of Mobile HTML5 (2013 -> 2014)

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

1b741e5d8f5efe12c6307db4ebfab8f9?s=128

Tomomi Imura

May 05, 2014
Tweet

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