Service Workers — Offline caching og PWA performance

En Service Worker er en scriptbar netværks-proxy der kører i baggrunden. Den intercept-er alle netværkskald fra din side og kan svare med cachede ressourcer, modificere requests eller fallback til en offline-side. For returnerende brugere er det den mest effektive performance-teknik: TTFB og LCP reduceres til nul for ressourcer der serveres fra Service Worker-cachen.

Livscyklus

Service Workers gennemgår en defineret livscyklus:

1. Registration — siden registrerer Service Worker-scriptet
2. Installation — SW downloader og cacher definerede ressourcer (precaching)
3. Activation — SW overtager kontrol over siden
4. Fetch interception — SW intercepter fremtidige netværkskald

// Registrer Service Worker
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js');
  });
}

Caching-strategier

Der er etablerede strategier for hvornår og hvad der caches:

Cache First (cache falling back to network)

Servér fra cache. Netværket er fallback. Optimal for statiske assets der sjældent ændres:

// sw.js
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((cached) => {
      return cached || fetch(event.request);
    })
  );
});

Network First (network falling back to cache)

Forsøg netværket. Fald tilbage til cache hvis netværket fejler. Optimal for API-kald og dynamisk indhold:

self.addEventListener('fetch', (event) => {
  event.respondWith(
    fetch(event.request).catch(() => caches.match(event.request))
  );
});

Stale While Revalidate

Servér cached version øjeblikkeligt. Opdatér cache i baggrunden. Balancerer friskhed og hastighed:

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.open('v1').then((cache) => {
      return cache.match(event.request).then((cached) => {
        const networkFetch = fetch(event.request).then((response) => {
          cache.put(event.request, response.clone());
          return response;
        });
        return cached || networkFetch;
      });
    })
  );
});

Precaching ved installation

Cache kritiske ressourcer ved SW-installation — de er tilgængelige øjeblikkeligt ved første visit efter:

const CACHE_NAME = 'v1';
const PRECACHE_URLS = ['/', '/offline.html', '/styles.css', '/app.js'];

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => cache.addAll(PRECACHE_URLS))
  );
});

Offline fallback

En offline-side der vises når brugeren er offline og siden ikke er cached:

self.addEventListener('fetch', (event) => {
  if (event.request.mode === 'navigate') {
    event.respondWith(
      fetch(event.request).catch(() => caches.match('/offline.html'))
    );
  }
});

Workbox — praktisk Service Worker bibliotek

Manuel Service Worker-implementering er fejlprone. Workbox (Google) abstraherer caching-strategier til deklarative konfigurationer:

import { registerRoute } from 'workbox-routing';
import { StaleWhileRevalidate, CacheFirst } from 'workbox-strategies';

registerRoute(
  ({ request }) => request.destination === 'image',
  new CacheFirst({ cacheName: 'images' })
);

registerRoute(
  ({ url }) => url.pathname.startsWith('/api/'),
  new StaleWhileRevalidate({ cacheName: 'api-cache' })
);

Performance-implikationen

For returnerende brugere serveret fra Service Worker cache:

• TTFB: ~0ms (lokal cache)
• LCP: reduceres markant — kritiske assets er lokale
• Offline: siden fungerer uden netværk

Google Lighthouse auditerer Service Worker-implementering under PWA-kategorien. En velfungerende SW forbedrer ikke direkte Core Web Vitals-scores i lab-tests (Lighthouse kører som first visit) men har markant effekt på field data for returnerende brugere. → Denne artikel er en del af Web Performance — Core Web Vitals og teknisk hastighed.