Conffab by Web Directions
  • Speakers
  • Presentations
  • Conferences
  • Live streams
  • Topics
  • Pricing & Plans
  • Browse
  • Signup
  • Sign In
  • Speakers
  • Presentations
  • Conferences
  • Live streams
  • Topics
  • Pricing & Plans
  • Browse
  • Signup
  • Sign In

Search Conffab

Search presentations, speakers, transcripts, slides and topics.

Searching Conffab

Getting Offline with the Service Worker

Chris Roberts at Code 2015
Sign up for Conffab Free to watch this and hundreds of other videos for free
  • Details
  • Keypoints

As the web is increasingly accessible in more places, so is the fragility of the connection. In this presentation together we will learn about how to progressively enhance the delivery of content with the Service Worker API.

We will cover the notion of offline first as well as a take-away introduction to the Service Worker API through a practical example and demonstration of the code and tools you can use to create an offline experience for your users.

Australia is still a very disconnected country. We have large areas with no data network. So Chris’s example of needing to check a hotel booking on a plane is pretty common and will be a massive issue for many regions as they start getting online.

Expedia’s site stores the user’s most recently accessed information, as it’s likely they will want it again.

Offline First: the next progressive enhancement technique. “Or perhaps it should be ‘unreliable connection first’…”

Don’t think of offline as an error situation – we have responsibility to handle the case. Time will not solve this problem – as time goes on, we won’t suddenly have 100% of people on great connections. As time goes on people connect in more and more different ways.

Offline strategies:

  • reduce reliance on the server
  • sync when possible – make use of good connections
  • gracefully resolve conflicts
  • query device APIs

Great person to follow on this stuff is Jake Archibald. Also check out his book the “offline cookbook” from 2014 (on his website).

Service worker life cycle:

  • registration
  • installation/cache open
  • proxy the network
  • termination

Browser support:

  • Chrome and Opera yes, now!
  • Firefox soon
  • IE under consideration for Edge
  • Safari no

(John Allsopp notes afterwards – a great way to influence browser vendors is to use things and show the need and demand. Also as this is an enhancement you don’t have to wait for full coverage to start giving the benefit to people who can use it.)

Q&A

Q: do any frameworks have good support for service workers?

A: there are some, but in the meantime work on identifying the shell of your app that you should be serving while offline.

Q: any restrictions on what or how much you can cache?

A: pretty much any http request can be handled; noting CORS impacts

You may also be interested in

Thumbnail for Pop-up Accessibility

Pop-up Accessibility

Rhiana Heath

Code 2015

Thumbnail for What Comes Next for the Web Platform?

What Comes Next for the Web Platform?

Alex Russell

Code 2015

Thumbnail for Console Dot

Console Dot

Warwick Cox

Code 2015

Thumbnail for Back to the Future with Web Components

Back to the Future with Web Components

Jonathon Creenaune

Code 2015

Thumbnail for Crossing The Streams

Crossing The Streams

Simon Knox

Code 2015

Thumbnail for Dawn of the Progressive Single Page App

Dawn of the Progressive Single Page App

Mark Dalgleish

Code 2015

Thumbnail for Eliminate JavaScript Code Smells

Eliminate JavaScript Code Smells

Elijah Manor

Code 2015

Thumbnail for ES6 Symbols, What They Are and How to Use Them

ES6 Symbols, What They Are and How to Use Them

Clark Pan

Code 2015

More presentations from Code 2015

Thumbnail for The State of the Animation

The State of the Animation

Rachel Nabors

Code 2015

Thumbnail for What Comes Next for the Web Platform?

What Comes Next for the Web Platform?

Alex Russell

Code 2015

Thumbnail for Async and Await

Async and Await

James Hunter

Code 2015

Thumbnail for Async Frontiers in JavaScript

Async Frontiers in JavaScript

Domenic Denicola

Code 2015

Thumbnail for Classing up ES6

Classing up ES6

Andy Sharman

Code 2015

Thumbnail for Canvas Cold War

Canvas Cold War

Simon Swain

Code 2015

Thumbnail for Current Best Practice in Front End Ops

Current Best Practice in Front End Ops

Alex Sexton

Code 2015

Thumbnail for Stop the Fanaticism – Using the Right Tools for the Job

Stop the Fanaticism – Using the Right Tools for the Job

Kassandra Perch

Code 2015

© 2026

  • About
  • Speakers
  • Presentations
  • Conferences
  • Contact
  • Sign in
Sign Up