Save 37% off PRO during our Black Friday Sale! »

Thinking Offline at GDG DevFest London

8ec1383b240b5ba15ffb9743fceb3c0e?s=47 Phil Nash
October 08, 2016

Thinking Offline at GDG DevFest London

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

8ec1383b240b5ba15ffb9743fceb3c0e?s=128

Phil Nash

October 08, 2016
Tweet

Transcript

  1. THINKING OFFLINE

  2. Phil Nash @philnash http://philna.sh philnash@twilio.com

  3. THINKING OFFLINE

  4. AN INTRODUCTION TO SERVICE WORKERS

  5. SERVICE WORKERS ARE SCRIPTS THAT INTERCEPT NETWORK REQUESTS

  6. SO WEB DEVELOPERS CAN TREAT THE NETWORK AS AN ENHANCEMENT

  7. AND PROVIDE OFFLINE EXPERIENCES FOR USERS OF WEB APPLICATIONS

  8. AND PROVIDE OFFLINE EXPERIENCES FOR USERS OF WEB APPLICATIONS

  9. AND PROVIDE BETTER EXPERIENCES FOR USERS OF WEB APPLICATIONS

  10. None
  11. LET'S MAKE EVERYTHING OFFLINE!

  12. A NON-TRIVIAL APPLICATION

  13. None
  14. I HAVE A CONFESSION

  15. “A WEB APPLICATION THAT WAS BUILT FROM THE GROUND UP

    AS OFFLINE FIRST”
  16. PROGRESSIVE ENHANCEMENT

  17. WHAT DO WE NEED?

  18. BASE EXPERIENCE

  19. STATIC ASSETS

  20. OFFLINE PAGES

  21. BACKGROUND SYNC

  22. BASE EXPERIENCE

  23. GOOD NEWS!

  24. STATIC ASSETS

  25. DEMO

  26. THE SERVICE WORKER LIFECYCLE

  27. INSTALLING INSTALLED ACTIVATING ACTIVATED REDUNDANT

  28. CACHE INVALIDATION

  29. DEMO

  30. 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 ( " " ) ; 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 .
  31. s e l f . s k i p W

    a i t i n g ( ) ;
  32. 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 .
  33. TAKE BACK CONTROL

  34. OFFLINE PAGES

  35. DATA VS FILES

  36. “FOR URL ADDRESSABLE RESOURCES, USE THE CACHE API. FOR ALL

    OTHER DATA, USE INDEXEDDB”
  37. http://bit.ly/cache-vs-db

  38. IndexedDB

  39. None
  40. IDB-PROMISES LOCALFORAGE IDB-KEYVAL DEXIE POUCHDB

  41. IDB-PROMISES LOCALFORAGE IDB-KEYVAL DEXIE POUCHDB

  42. 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 .
  43. 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 ( " " ) ; } ) ; } ) ; 0 1 . 0 2 . 0 3 . 0 4 . 0 5 . 0 6 . 0 7 . 0 8 . 0 9 . 1 0 .
  44. 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 .
  45. RENDER ON THE SERVER

  46. None
  47. APP SHELL

  48. None
  49. BOOTSTRAP FROM THE PAGE OR THE DATABASE

  50. UNIVERSAL JAVASCRIPT

  51. BACKGROUND SYNC

  52. DEMO

  53. 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 ' ) ;
  54. 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 .
  55. CONFESSION TIME

  56. I THE WEB

  57. BUT... I JUST PUBLISHED MY FIRST iOS APP

  58. Support preview

  59. THINKING OFFLINE

  60. BASE EXPERIENCE

  61. STATIC ASSETS

  62. OFFLINE PAGES

  63. BACKGROUND SYNC

  64. TREAT THE NETWORK AS AN ENHANCEMENT

  65. None
  66. THANKS!

  67. Thanks! @philnash http://philna.sh philnash@twilio.com