What is the difference between Service Worker and Web Worker?

Service Worker vs Web Worker Comparison

Both Service Worker and Web Worker are JavaScript threads running in the browser background, but they have completely different design goals and use cases.

Core Differences Comparison Table

Feature	Service Worker	Web Worker
Primary Purpose	Network proxy, offline cache, push notifications	Execute complex calculations, avoid blocking main thread
Lifecycle	Independent of pages, can run long-term	Bound to page, terminates when page closes
DOM Access	❌ Cannot access	❌ Cannot access
Network Interception	✅ Can intercept all network requests	❌ Cannot intercept
Event Driven	✅ Event-based (fetch, push, sync)	✅ Message-based
Installation	Requires registration, independent lifecycle	Direct Worker object instantiation
Persistence	✅ Browser can auto-restart	❌ Destroyed when page closes
Communication	postMessage + clients API	postMessage

Service Worker Characteristics

1. Network Proxy Capability

javascript
// Service Worker can intercept all network requests
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request);
    })
  );
});

2. Page-Independent Lifecycle

• Continues running after installation, even when all pages are closed
• Browser can auto-restart to handle events
• Suitable for background tasks (push notifications, background sync)

3. Progressive Web App Core

javascript
// Push notifications
self.addEventListener('push', event => {
  event.waitUntil(
    self.registration.showNotification('New Message', {
      body: event.data.text()
    })
  );
});

// Background sync
self.addEventListener('sync', event => {
  if (event.tag === 'sync-data') {
    event.waitUntil(syncData());
  }
});

Web Worker Characteristics

1. Computation-Intensive Tasks

javascript
// main.js
const worker = new Worker('worker.js');
worker.postMessage({ numbers: [1, 2, 3, 4, 5] });
worker.onmessage = event => {
  console.log('Result:', event.data);
};

// worker.js
self.onmessage = event => {
  const { numbers } = event.data;
  const result = numbers.reduce((a, b) => a + b, 0);
  self.postMessage(result);
};

2. Page-Level Lifecycle

• Automatically terminates when creating page closes
• Suitable for one-time computation tasks
• Cannot execute continuous background tasks

3. Multiple Types

javascript
// Dedicated Worker
const worker = new Worker('worker.js');

// Shared Worker - shared across multiple pages
const sharedWorker = new SharedWorker('shared-worker.js');

// Service Worker (special type)
navigator.serviceWorker.register('sw.js');

Use Case Comparison

Service Worker Use Cases

1. Offline Apps: Cache resources, provide offline access
2. Network Optimization: Smart caching strategies, reduce network requests
3. Push Notifications: Receive server push messages
4. Background Sync: Auto-sync data when network recovers
5. PWA Features: Add to home screen, app shell architecture

Web Worker Use Cases

1. Big Data Processing: Image processing, video encoding/decoding
2. Complex Calculations: Mathematical operations, data analysis
3. Real-time Data Processing: WebSocket data parsing
4. File Processing: Large file reading, compression
5. Avoid UI Blocking: Time-consuming operations don't freeze interface

Code Example Comparison

Service Worker Example

javascript
// Register
navigator.serviceWorker.register('/sw.js');

// sw.js - Intercept requests
self.addEventListener('fetch', event => {
  event.respondWith(caches.match(event.request));
});

// Communicate with main thread (via clients)
self.clients.matchAll().then(clients => {
  clients.forEach(client => client.postMessage('update'));
});

Web Worker Example

javascript
// Create Worker
const worker = new Worker('/worker.js');

// Send message
worker.postMessage({ action: 'calculate', data: [1, 2, 3] });

// Receive message
worker.onmessage = event => {
  console.log('Result:', event.data);
};

// worker.js
self.onmessage = event => {
  const result = performCalculation(event.data);
  self.postMessage(result);
};

Summary

• Service Worker: Network proxy expert, responsible for offline experience and background tasks
• Web Worker: Computation performance expert, responsible for time-consuming operations and avoiding blocking
• Relationship: Complementary rather than替代, can be used together in PWAs