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

    State of Mobile HTML5 Half full or half empty? Tomomi

    Imura (@girlie_mac) https://flic.kr/p/9WjAnE by slavik_V b
  2. 2.

    H E L L O M Y N A M

    E I S Tomomi @girlie_mac
  3. 12.

    Project Goals 1. Showcase the capabilities of the Web platform

    2. Educate Web developers 3. Help improve browsers
  4. 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
  5. 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
  6. 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!
  7. 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 ) ;
  8. 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 ) ;
  9. 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
  10. 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
  11. 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
  12. 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 ) ;
  13. 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 + ' % ' ; } }
  14. 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
  15. 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).
  16. 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 ' , . . . ) ; }
  17. 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
  18. 30.

    Device APIs • GPS • Camera, Video, & Microphone •

    Audio HW • Vibration HW • Battery • NFC
  19. 31.

    Device APIs - Sensors • Accelerometer • Magnetometer • Gyrometer

    • Light • Proximity • Barometer (Pressure)
  20. 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 ) ; }
  21. 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
  22. 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
  23. 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
  24. 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