An Introduction to Service Workers - DevDay 2016

Service Workers are the biggest thing to hit the browser since XMLHttpRequest. We'll take a look at what the Service Worker can do for your app and more importantly, your users. We'll see the surprisingly small amount of code you need to get started with a Service Worker and finally we'll take a look at Progressive Web Apps and how the Service Worker will take part in a revolution for web applications.

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. AN INTRODUCTION TO SERVICE WORKERS
2. Phil Nash @philnash http:/ /philna.sh philnash@twilio.com
5. AN INTRODUCTION TO SERVICE WORKERS
6. SERVICE WORKERS ARE SCRIPTS THAT INTERCEPT NETWORK REQUESTS
7. SO WEB DEVELOPERS CAN TREAT THE NETWORK AS AN ENHANCEMENT
8. AND PROVIDE OFFLINE EXPERIENCES FOR USERS OF WEB APPLICATIONS
10. A SLIGHTLY LONGER INTRODUCTION TO SERVICE WORKERS
11. XMLHttpRequest
12. IN THE FUTURE WE WILL WONDER HOW WE COPED WITHOUT SERVICE WORKERS
13. THE BIRTH OF THE SERVICE WORKER
14. The Application Cache C A C H E M A N I F E S T # V e r s i o n 7 C A C H E : # S t y l e s h e e t s / s t y l e / a p p . c s s # J a v a S c r i p t s / j s / a p p . j s 0 1 . 0 2 . 0 3 . 0 4 . 0 5 . 0 6 . 0 7 . 0 8 .
15. “THE APPLICATION CACHE IS A DOUCHEBAG”
16. The Spec https:/ /slightlyoff.github.io/ServiceWorker/spec/service_worker/
17. Browsers 40 27 44 4
18. The other browsers? preview under consideration
19. SO WHAT DOES IT REALLY DO?
20. Install it 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 " ) ;
21. Install it 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 " , { s c o p e : " / a d m i n " } ) ; 0 1 . 0 2 . 0 3 .
22. Install it 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 ( ) { c o n s o l e . l o g ( " " ) ; } ) . c a t c h ( f u n c t i o n ( ) { c o n s o l e . l o g ( " " ) ; } ) ; 0 1 . 0 2 . 0 3 . 0 4 . 0 5 .
23. It intercepts network requests / / s w . j s s e l f . a d d E v e n t L i s t e n e r ( " f e t c h " , f u n c t i o n ( e v e n t ) { / / d o s o m e t h i n g } ) ; 0 1 . 0 2 . 0 3 . 0 4 .
24. IT'S A PROXY THAT YOU CONTROL
25. SECURITY?
26. HTTPS
27. LOCALHOST
28. DEMO
29. WHY?
30. WEB VS NATIVE
31. Native Web Online by default Offline by default Discoverable on the web App store installation
32. Native Web Offline first Offline by default Discoverable on the web App store installation
33. DON'T CARE FOR OFFLINE?
34. PERFORMANCE
35. FALLBACKS
37. PUSH NOTIFICATIONS
38. DEMO
39. Browsers 42 44 37 4
40. WITH GREAT POWER…
41. BACKGROUND SYNC
42. DEMO
43. Browsers 49
44. GEOFENCING
45. MAYBE...?
46. PROGRESSIVE WEB APPS
47. Progressive Web Apps • Service Worker (+ HTTPS) • manifest.json • User engagement
48. APP INSTALL BANNERS
50. ICON ON HOMESCREEN
51. ...
52. $$ PROFIT! $$
53. SERVICE WORKERS
54. ENHANCEMENT
55. AN INTRODUCTION TO SERVICE WORKERS
56. SERVICE WORKERS ARE SCRIPTS THAT INTERCEPT NETWORK REQUESTS
57. SO WEB DEVELOPERS CAN TREAT THE NETWORK AS AN ENHANCEMENT
58. AND PROVIDE OFFLINE EXPERIENCES FOR USERS OF WEB APPLICATIONS
59. AND PROVIDE OFFLINE EXPERIENCES FOR USERS OF WEB APPLICATIONS
60. AND PROVIDE BETTER EXPERIENCES FOR USERS OF WEB APPLICATIONS
61. IN THE FUTURE WE WILL WONDER HOW WE COPED WITHOUT SERVICE WORKERS
62. AND IF YOU'RE NOT YET CONVINCED...
63. 0:00 / 1:13
64. THANKS!
65. Thanks! @philnash http:/ /philna.sh philnash@twilio.com