An Introduction to Service Workers

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/

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
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
9. A SLIGHTLY LONGER INTRODUCTION TO SERVICE WORKERS
10. XMLHttpRequest
11. IN THE FUTURE WE WILL WONDER HOW WE COPED WITHOUT SERVICE WORKERS
12. THE BIRTH OF THE SERVICE WORKER
13. 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 .
14. “THE APPLICATION CACHE IS A DOUCHEBAG”
15. The Spec https:/ /slightlyoff.github.io/ServiceWorker/spec/service_worker/
16. Browsers 40 27 44
17. SO WHAT DOES IT REALLY DO?
18. 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 " ) ;
19. 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 .
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 " ) . 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 .
21. 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 .
22. IT'S A PROXY THAT YOU CONTROL
23. SECURITY?
24. HTTPS
25. LOCALHOST
26. DEMO
27. WHY?
28. WEB VS NATIVE
29. Native Web Online by default Offline by default Discoverable on the web App store installation
30. Native Web Offline first Offline by default Discoverable on the web App store installation
31. DON'T CARE FOR OFFLINE?
32. PERFORMANCE
33. FALLBACKS
35. THERE'S MORE!
36. PUSH NOTIFICATIONS
37. DEMO
38. Browsers 42 44
39. WITH GREAT POWER…
40. BACKGROUND SYNC
41. DEMO
42. Browsers 49
43. GEOFENCING
44. MAYBE...?
45. PROGRESSIVE WEB APPS
46. Progressive Web Apps • Service Worker (+ HTTPS) • manifest.json • User engagement
47. APP INSTALL BANNERS
49. ICON ON HOMESCREEN
50. ...
51. $$ PROFIT! $$
52. SERVICE WORKERS
53. ENHANCEMENT
54. IN THE FUTURE WE WILL WONDER HOW WE COPED WITHOUT SERVICE WORKERS
55. AND IF YOU'RE NOT YET CONVINCED...
57. THANKS!
59. Use the code PNASH20 for 20% off ticket prices
60. Help me! On a scale of 0 to 10, how likely is it that you would recommend this talk to a friend or colleague? 020 3322 5761
61. Thanks! @philnash http:/ /philna.sh philnash@twilio.com On a scale of 0 to 10, how likely is it that you would recommend this talk to a friend or colleague? 020 3322 5761