ME DEVELOPER ADVOCATE AT GOOGLE @Paul Kinlan

NEXT EVOLUTION OF CHROME APPS DEVOXX 2012 By @Paul Kinlan

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

AVAILABILITY “Availability - noun: The act of being awesome all the time.” — Kinsters Compendium of Wordage

WHY OFFLINE? 1. Mobile? 2. Responsiveness? Be there when your users need you.

EXPERIMENT WITH OFFLINE APPS Top 50(ish) apps on iOS and Android Downloaded App Pulled the plug Loaded app

No content

SAME EXPERIMENT WITH OFFLINE WEB APPS

MOST APPS

THE EXCEPTION

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

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

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

APPCACHE If you want to have any offline experience at all, you have to use it.

No content

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 :\

CHROME APPS A NEW PLATFORM

WHY?!?!

APPS SHOULD BE OFFLINE BY DEFAULT Apps should load regardless of connection.

APPS SHOULD LOOK AND FEEL NATIVE

APPS SHOULD BE ABLE ACCESS TO NATIVE API'S Network Sockets Serial Ports USB and Bluetooth File System Media Galleries

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 " ) ;

FINALLY. APPS SHOULD BE BUILT USING TECHNOLOGY THAT WE KNOW AND LOVE HTML CSS JAVASCRIPT

ACCESS TO HARDWARE NETWORK SOCKETS WEB SERVER IN THE BROWSER

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 ) ; } ) ; } ) ;

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 ) ; } } ) ; } ;

CAN WE USE AN EXISTING ECO- SYSTEM?

LIKE NODE?

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

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 / ' ) ;

CLOSING THOUGHTS

DO AWESOME

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

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

No content