Offline support

Offline-first approach

Offline support means serving content from cache when the network is unavailable. Use caching strategies to determine when to serve cached vs. fresh content.

Implement offline fallback

This fetch handler serves from cache first, then the network, with an offline page fallback.

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
      .catch(() => caches.match('/offline.html'))
  );
});

Output:

App loads from cache when online, falls back to offline page when unavailable.

A common trap

Do not cache everything indefinitely. Cache only critical assets and implement strategies to update stale content.

Building offline-first applications

Create apps that work seamlessly offline with sync on reconnect.