Service workers in JavaScript
-
Upload
apoorv-saxena -
Category
Software
-
view
1.012 -
download
0
Transcript of Service workers in JavaScript
![Page 1: Service workers in JavaScript](https://reader031.fdocuments.us/reader031/viewer/2022030307/58ea49b51a28abc4698b5a7d/html5/thumbnails/1.jpg)
What’s happening with Service Workers?
![Page 2: Service workers in JavaScript](https://reader031.fdocuments.us/reader031/viewer/2022030307/58ea49b51a28abc4698b5a7d/html5/thumbnails/2.jpg)
Let’s start with a survey
![Page 3: Service workers in JavaScript](https://reader031.fdocuments.us/reader031/viewer/2022030307/58ea49b51a28abc4698b5a7d/html5/thumbnails/3.jpg)
Q1: How many of you are aware of more than one feature of “Service Workers”?
![Page 4: Service workers in JavaScript](https://reader031.fdocuments.us/reader031/viewer/2022030307/58ea49b51a28abc4698b5a7d/html5/thumbnails/4.jpg)
Q2: How many of you are using Service Workers?
![Page 5: Service workers in JavaScript](https://reader031.fdocuments.us/reader031/viewer/2022030307/58ea49b51a28abc4698b5a7d/html5/thumbnails/5.jpg)
Q3: How are you using Service Workers?
![Page 6: Service workers in JavaScript](https://reader031.fdocuments.us/reader031/viewer/2022030307/58ea49b51a28abc4698b5a7d/html5/thumbnails/6.jpg)
Let’s start!
![Page 7: Service workers in JavaScript](https://reader031.fdocuments.us/reader031/viewer/2022030307/58ea49b51a28abc4698b5a7d/html5/thumbnails/7.jpg)
What is a Service Worker?
![Page 8: Service workers in JavaScript](https://reader031.fdocuments.us/reader031/viewer/2022030307/58ea49b51a28abc4698b5a7d/html5/thumbnails/8.jpg)
ScriptableRequest Interceptor / Network
Proxy
![Page 9: Service workers in JavaScript](https://reader031.fdocuments.us/reader031/viewer/2022030307/58ea49b51a28abc4698b5a7d/html5/thumbnails/9.jpg)
Prefetch resources
![Page 10: Service workers in JavaScript](https://reader031.fdocuments.us/reader031/viewer/2022030307/58ea49b51a28abc4698b5a7d/html5/thumbnails/10.jpg)
Syncing dataWhen online after being offline
![Page 11: Service workers in JavaScript](https://reader031.fdocuments.us/reader031/viewer/2022030307/58ea49b51a28abc4698b5a7d/html5/thumbnails/11.jpg)
Offline capabilitiesCache maintenance
Demo
![Page 12: Service workers in JavaScript](https://reader031.fdocuments.us/reader031/viewer/2022030307/58ea49b51a28abc4698b5a7d/html5/thumbnails/12.jpg)
Fallback responsee.g. 404 request for an image
![Page 13: Service workers in JavaScript](https://reader031.fdocuments.us/reader031/viewer/2022030307/58ea49b51a28abc4698b5a7d/html5/thumbnails/13.jpg)
Mock response
![Page 14: Service workers in JavaScript](https://reader031.fdocuments.us/reader031/viewer/2022030307/58ea49b51a28abc4698b5a7d/html5/thumbnails/14.jpg)
Communication between renderer and Service worker possible via
PostMessage API
![Page 15: Service workers in JavaScript](https://reader031.fdocuments.us/reader031/viewer/2022030307/58ea49b51a28abc4698b5a7d/html5/thumbnails/15.jpg)
Timeout requests.Don’t have SPOFs. Enforce latency SLA on third party requests.
![Page 16: Service workers in JavaScript](https://reader031.fdocuments.us/reader031/viewer/2022030307/58ea49b51a28abc4698b5a7d/html5/thumbnails/16.jpg)
Offline Analytics cachingDemo
![Page 17: Service workers in JavaScript](https://reader031.fdocuments.us/reader031/viewer/2022030307/58ea49b51a28abc4698b5a7d/html5/thumbnails/17.jpg)
Request JSON and render HTML via cached templates
Drastically reduces the data sent to client on every page refresh.
![Page 18: Service workers in JavaScript](https://reader031.fdocuments.us/reader031/viewer/2022030307/58ea49b51a28abc4698b5a7d/html5/thumbnails/18.jpg)
Don’t invalidate complete resource
Get and use the diff of the updated resource.
**based on HTTP archive data, after 30 days the CSS data is 97% similar
![Page 19: Service workers in JavaScript](https://reader031.fdocuments.us/reader031/viewer/2022030307/58ea49b51a28abc4698b5a7d/html5/thumbnails/19.jpg)
Images and Service Workers
![Page 20: Service workers in JavaScript](https://reader031.fdocuments.us/reader031/viewer/2022030307/58ea49b51a28abc4698b5a7d/html5/thumbnails/20.jpg)
Dynamic image formatRewrite image url based upon the client headers for supported
image formats
![Page 21: Service workers in JavaScript](https://reader031.fdocuments.us/reader031/viewer/2022030307/58ea49b51a28abc4698b5a7d/html5/thumbnails/21.jpg)
Image spritesheetDon’t rely on CSS background-image for using Image sprites
![Page 22: Service workers in JavaScript](https://reader031.fdocuments.us/reader031/viewer/2022030307/58ea49b51a28abc4698b5a7d/html5/thumbnails/22.jpg)
![Page 23: Service workers in JavaScript](https://reader031.fdocuments.us/reader031/viewer/2022030307/58ea49b51a28abc4698b5a7d/html5/thumbnails/23.jpg)
Cached header for JPEGsBased on Facebook Engineering’s image optimization post
![Page 25: Service workers in JavaScript](https://reader031.fdocuments.us/reader031/viewer/2022030307/58ea49b51a28abc4698b5a7d/html5/thumbnails/25.jpg)
Security
![Page 26: Service workers in JavaScript](https://reader031.fdocuments.us/reader031/viewer/2022030307/58ea49b51a28abc4698b5a7d/html5/thumbnails/26.jpg)
CSP in use with Service Workers
![Page 27: Service workers in JavaScript](https://reader031.fdocuments.us/reader031/viewer/2022030307/58ea49b51a28abc4698b5a7d/html5/thumbnails/27.jpg)
![Page 28: Service workers in JavaScript](https://reader031.fdocuments.us/reader031/viewer/2022030307/58ea49b51a28abc4698b5a7d/html5/thumbnails/28.jpg)
Resources:● W3C spec
● Service Worker specification
● Service Worker Demos
● Is Service Worker ready?
Slides:● There’s a proxy in your browser - Ilya Grigorik
![Page 29: Service workers in JavaScript](https://reader031.fdocuments.us/reader031/viewer/2022030307/58ea49b51a28abc4698b5a7d/html5/thumbnails/29.jpg)
Thanks. Questions?
+ApoorvSaxena@apoorv_saxena