How to Make PWA Work Offline with Service Workers

Progressive Web Apps (PWA) have revolutionized the way web applications function by offering app-like experiences in the browser. One of the most powerful features of a PWA is its ability to work offline, which is achieved through Service Workers—a type of web worker script that intercepts network requests and serves cached resources when the network is unavailable.

What Are Service Workers?

Service workers act as a programmable network proxy in your web browser. They run independently of the main browser thread and intercept network requests made by your PWA. By using service workers, developers can cache key assets such as HTML, CSS, JavaScript, and even API responses. This enables the app to function smoothly without an internet connection.

Step-by-Step: Making Your PWA Work Offline

Below is a simplified guide to setting up a PWA to work offline using service workers:

Register the Service Worker

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js')
      .then(registration => console.log('ServiceWorker registered: ', registration))
      .catch(error => console.log('ServiceWorker registration failed: ', error));
  });
}

Install and Cache Static Assets
In your service-worker.js:

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

Activate the Service Worker

self.addEventListener('activate', event => {
  console.log('Service Worker activated');
});

Fetch from Cache When Offline

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

Benefits of Offline-First PWAs

Tips for Better Offline Support

• Cache only essential files to prevent bloating storage.
• Use Workbox to simplify service worker implementation.
• Always provide fallback content for offline situations (like an offline.html page).
• Monitor service worker updates and handle cache versioning properly.

By following these steps, you can ensure that your PWA continues to deliver value to users even when the internet is unreliable or unavailable. Implementing service workers isn’t just about caching—it’s about offering a seamless and dependable experience.