Service Worker Lifecycle

Lifecycle Events

Service workers तीन key events emit करते हैं: install (first load), activate (old version cleanup) और fetch (network interception)। हर event आपको assets को cache करने और behavior को control करने का मौका देता है।

Lifecycle events को handle करें

यह service worker install पर assets को cache करता है और activate पर old caches को clean करता है।

const CACHE_NAME = 'v1';
const urls = ['/', '/index.html', '/styles.css', '/app.js'];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME).then(cache => cache.addAll(urls))
  );
});

self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(keys => 
      Promise.all(keys.map(key => key !== CACHE_NAME && caches.delete(key)))
    )
  );
});

Output:

Assets cached on install, old cache versions removed on activate.

एक आम गलती

हमेशा install और activate events में event.waitUntil() का उपयोग करें ताकि operations event के खत्म होने से पहले complete हो जाएँ।

Lifecycle Event Handling Patterns

विभिन्न scenarios में install और activate events को handle करने का practice करें।