What Is a Service Worker? PWA Caching and Offline Mode Explained

What a Service Worker Is

A service worker is a JavaScript file that runs in a separate thread from the main browser page. It acts as a programmable network proxy — intercepting requests, serving from cache, syncing in the background, and receiving push notifications.

Service workers are the foundation of Progressive Web Apps (PWAs).

Core Capabilities

Offline Mode

Service workers cache assets and API responses. When the user is offline, the service worker serves cached content:

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

Push Notifications

Service workers receive push messages even when the browser tab is closed:

self.addEventListener('push', (event) => {
  const data = event.data.json();
  event.waitUntil(
    self.registration.showNotification(data.title, {
      body: data.body,
      icon: '/icons/icon-192.png'
    })
  );
});

Background Sync

Defers operations (form submissions, analytics) until connectivity is restored.

Lifecycle

1. Register: main page registers the service worker
2. Install: service worker downloads and caches assets
3. Activate: old cache is cleared, new worker takes control
4. Fetch: intercepts network requests

Important Constraints

• Service workers only run over HTTPS (or localhost for development)
• They do not have access to the DOM
• They are terminated when idle and restarted when needed
• Each scope (path) can have only one active service worker

Cache Strategies

ProfitTool uses a service worker for offline capability — you can continue using tools even without a connection.