Basic Service Worker Sample

Available in Chrome 40+ | View on GitHub | Browse Samples

Background

This sample demonstrates a basic service worker that could be used as-is, or as a starting point for further customization.

What It Does

Precaches the HTML, JavaScript, and CSS files needed to display this page offline. (Try it out by reloading the page without a network connection!)
Cleans up the previously precached entries when the cache name is updated.
Intercepts network requests, returning a cached response when available.
If there's no cached response, fetches the response from the network and adds it to the cache for future use.

You can confirm the service worker's behavior using the Application panel of Chrome's DevTools.

What It Doesn't Do

Automatically version any of the precached resources.
You must manually update the CACHES.PRECACHE name to pick up new versions after updating anything!
Cache-bust the precaching requests.
The cache.addAll() call may be fulfilled with responses from the HTTP cache, depending on the HTTP caching headers you use. If you are using HTTP caching and unversioned resources, it can be safer to cache-bust your precaching requests.
Refresh the entries in the runtime cache.
Once an entry is added to the runtime cache, it's used indefinitely, without consulting the network to check for updates. If your runtime cache is used for resources that might be updated, a different strategy, like stale-while-revalidate could be more appropriate.
Clean out the runtime cache.
The runtime cache will grow as new resource URLs are requested. In this example, there are only 5 different images that might be loaded, so the cache size isn't a concern. If your web app might request an arbitrary number of unique resource URLs, then using a library like sw-toolbox which provides cache-expiration is recommended.

Live Demo

The following demo illustrates the service worker's runtime caching by loading images in response to clicking the button below.

The first time a given image is requested, the service worker will be load it from the network, but each subsequent time, it will be retrieved from the cache.

Icons:

JavaScript Snippet

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('service-worker.js');
}

document.querySelector('#show').addEventListener('click', () => {
  const iconUrl = document.querySelector('select').selectedOptions[0].value;
  let imgElement = document.createElement('img');
  imgElement.src = iconUrl;
  document.querySelector('#container').appendChild(imgElement);
});

Service Worker's JavaScript

/*
 Copyright 2016 Google Inc. All Rights Reserved.
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
 http://www.apache.org/licenses/LICENSE-2.0
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */

// Names of the two caches used in this version of the service worker.
// Change to v2, etc. when you update any of the local resources, which will
// in turn trigger the install event again.
const PRECACHE = 'precache-v1';
const RUNTIME = 'runtime';

// A list of local resources we always want to be cached.
const PRECACHE_URLS = [
  'index.html',
  './', // Alias for index.html
  'styles.css',
  '../../styles/main.css',
  'demo.js'
];

// The install handler takes care of precaching the resources we always need.
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(PRECACHE)
      .then(cache => cache.addAll(PRECACHE_URLS))
      .then(self.skipWaiting())
  );
});

// The activate handler takes care of cleaning up old caches.
self.addEventListener('activate', event => {
  const currentCaches = [PRECACHE, RUNTIME];
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return cacheNames.filter(cacheName => !currentCaches.includes(cacheName));
    }).then(cachesToDelete => {
      return Promise.all(cachesToDelete.map(cacheToDelete => {
        return caches.delete(cacheToDelete);
      }));
    }).then(() => self.clients.claim())
  );
});

// The fetch handler serves responses for same-origin resources from a cache.
// If no response is found, it populates the runtime cache with the response
// from the network before returning it to the page.
self.addEventListener('fetch', event => {
  // Skip cross-origin requests, like those for Google Analytics.
  if (event.request.url.startsWith(self.location.origin)) {
    event.respondWith(
      caches.match(event.request).then(cachedResponse => {
        if (cachedResponse) {
          return cachedResponse;
        }

        return caches.open(RUNTIME).then(cache => {
          return fetch(event.request).then(response => {
            // Put a copy of the response in the runtime cache.
            return cache.put(event.request, response.clone()).then(() => {
              return response;
            });
          });
        });
      })
    );
  }
});