Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The current state of web on mobile - Have smart...

The current state of web on mobile - Have smartphone browsers gotten smarter?

A keynote slides for Powered by JavaScript (http://www.manning.com/poweredbyjavascript/)

Tomomi Imura

October 02, 2014
Tweet

More Decks by Tomomi Imura

Other Decks in Technology

Transcript

  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. HW Access with Device APIs •  GPS •  Camera, Video,

    & Microphone •  Audio HW •  Vibration HW •  Battery •  NFC
  3. Project Goals 1.  Showcase the capabilities of the Web platform

    2.  Educate Web developers 3.  Help improve browsers
  4. 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. 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. 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 ] ' ) ; i n p u t . 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 ) ;
  7. 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 ) ;
  8. 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 } }
  9. IndexedDB Support New in 2014: •  Android stock browser support

    •  Apple announced support for Safari 8 18* 25 15bl 10* 16 10 4.4 8
  10. 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
  11. 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).
  12. 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 ' , . . . ) ; }
  13. 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
  14. 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