What are the lifecycle stages of a Service Worker?

Service Worker Lifecycle Explained

The Service Worker lifecycle is core to understanding how it works, consisting of the following key stages:

1. Registration Stage

javascript
// Register in main thread
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(registration => {
      console.log('SW registered:', registration);
    })
    .catch(error => {
      console.log('SW registration failed:', error);
    });
}

2. Installation Stage

• Browser downloads Service Worker script
• Triggers install event
• Suitable for precaching static resources

javascript
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('v1').then(cache => {
      return cache.addAll([
        '/',
        '/styles.css',
        '/app.js'
      ]);
    })
  );
  // Activate new Service Worker immediately
  self.skipWaiting();
});

3. Waiting Stage

• New Service Worker enters waiting state after installation
• Waits for all pages controlled by old Service Worker to close
• Can skip waiting with skipWaiting()

4. Activation Stage

• activate event triggers when old Service Worker is replaced
• Suitable for cleaning up old caches
• Service Worker starts controlling pages at this point

javascript
self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames
          .filter(name => name !== 'v1')
          .map(name => caches.delete(name))
      );
    })
  );
  // Take control immediately
  self.clients.claim();
});

5. Running/Idle Stage

• Listens to fetch, push, sync events
• Handles network requests and background tasks
• Browser may terminate Service Worker anytime to save resources

6. Termination Stage

• Browser automatically recycles resources
• Restarts when next event triggers
• State persists but global variables reset

State Transition Diagram

shell
Register → Download → Installing → Installed → Waiting → Activating → Activated → Idle/Running
                                                    ↓
                                            Replaced by new SW

Best Practices

1. Version Management: Use version numbers for caches (e.g., 'v1', 'v2')
2. Graceful Upgrade: Trigger new Service Worker activation through page refresh
3. Cache Cleanup: Clean expired caches during activation stage
4. Error Handling: Add appropriate error handling for each stage