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

Transcript

1. AN INTRODUCTION TO SERVICE WORKERS
2. Phil Nash @philnash http:/ /philna.sh philnash@twilio.com
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
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
37. THERE'S MORE!
38. BUT HOW?
39. AN EXAMPLE APPLICATION
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
72. APP SHELL
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
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...
96. THANKS!
97. Thanks! @philnash http:/ /philna.sh philnash@twilio.com