Service Worker patterns modernes

[khalilbenaz]

---

lede: Service Workers en 2026 : cache strategies, background sync, push, offline-first. Workbox simplifie tout ça.
lede_en: Service Workers in 2026: cache strategies, background sync, push, offline-first. Workbox simplifies everything.
title_en: Modern Service Worker patterns

Service Workers — l'essentiel

Service Worker = JS qui tourne en background du browser, intercepte requests réseau, gère cache. Base des PWA.

Cas d'usage :

• Offline mode : app marche sans internet.
• Cache strategies : control sur fetch.
• Push notifications.
• Background sync : actions différées online.

Workbox — le framework

Google's Workbox abstrait les patterns courants :

// sw.js avec Workbox
import { registerRoute } from 'workbox-routing';
import { CacheFirst, NetworkFirst, StaleWhileRevalidate } from 'workbox-strategies';

// Static assets : cache-first
registerRoute(
  ({ request }) => request.destination === 'image',
  new CacheFirst({ cacheName: 'images' })
);

// API : network-first avec fallback cache
registerRoute(
  ({ url }) => url.pathname.startsWith('/api/'),
  new NetworkFirst({ cacheName: 'api', networkTimeoutSeconds: 3 })
);

// Pages : stale-while-revalidate
registerRoute(
  ({ request }) => request.mode === 'navigate',
  new StaleWhileRevalidate({ cacheName: 'pages' })
);

Strategies expliquées

• CacheFirst : check cache, fallback network. Pour static assets immutables.
• NetworkFirst : tente network, fallback cache. Pour data fresh-mais-OK-si-stale.
• StaleWhileRevalidate : sert cache immédiatement, fetch network background pour next time.
• NetworkOnly : pas de cache.
• CacheOnly : offline strict.

Background sync

// Permet à l'app de submit forms même offline
self.addEventListener('sync', (event) => {
  if (event.tag === 'submit-form') {
    event.waitUntil(submitPendingForms());
  }
});

User clique submit offline → SW queue → quand online → submit auto.

Push notifications

self.addEventListener('push', (event) => {
  const data = event.data.json();
  self.registration.showNotification(data.title, {
    body: data.body,
    icon: '/icon.png',
  });
});

iOS 16.4+, Android, desktop : tous supportés.

Pour qui

• PWAs : indispensable.
• Sites avec cache aggressive : performance.
• Offline-first apps : nécessaire.

Verdict

Service Workers + Workbox sont matures en 2026. Pour PWA sérieuse : adoption immédiate. Setup 1-2h, bénéfice permanent.

Service Workers — essentials

Service Worker = JS running in browser background, intercepts network requests, manages cache. PWA foundation.

Use cases:

• Offline mode: app works without internet.
• Cache strategies: fetch control.
• Push notifications.
• Background sync: deferred online actions.

Workbox — the framework

Google's Workbox abstracts common patterns:

// sw.js with Workbox
import { registerRoute } from 'workbox-routing';
import { CacheFirst, NetworkFirst, StaleWhileRevalidate } from 'workbox-strategies';

// Static assets: cache-first
registerRoute(
  ({ request }) => request.destination === 'image',
  new CacheFirst({ cacheName: 'images' })
);

// API: network-first with cache fallback
registerRoute(
  ({ url }) => url.pathname.startsWith('/api/'),
  new NetworkFirst({ cacheName: 'api', networkTimeoutSeconds: 3 })
);

// Pages: stale-while-revalidate
registerRoute(
  ({ request }) => request.mode === 'navigate',
  new StaleWhileRevalidate({ cacheName: 'pages' })
);

Strategies explained

• CacheFirst: check cache, fallback network. For immutable static assets.
• NetworkFirst: try network, fallback cache. For fresh-but-OK-stale data.
• StaleWhileRevalidate: serve cache immediately, background fetch for next time.
• NetworkOnly: no cache.
• CacheOnly: strict offline.

Background sync

// Lets app submit forms even offline
self.addEventListener('sync', (event) => {
  if (event.tag === 'submit-form') {
    event.waitUntil(submitPendingForms());
  }
});

User clicks submit offline → SW queues → when online → auto submit.

Push notifications

self.addEventListener('push', (event) => {
  const data = event.data.json();
  self.registration.showNotification(data.title, {
    body: data.body,
    icon: '/icon.png',
  });
});

iOS 16.4+, Android, desktop: all supported.

For whom

• PWAs: essential.
• Sites with aggressive caching: performance.
• Offline-first apps: necessary.

Verdict

Service Workers + Workbox are mature in 2026. For serious PWA: immediate adoption. 1-2h setup, permanent benefit.

[MikeGarciaAGM]

Implemented and opened PR for this issue: #352

Scope:

• add issue content to posts.json as a new post entry
• preserve existing structure/order