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

An Introduction to Service Workers at The Web Meetup

8ec1383b240b5ba15ffb9743fceb3c0e?s=47 Phil Nash
February 13, 2018

An Introduction to Service Workers at The Web Meetup

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://github.com/w3c/ServiceWorker
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

The Service Worker trailer: https://www.youtube.com/watch?v=QiXLaisCq10

8ec1383b240b5ba15ffb9743fceb3c0e?s=128

Phil Nash

February 13, 2018
Tweet

Transcript

  1. AN INTRODUCTION TO SERVICE WORKERS

  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 CACHE MANIFEST # Version 7 CACHE: #

    Stylesheets /style/app.css # JavaScripts /js/app.js 01. 02. 03. 04. 05. 06. 07. 08.
  12. “THE APPLICATION CACHE IS A DOUCHEBAG”

  13. The Spec https:/ /w3c.github.io/ServiceWorker/

  14. Browsers 40 27 44 4

  15. The other browsers? preview 17 beta iOS 11.3 macOS 10.13.4

  16. SO WHAT DOES IT REALLY DO?

  17. Install it navigator.serviceWorker.register("/sw.js");

  18. Install it navigator.serviceWorker.register("/sw.js", { scope: "/admin" }); 01. 02. 03.

  19. Install it navigator.serviceWorker.register("/sw.js").then(function(){ console.log(" "); }).catch(function(){ console.log(" "); }); 01.

    02. 03. 04. 05.
  20. It intercepts network requests // sw.js self.addEventListener("fetch", function(event) { //

    do something }); 01. 02. 03. 04.
  21. IT'S A PROXY THAT YOU CONTROL

  22. SECURITY?

  23. HTTPS

  24. LOCALHOST

  25. DEMO

  26. WHY?

  27. WEB VS NATIVE

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

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

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

  31. PERFORMANCE

  32. FALLBACKS

  33. None
  34. PUSH NOTIFICATIONS

  35. DEMO

  36. Browsers 42 44 37 4 preview 17

  37. WITH GREAT POWER…

  38. BACKGROUND SYNC

  39. DEMO

  40. Browsers 49 5.4

  41. PROGRESSIVE WEB APPS

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

    • User engagement
  43. APP INSTALL BANNERS

  44. None
  45. ICON ON HOMESCREEN

  46. ...

  47. $$ PROFIT! $$

  48. SERVICE WORKERS

  49. SERVICE WORKERS ARE SCRIPTS THAT INTERCEPT NETWORK REQUESTS

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

  51. AND PROVIDE OFFLINE EXPERIENCES FOR USERS OF WEB APPLICATIONS

  52. AND PROVIDE OFFLINE EXPERIENCES FOR USERS OF WEB APPLICATIONS

  53. AND PROVIDE BETTER EXPERIENCES FOR USERS OF WEB APPLICATIONS

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

    SERVICE WORKERS
  55. AND IF YOU'RE NOT YET CONVINCED...

  56. None
  57. THANKS!

  58. Thanks! @philnash http:/ /philna.sh philnash@twilio.com