Building Offline-First Web Experiences with Service Workers

Creating web applications that work without internet connectivity transforms user experiences. I’ve seen firsthand how service workers enable this by acting as persistent proxies between apps and networks. They make sites reliable regardless of connection quality.

Registering a service worker starts the process. Place this script in your main JavaScript file:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(registration => {
      console.log('Scope:', registration.scope);
    })
    .catch(error => {
      console.error('Registration failed:', error);
    });
}

This checks for browser support and registers the worker. The scope determines which pages it controls. I recommend starting with root scope (’/’) for broad coverage.

Caching static assets occurs during installation. Here’s how I handle core files:

// sw.js
const CACHE_NAME = 'static-v2';
const PRE_CACHE = [
  '/',
  '/app.js',
  '/styles.css',
  '/logo.svg',
  '/fallback.json'
];

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

Versioned cache names (static-v2) prevent conflicts during updates. Always include fallback assets like offline.html for seamless failure handling.

Fetch events intercept network requests. This basic pattern serves cached content when offline:

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

For dynamic content like API data, I prefer a cache-first-with-update approach:

self.addEventListener('fetch', event => {
  if (event.request.url.includes('/api/')) {
    event.respondWith(
      caches.open('dynamic-v1').then(cache => {
        return fetch(event.request)
          .then(netResponse => {
            cache.put(event.request, netResponse.clone());
            return netResponse;
          })
          .catch(() => cache.match(event.request));
      })
    );
  }
});

Cache expiration prevents storage bloat. This cleanup routine removes old caches during activation:

self.addEventListener('activate', event => {
  const allowedCaches = ['static-v2', 'dynamic-v1'];
  
  event.waitUntil(
    caches.keys().then(keys => 
      Promise.all(keys.map(key => {
        if (!allowedCaches.includes(key)) {
          return caches.delete(key);
        }
      }))
  );
});

Check storage quotas proactively. I implement checks before large cache operations:

navigator.storage.estimate().then(estimate => {
  const used = estimate.usage;
  const quota = estimate.quota;
  const remaining = quota - used;
  
  if (remaining < 50000000) { // 50MB threshold
    console.warn('Low storage space');
  }
});

Background sync handles deferred actions. Register sync events after failed requests:

// Main app script
async function postData(url, data) {
  try {
    await fetch(url, {
      method: 'POST',
      body: JSON.stringify(data)
    });
  } catch {
    navigator.serviceWorker.ready.then(reg => {
      reg.sync.register('retry-post');
    });
  }
}

// Service worker
self.addEventListener('sync', event => {
  if (event.tag === 'retry-post') {
    event.waitUntil(retryFailedPosts());
  }
});

User feedback matters during offline states. I update UI elements dynamically:

// Connection status component
function updateStatus() {
  const statusEl = document.getElementById('connection-status');
  statusEl.textContent = navigator.onLine ? 'Online' : 'Offline';
  statusEl.className = navigator.onLine ? 'online' : 'offline';
}

window.addEventListener('online', updateStatus);
window.addEventListener('offline', updateStatus);

For failed API requests, provide recovery options:

// Error handling
fetch('/api/data')
  .catch(error => {
    showToast('Data saved locally. Will sync when online');
    storeLocally(data); // IndexedDB or localStorage
    enableRetryButton(); // Manual sync trigger
  });

Debugging requires specific tools. Chrome’s Application panel shows registered workers and cache contents. I simulate offline conditions during development to verify fallback behavior.

Security considerations are critical. Only serve cached responses for GET requests and use HTTPS in production. Service workers require secure origins except for localhost development.

Integrating these patterns creates resilient applications. Users appreciate uninterrupted functionality whether commuting underground or in areas with spotty coverage. The initial effort pays dividends in user retention and satisfaction. Start with core offline functionality, then expand to advanced features like background sync as your needs evolve.