service workers in javascript
TRANSCRIPT
What’s happening with Service Workers?
Let’s start with a survey
Q1: How many of you are aware of more than one feature of “Service Workers”?
Q2: How many of you are using Service Workers?
Q3: How are you using Service Workers?
Let’s start!
What is a Service Worker?
ScriptableRequest Interceptor / Network
Proxy
Prefetch resources
Syncing dataWhen online after being offline
Offline capabilitiesCache maintenance
Demo
Fallback responsee.g. 404 request for an image
Mock response
Communication between renderer and Service worker possible via
PostMessage API
Timeout requests.Don’t have SPOFs. Enforce latency SLA on third party requests.
Offline Analytics cachingDemo
Request JSON and render HTML via cached templates
Drastically reduces the data sent to client on every page refresh.
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
Images and Service Workers
Dynamic image formatRewrite image url based upon the client headers for supported
image formats
Image spritesheetDon’t rely on CSS background-image for using Image sprites
Cached header for JPEGsBased on Facebook Engineering’s image optimization post
Security
CSP in use with Service Workers
Resources:● W3C spec
● Service Worker specification
● Service Worker Demos
● Is Service Worker ready?
Slides:● There’s a proxy in your browser - Ilya Grigorik
Thanks. Questions?
+ApoorvSaxena@apoorv_saxena