Service Worker Template

Scaffold an install/activate/fetch service worker.

const CACHE = 'v1';
const ASSETS = ['/', '/styles.css', '/app.js'];

self.addEventListener('install', e => {
  e.waitUntil(caches.open(CACHE).then(c => c.addAll(ASSETS)));
});

self.addEventListener('activate', e => {
  e.waitUntil(caches.keys().then(keys =>
    Promise.all(keys.filter(k => k !== CACHE).map(k => caches.delete(k)))
  ));
});

// Cache-first with network fallback
self.addEventListener('fetch', e => {
  e.respondWith(
    caches.match(e.request).then(r => r || fetch(e.request))
  );
});

About this tool

Generate a Service Worker — cache-first or network-first — with an asset manifest and old-cache cleanup on activate.

An unhandled error has occurred. Reload ×