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

Thinking Offline at Frontend Conference Zurich

8ec1383b240b5ba15ffb9743fceb3c0e?s=47 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

8ec1383b240b5ba15ffb9743fceb3c0e?s=128

Phil Nash

September 01, 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. DEMO

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

  13. A NON-TRIVIAL APPLICATION

  14. None
  15. I HAVE A CONFESSION

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

    AS OFFLINE FIRST”
  17. PROGRESSIVE ENHANCEMENT

  18. WHAT DO WE NEED?

  19. BASE EXPERIENCE

  20. STATIC ASSETS

  21. OFFLINE PAGES

  22. BACKGROUND SYNC

  23. BASE EXPERIENCE

  24. GOOD NEWS!

  25. STATIC ASSETS

  26. DEMO

  27. THE SERVICE WORKER LIFECYCLE

  28. INSTALLING INSTALLED ACTIVATING ACTIVATED REDUNDANT

  29. CACHE INVALIDATION

  30. DEMO

  31. 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 .
  32. s e l f . s k i p W

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

  35. OFFLINE PAGES

  36. DATA VS FILES

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

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

  39. IndexedDB

  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 ( " Y a y " ) ; } ) ; } ) ; 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 LOVE 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. None
  68. Use the code PNASH20 for 20% off ticket prices

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