Service Worker Generator

Generate a basic service worker with common caching strategies.

1. Select Caching Strategy

Strategy Explanation

Serves from cache first for speed, then updates the cache from the network in the background. A great balance for assets that change occasionally.

2. Generated Service Worker (sw.js)

const CACHE_NAME = 'my-app-cache-v1';
const URLS_TO_CACHE = [
  '/',
  '/styles/main.css',
  '/script/main.js'
];

self.addEventListener('install', event => {
  // Perform install steps
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        console.log('Opened cache');
        return cache.addAll(URLS_TO_CACHE);
      })
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.open(CACHE_NAME).then(cache => {
      return cache.match(event.request).then(response => {
        const fetchPromise = fetch(event.request).then(networkResponse => {
          cache.put(event.request, networkResponse.clone());
          return networkResponse;
        });
        // Return cached response immediately if available, otherwise wait for network
        return response || fetchPromise;
      });
    })
  );
});

Service Worker Generator

1. Select Caching Strategy

Strategy Explanation

2. Generated Service Worker (sw.js)

What is a Service Worker?

What does 'Cache First' mean?

What does 'Network First' mean?

What is 'Stale-While-Revalidate'?

Related Reading