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

The Next Evolution of Chrome Apps - Devoxx 2012

B590f0fb3aba34aee093cfa1406eac0b?s=47 Paul Kinlan
November 14, 2012

The Next Evolution of Chrome Apps - Devoxx 2012

A brief introduction to the new Chrome Apps platform and why we are doing it.

B590f0fb3aba34aee093cfa1406eac0b?s=128

Paul Kinlan

November 14, 2012
Tweet

Transcript

  1. ME DEVELOPER ADVOCATE AT GOOGLE @Paul Kinlan

  2. NEXT EVOLUTION OF CHROME APPS DEVOXX 2012 By @Paul Kinlan

  3. I HEARD THIS ON A TRAIN “Oh I don't use

    apps on the web, I just use it for news and wikipedia” — Some guy
  4. AVAILABILITY “Availability - noun: The act of being awesome all

    the time.” — Kinsters Compendium of Wordage
  5. WHY OFFLINE? 1. Mobile? 2. Responsiveness? Be there when your

    users need you.
  6. EXPERIMENT WITH OFFLINE APPS Top 50(ish) apps on iOS and

    Android Downloaded App Pulled the plug Loaded app
  7. None
  8. SAME EXPERIMENT WITH OFFLINE WEB APPS

  9. MOST APPS

  10. THE EXCEPTION

  11. SUMMARY Native Apps win hands down Lots works brilliantly offline,

    no online requirement. Many load and offer UI with cached content but needs web for more information. Many games loads and then download even more data. Minority of apps fail to load. The user is kept inside the app experience
  12. WEB DEVELOPERS ARE FROM VENUS “I will add offline support

    into my app” — A Web Dev “I will add online support into my app” — An App Dev
  13. WARNING OFFLINE APPS ARE A PARADIGM SHIFT FOR WEB DEVELOPERS

    THE WEB IS A HODGE-PODGE OF API'S THAT DON'T QUITE WORK TOGETHER
  14. APPCACHE If you want to have any offline experience at

    all, you have to use it.
  15. None
  16. STORAGE? If you want to have any offline storage at

    all, you have to use both indexedDB and WebSQL. Note: The versioning API just changed :\
  17. CHROME APPS A NEW PLATFORM

  18. WHY?!?!

  19. APPS SHOULD BE OFFLINE BY DEFAULT Apps should load regardless

    of connection.
  20. APPS SHOULD LOOK AND FEEL NATIVE

  21. APPS SHOULD BE ABLE ACCESS TO NATIVE API'S Network Sockets

    Serial Ports USB and Bluetooth File System Media Galleries
  22. APPS SHOULD BE SECURE BY DEFAULT CSP FTW! # B

    l o c k e v e r y t h i n g , t h e n w h i t e l i s t f r o m t h e r e . d e f a u l t - s r c ' n o n e ' ; # A c c e p t C S S f r o m t h e e x t e n s i o n ' s p a c k a g e . s t y l e - s r c ' s e l f ' ; # A c c e p t J a v a S c r i p t f r o m t h e e x t e n s i o n ' s p a c k a g e . s c r i p t - s r c ' s e l f ' ; # A l l o w i m a g e s f r o m G o o g l e M a p s t o l o a d o v e r H T T P S . i m g - s r c h t t p s : / / m a p s . g o o g l e . c o m ; a l e r t ( e v a l ( " f o o . b a r . b a z " ) ) ; w i n d o w . s e t T i m e o u t ( " a l e r t ( ' h i ' ) " , 1 0 ) ; w i n d o w . s e t I n t e r a l ( " a l e r t ( ' h i ' ) " , 1 0 ) ; n e w F u n c t i o n ( " r e t u r n f o o . b a r . b a z " ) ;
  23. FINALLY. APPS SHOULD BE BUILT USING TECHNOLOGY THAT WE KNOW

    AND LOVE HTML CSS JAVASCRIPT
  24. ACCESS TO HARDWARE NETWORK SOCKETS WEB SERVER IN THE BROWSER

  25. IT'S JUST A SOCKET v a r s o c

    k e t = c h r o m e . s o c k e t ; s o c k e t . c r e a t e ( " t c p " , { } , f u n c t i o n ( _ s o c k e t I n f o ) { s o c k e t I n f o = _ s o c k e t I n f o ; / / C a c h e g l o b a l l y [ e e k ] s o c k e t . l i s t e n ( s o c k e t I n f o . s o c k e t I d , " 1 2 7 . 0 . 0 . 1 " , 8 0 8 0 , 2 0 , f u n c t i o n ( r e s u l t ) { / / A c c e p t t h e f i r s t r e s p o n s e s o c k e t . a c c e p t ( s o c k e t I n f o . s o c k e t I d , o n A c c e p t ) ; } ) ; } ) ;
  26. BUT THERE IS A LOT OF CODE v a r

    o n A c c e p t = f u n c t i o n ( a c c e p t I n f o ) { / / T h i s i s a r e q u e s t t h a t t h e s y s t e m i s p r o c e s s i n g . / / R e a d t h e d a t a . s o c k e t . r e a d ( a c c e p t I n f o . s o c k e t I d , f u n c t i o n ( r e a d I n f o ) { / / P a r s e t h e r e q u e s t . v a r d a t a = a r r a y B u f f e r T o S t r i n g ( r e a d I n f o . d a t a ) ; / / W e o n l y w a n t t o h a n d l e g e t r e q u e s t s i f ( d a t a . i n d e x O f ( " G E T " ) = = 0 ) { / / w e c a n o n l y d e a l w i t h G E T r e q u e s t s v a r u r i E n d = d a t a . i n d e x O f ( " " , 4 ) ; i f ( u r i E n d < 0 ) { / * t h r o w a w o b b l e r * / r e t u r n ; } v a r u r i = d a t a . s u b s t r i n g ( 4 , u r i E n d ) ; v a r f i l e = f i l e s M a p [ u r i ] ; / / p i c k o u t t h e f i l e w e w a n t t o s e r v e r i f ( ! ! f i l e = = f a l s e ) { / * F i l e d o e s n o t e x i s t * / r e t u r n ; } w r i t e 2 0 0 R e s p o n s e ( a c c e p t I n f o . s o c k e t I d , f i l e ) ; } e l s e { / / T h r o w a n e r r o r s o c k e t . d e s t r o y ( a c c e p t I n f o . s o c k e t I d ) ; / / W e n e e d t o s a y t h a t w e c a n a c c e p t a n o t h e r i n c o m i n g r e q u e s t . s o c k e t . a c c e p t ( s o c k e t I n f o . s o c k e t I d , o n A c c e p t ) ; } } ) ; } ;
  27. CAN WE USE AN EXISTING ECO- SYSTEM?

  28. LIKE NODE?

  29. NODE API'S IN THE BROWSER MARKDOWN o n l o

    a d = f u n c t i o n ( ) { v a r m d E l = d o c u m e n t . g e t E l e m e n t B y I d ( " m a r k d o w n " ) ; v a r h t m l E l = d o c u m e n t . g e t E l e m e n t B y I d ( " h t m l " ) ; v a r m d = r e q u i r e ( " m a r k d o w n " ) . m a r k d o w n ; m d E l . o n k e y p r e s s = f u n c t i o n ( ) { v a r o u t p u t = m d . t o H T M L ( m d E l . v a l u e ) ; h t m l E l . i n n e r H T M L = o u t p u t ; } ; } ; $ b r o w s e r i f y - r m a r k d o w n - o b u n d l e . j s
  30. NODE API'S IN THE BROWSER BROWSERIFY + CHROME MAPPING =

    WIN powered by https://github.com/iceddev/http-chromify Browserify Chrome v a r h t t p = r e q u i r e ( ' h t t p ' ) ; h t t p . c r e a t e S e r v e r ( f u n c t i o n ( r e q , r e s ) { r e s . w r i t e H e a d ( 2 0 0 , { ' C o n t e n t - T y p e ' : ' t e x t / p l a i n ' } ) ; r e s . e n d ( ' H e l l o W o r l d \ n ' ) ; } ) . l i s t e n ( 1 3 3 7 , ' 1 2 7 . 0 . 0 . 1 ' ) ; c o n s o l e . l o g ( ' S e r v e r r u n n i n g a t h t t p : / / 1 2 7 . 0 . 0 . 1 : 1 3 3 7 / ' ) ;
  31. CLOSING THOUGHTS

  32. DO AWESOME

  33. AND BUILD DRONES youtube.com/watch?v=K7sG1dRSn4c

  34. THANKS @Paul_Kinlan +Paul Kinlan http://paul.kinlan.me LINKS Browserify - Chromeify -

    net - http - github.com/substack/node-browserify github.com/GoogleChrome/browserify-chrome github.com/GoogleChrome/net-chromeify github.com/iceddev/http-chromify
  35. None