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

An Introduction to Service Workers - Code Europe Krakow

8ec1383b240b5ba15ffb9743fceb3c0e?s=47 Phil Nash
December 05, 2016

An Introduction to Service Workers - Code Europe Krakow

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

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

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

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

  17. Browsers 40 27 44 4

  18. The other browsers? preview under consideration

  19. SO WHAT DOES IT REALLY DO?

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

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

  22. Install it navigator.serviceWorker.register("/sw.js").then(function(){ console.log("Yay!"); }).catch(function(){ console.log("Boo!"); }); 01. 02. 03.

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

    do something }); 01. 02. 03. 04.
  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 O ine by default Discoverable

    on the web App store installation
  32. Native Web O ine rst O ine by default Discoverable

    on the web App store installation
  33. DON'T CARE FOR OFFLINE?

  34. PERFORMANCE

  35. FALLBACKS

  36. None
  37. THERE'S MORE!

  38. BUT HOW?

  39. AN EXAMPLE APPLICATION

  40. None
  41. PROGRESSIVE ENHANCEMENT

  42. WHAT DO WE NEED?

  43. BASE EXPERIENCE

  44. STATIC ASSETS

  45. OFFLINE PAGES

  46. BACKGROUND SYNC

  47. PUSH NOTIFICATIONS

  48. BASE EXPERIENCE

  49. GOOD NEWS!

  50. STATIC ASSETS

  51. DEMO

  52. THE SERVICE WORKER LIFECYCLE

  53. INSTALLING INSTALLED ACTIVATING ACTIVATED REDUNDANT

  54. CACHE INVALIDATION

  55. DEMO

  56. navigator.serviceWorker.register("/sw.js").then(function(reg) { console.log("Yay!"); reg.addEventListener("updatefound", function(){ var worker = reg.installing reg.installing.addEventListener("statechange",

    function(e) { if (worker.state == "installed") { worker.postMessage({action: "update"}); } }) }); }); 01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11.
  57. self.skipWaiting();

  58. var sw = navigator.serviceWorker; sw.addEventListener("controllerchange", function() { window.location.reload(); }); 01.

    02. 03. 04.
  59. TAKE BACK CONTROL

  60. OFFLINE PAGES

  61. DATA VS FILES

  62. “FOR URL ADDRESSABLE RESOURCES, USE THE CACHE API. FOR ALL

    OTHER DATA, USE INDEXEDDB”
  63. http:/ /bit.ly/cache-vs-db

  64. IndexedDB

  65. IDB-KEYVAL LOCALFORAGE IDB DEXIE POUCHDB

  66. IDB-KEYVAL LOCALFORAGE IDB DEXIE POUCHDB

  67. var db = new Dexie("messageStore", { autoOpen: true }); db.version(1).stores({

    messages: "++,createdAt" }); 01. 02. 03. 04. 05. 06.
  68. db.transaction("w", db.messages, function() { db.messages.put({ from: FROM_NUMBER, to: TO_NUMBER, createAt:

    new Date(), body: "Service Workers rock " }).then(function(message){ console.log("Yay"); }); }); 01. 02. 03. 04. 05. 06. 07. 08. 09. 10.
  69. db.transaction("r", db.messages, function() { db.messages.each(function(item, cursor) { render(item); }); });

    01. 02. 03. 04. 05.
  70. RENDER ON THE SERVER

  71. None
  72. APP SHELL

  73. None
  74. BOOTSTRAP FROM THE PAGE OR THE DATABASE

  75. UNIVERSAL JAVASCRIPT

  76. BACKGROUND SYNC

  77. DEMO

  78. reg.sync.register('sentMessage');

  79. self.addEventListener('sync', function(event) { // do the thing }); 01. 02.

    03.
  80. PUSH NOTIFICATIONS

  81. DEMO

  82. PROGRESSIVE WEB APPS

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

    • User engagement
  84. APP INSTALL BANNERS

  85. None
  86. ENHANCEMENT

  87. AN INTRODUCTION TO SERVICE WORKERS

  88. SERVICE WORKERS ARE SCRIPTS THAT INTERCEPT NETWORK REQUESTS

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

  90. AND PROVIDE OFFLINE EXPERIENCES FOR USERS OF WEB APPLICATIONS

  91. AND PROVIDE OFFLINE EXPERIENCES FOR USERS OF WEB APPLICATIONS

  92. AND PROVIDE BETTER EXPERIENCES FOR USERS OF WEB APPLICATIONS

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

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

  95. None
  96. THANKS!

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