Service Workers & Offline Caching

Modern web applications aim to provide fast, reliable, and offline-capable experiences.

Service workers enable developers to intercept network requests and cache resources.

This allows websites to work even without an internet connection.

They are a key technology behind Progressive Web Apps (PWAs).

What Is a Service Worker?

A service worker is a JavaScript file that runs in the background, separate from the web page.

It acts as a proxy between the browser and the network.

It can intercept requests, cache responses, and serve cached content when offline.

How Service Workers Work

Service workers are installed and activated by the browser.

Once active, they listen for network requests and decide how to respond.

They can fetch from the network, serve cached content, or use a combination of both.

Registering a Service Worker

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(() => console.log('Service Worker Registered'));
}

Install Event (Caching Assets)

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('v1').then(cache => {
      return cache.addAll(['/', '/index.html', '/styles.css']);
    })
  );
});

This step pre-caches essential resources.

Fetch Event (Serving Cached Content)

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

This allows the app to work offline.

Caching Strategies

• Cache First: Serve from cache, fallback to network
• Network First: Try network, fallback to cache
• Stale-While-Revalidate: Serve cache and update in background
• Cache Only / Network Only strategies

Offline Experience

Service workers enable offline pages, cached assets, and faster repeat visits.

Users can continue interacting with the app even without connectivity.

Benefits

• Offline support
• Faster loading with cached assets
• Reduced network dependency
• Improved performance
• Better user experience

Best Practices

• Use versioned caches
• Clean up old caches
• Choose appropriate caching strategies
• Handle errors gracefully
• Test offline scenarios

Common Mistakes

• Caching everything blindly
• Not updating cached files
• Ignoring cache invalidation
• Not handling network failures properly

Tools for Service Workers

• Chrome DevTools (Application tab)
• Workbox (Google library)
• Lighthouse
• WebPageTest

Real-World Example

A news website can cache articles for offline reading.

An e-commerce site can cache product pages for faster repeat visits.

Conclusion

Service workers are a powerful tool for building fast, reliable, and offline-capable web applications.

By implementing proper caching strategies, developers can significantly enhance user experience.

They are essential for modern Progressive Web Apps.