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

An Introduction to Service Workers - DevDay 2016

8ec1383b240b5ba15ffb9743fceb3c0e?s=47 Phil Nash
September 15, 2016

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

8ec1383b240b5ba15ffb9743fceb3c0e?s=128

Phil Nash

September 15, 2016
Tweet

Transcript

  1. AN INTRODUCTION TO SERVICE WORKERS

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

  3. None
  4. None
  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

  9. None
  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

  36. None
  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

  49. None
  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