service workers in javascript

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

Push NotificationsDemo: PushCrew

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