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

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
12. LET'S MAKE EVERYTHING OFFLINE!
13. A NON-TRIVIAL APPLICATION
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
47. APP SHELL
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
66. THANKS!
68. Use the code PNASH20 for 20% off ticket prices
69. Thanks! @philnash http:/ /philna.sh philnash@twilio.com