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

Thinking Offline at Frontend Conference Zurich

Phil Nash
September 01, 2016

Thinking Offline at Frontend Conference Zurich

Building a progressively enhanced, offline capable web application requires a different way of thinking. Not only is JavaScript optional, so is the network. Throughout this talk we’ll explore the life of a simple, though not trivial, web application that was built from the ground up as offline first. A base experience, static resources, dynamic pages, data and notifications will all play a part in this story of a new way of working with the web.

Links:

Offline apps course on Udacity: https://www.udacity.com/course/offline-web-applications--ud899

The demo SMS app: https://github.com/philnash/sms-messages-app

HTML5Rocks intro to service worker: http://www.html5rocks.com/en/tutorials/service-worker/introduction/
Service Worker spec: https://slightlyoff.github.io/ServiceWorker/spec/service_worker/
Is Service Worker Ready Yet? https://jakearchibald.github.io/isserviceworkerready/
And resources: https://jakearchibald.github.io/isserviceworkerready/resources.html
Service Worker Cookbook: http://www.serviceworke.rs/
Addy Osmani - Offline Storage for Progressive Web Apps - https://bit.ly/cache-vs-db

Twilio Blog: Web powered SMS inbox with push notifications: https://www.twilio.com/blog/2016/02/web-powered-sms-inbox-with-service-worker-push-notifications.html
Background sync: https://developers.google.com/web/updates/2015/12/background-sync?hl=en

Phil Nash

September 01, 2016
Tweet

More Decks by Phil Nash

Other Decks in Programming

Transcript

  1. n a v i g a t o r .

    s e r v i c e W o r k e r . r e g i s t e r ( " / s w . j s " ) . t h e n ( f u n c t i o n ( r e g ) { c o n s o l e . l o g ( " Y a y " ) ; r e g . a d d E v e n t L i s t e n e r ( " u p d a t e f o u n d " , f u n c t i o n ( ) { v a r w o r k e r = r e g . i n s t a l l i n g r e g . i n s t a l l i n g . a d d E v e n t L i s t e n e r ( " s t a t e c h a n g e " , f u n c t i o n ( e ) { i f ( w o r k e r . s t a t e = = " i n s t a l l e d " ) { w o r k e r . p o s t M e s s a g e ( { a c t i o n : " u p d a t e " } ) ; } } ) } ) ; } ) ; 0 1 . 0 2 . 0 3 . 0 4 . 0 5 . 0 6 . 0 7 . 0 8 . 0 9 . 1 0 . 1 1 .
  2. s e l f . s k i p W

    a i t i n g ( ) ;
  3. v a r s w = n a v i

    g a t o r . s e r v i c e W o r k e r ; s w . a d d E v e n t L i s t e n e r ( " c o n t r o l l e r c h a n g e " , f u n c t i o n ( ) { w i n d o w . l o c a t i o n . r e l o a d ( ) ; } ) ; 0 1 . 0 2 . 0 3 . 0 4 .
  4. v a r d b = n e w D

    e x i e ( " m e s s a g e S t o r e " , { a u t o O p e n : t r u e } ) ; d b . v e r s i o n ( 1 ) . s t o r e s ( { m e s s a g e s : " + + , c r e a t e d A t " } ) ; 0 1 . 0 2 . 0 3 . 0 4 . 0 5 . 0 6 .
  5. d b . t r a n s a c

    t i o n ( " w " , d b . m e s s a g e s , f u n c t i o n ( ) { d b . m e s s a g e s . p u t ( { f r o m : F R O M _ N U M B E R , t o : T O _ N U M B E R , c r e a t e A t : n e w D a t e ( ) , b o d y : " S e r v i c e W o r k e r s r o c k " } ) . t h e n ( f u n c t i o n ( m e s s a g e ) { c o n s o l e . l o g ( " Y a y " ) ; } ) ; } ) ; 0 1 . 0 2 . 0 3 . 0 4 . 0 5 . 0 6 . 0 7 . 0 8 . 0 9 . 1 0 .
  6. d b . t r a n s a c

    t i o n ( " r " , d b . m e s s a g e s , f u n c t i o n ( ) { d b . m e s s a g e s . e a c h ( f u n c t i o n ( i t e m , c u r s o r ) { r e n d e r ( i t e m ) ; } ) ; } ) ; 0 1 . 0 2 . 0 3 . 0 4 . 0 5 .
  7. r e g . s y n c . r

    e g i s t e r ( ' s e n t M e s s a g e ' ) ;
  8. s e l f . a d d E v

    e n t L i s t e n e r ( ' s y n c ' , f u n c t i o n ( e v e n t ) { / / d o t h e t h i n g } ) ; 0 1 . 0 2 . 0 3 .