Offline-first design

Summary

Local source of truth syncs to server — optimistic UI, conflict resolution, queue mutations. SW cache strategies (network-first vs cache-first) per resource type. UX for offline state honest (not fake online). Test flaky network not just airplane mode.

Code example

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

Key points

• Local source of truth syncs to server — optimistic UI, conflict resolution, queue mutations.
• SW cache strategies (network-first vs cache-first) per resource type.
• UX for offline state honest (not fake online).
• Test flaky network not just airplane mode.

Further reading

• Offline UX
• Service worker caching

Related concepts

• Server Components architecture
• Conflict resolution models