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

An Introduction to Service Workers

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:

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

8ec1383b240b5ba15ffb9743fceb3c0e?s=128

Phil Nash

April 26, 2016
Tweet

Transcript

  1. AN INTRODUCTION TO SERVICE WORKERS JS Monthly London / April

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

  3. AN INTRODUCTION TO SERVICE WORKERS

  4. SERVICE WORKERS ARE SCRIPTS THAT INTERCEPT NETWORK REQUESTS

  5. SO WEB DEVELOPERS CAN TREAT THE NETWORK AS AN ENHANCEMENT

  6. AND PROVIDE OFFLINE EXPERIENCES FOR USERS OF WEB APPLICATIONS

  7. A SLIGHTLY LONGER INTRODUCTION TO SERVICE WORKERS

  8. XMLHttpRequest

  9. IN THE FUTURE WE WILL WONDER HOW WE COPED WITHOUT

    SERVICE WORKERS
  10. THE BIRTH OF THE SERVICE WORKER

  11. 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 .
  12. “THE APPLICATION CACHE IS A DOUCHEBAG”

  13. The Spec https:/ /slightlyoff.github.io/ServiceWorker/spec/service

  14. Browsers 40 27 44

  15. SO WHAT DOES IT REALLY DO?

  16. 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 " ) ;
  17. 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 .
  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 " ) . 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 .
  19. 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 .
  20. IT'S A PROXY THAT YOU CONTROL

  21. SECURITY?

  22. HTTPS

  23. LOCALHOST

  24. DEMO

  25. WHY?

  26. WEB VS NATIVE

  27. Native Web Online by default Offline by default Discoverable on

    the web App store installation
  28. Native Web Offline first Offline by default Discoverable on the

    web App store installation
  29. DON'T CARE FOR OFFLINE?

  30. PERFORMANCE

  31. FALLBACKS

  32. None
  33. THERE'S MORE!

  34. PUSH NOTIFICATIONS

  35. DEMO

  36. Browsers 42 44

  37. WITH GREAT POWER…

  38. BACKGROUND SYNC

  39. DEMO

  40. Browsers 49

  41. GEOFENCING

  42. MAYBE...?

  43. PROGRESSIVE WEB APPS

  44. Progressive Web Apps • Service Worker (+ HTTPS) • manifest.json

    • User engagement
  45. APP INSTALL BANNERS

  46. None
  47. ICON ON HOMESCREEN

  48. ...

  49. $$ PROFIT! $$

  50. SERVICE WORKERS

  51. ENHANCEMENT

  52. IN THE FUTURE WE WILL WONDER HOW WE COPED WITHOUT

    SERVICE WORKERS
  53. 1:13

  54. THANKS!

  55. Use code PNASH20 for 20% off tickets

  56. 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
  57. 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