Service Worker Libraries

Use our service worker libraries to simplify your development by eliminating service worker boilerplate code.

Overview of Service Worker Libraries

sw-precache—Integrates with your build process to generate a service worker that precaches static assets such as, for example, an Application Shell.

sw-toolbox—Implement common runtime caching patterns such as dynamic content, API calls and third-party resources as easily as writing a README.

sw-offline-google-analytics—Temporarily hold and retry analytics requests to avoid losing them to network disconnections.

Why use service worker libraries?

You're sold on the advantages of adding a service worker to your web app—swapping the uncertainty of the network for the promise of a fast, offline- first, service worker-powered experience. But to write your own service worker from scratch, you have to clear some hurdles:

  • Precaching URLs easily and reliably.
  • Incrementing a cache version string to ensure that precached resources are updated.
  • Implementing a cache expiration strategy to account for cache size or entry age.
  • Building common patterns such as lie-fi network timeouts and boilerplate code.
  • Capturing and reporting Google analytics data during offline usage.

You can address all of these drawbacks using our service worker libraries.

Service Worker Precache

Service Worker Precache (sw-precache) is a module for generating a service worker that precaches resources. The module can be used in JavaScript-based build scripts, like those written with gulp, and it also provides a command-line interface. You can use the module directly, or if you'd prefer, use of the wrappers around sw-precache for specific build environments, like webpack.

It can be used alongside the sw-toolbox library, which works well when following the App Shell + dynamic content model.

The full documentation is in the read me, and the getting started guide provides a quicker jumping off point.

Get sw-precache

Features

Feature Summary
Precache Your App Shell Your web app's shell—its core HTML, JavaScript, and CSS—can be precached when a user visits your page.
Build-time Integration Drop it into your existing build process: Gulp, Grunt, or command line.
Stay Fresh Changes in your build update the service worker script. Users get updates, but you don't have to manually version your content or caches.
No Network, No Problem Your static resources are served cache-first, quickly, whether or not there's a network available.

Service Worker Toolbox

Service Worker Toolbox (sw-toolbox) provides some simple helpers for use in creating your own service workers. Specifically, it provides common caching patterns and an expressive approach to using those strategies for runtime requests.

Get sw-toolbox

Features

Feature Summary
Runtime Caching Cache large or infrequently used resources, like images, at runtime, when they're first used.
Offline Fallbacks Load fresh images, API responses, or other dynamic content from the network while online, but fall back to a cached placeholder while offline.
Goodbye Lie-Fi Fight lie-fi by automatically falling back to a cached response when the network is too slow.
Battle Cache Bloat That image from last month doesn't need to be cached forever. Least-recently used and age-based cache expiration helps free up space.

Offline Google Analytics

Offline Google Analytics temporarily holds and retries analytics requests to avoid losing them to network disconnections. This tool easily installs to your build system using npm and is easily imported into your service worker script. Configure it using a parameterized function call.

Get sw-offline-google-analytics

Features

Feature Summary
Offline Google Analytics Creates fetch handlers that ensure the Google Analytics JavaScript is available offline.
Temporarily Caches Data Holds analytics requests that are made when the device is offline and retries them the next time the service worker starts up.
Custom Replay Values Key/value pairs to be added to replayed Google Analytics requests. For example, you might set a custom dimension to indicate that a request was replayed.
Modified Hit Parameters Lets you programmatically modify a hit's parameters to, for example, track the elapsed time between when a hit is attempted and when it is replayed.

Learn More

Articles

Getting started with sw-toolbox by Dean Hume

Adding offline support to create-react-app using sw-precache by Jeffrey Posnick

The Service Workers in Production case study takes a close look at how the sw-precache and sw-toolbox libraries were used together to power the Google I/O 2015 web app.

Codelabs

Adding a Service Worker with sw-precache

Videos

Jeff Posnick's presentation from the Chrome Dev Summit 2015, Instant Loading with Service Workers, describes how to effectively use sw-precache alongside sw-toolbox to build web apps that load quickly and work offline.

Slides

Matt Gaunt and Addy Osmani explain how our service worker libraries can help your web apps work offline in next to no time. This video describes both sw-precache and sw-toolbox.

In this episode of Totally Tooling Mini-Tips, Matt and Addy step through sw-toolbox.

From Google I/O 2016, Mat Scales describes great libraries and tools for making progressive web apps load fast, work great offline, and enhace progressively, all for a better user experience.