28. What is a service worker?

A Service Worker is a script that runs in the background, separate from the main browser thread, enabling features like offline caching, background synchronization, push notifications, and performance improvements. It acts as a proxy between the web application and the network, allowing developers to intercept and control network requests.

Key Features of a Service Worker:

1. Caching & Offline Support: It can cache resources (HTML, CSS, JS, images) and serve them even when the user is offline.
2. Push Notifications: It enables web push notifications even when the site is not open.
3. Background Sync: It can synchronize data in the background when the network is available.
4. Performance Improvement: By serving cached assets, it reduces load times and improves the user experience.

Example: Simple Service Worker for Caching

Here’s how you can create and register a service worker that caches files for offline access.

1. Register the Service Worker (in index.js or main.js)

javascript
CopyEdit
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(registration => {
      console.log('Service Worker registered with scope:', registration.scope);
    })
    .catch(error => {
      console.error('Service Worker registration failed:', error);
    });
}

2. Create the Service Worker File (service-worker.js)

javascript
CopyEdit
const CACHE_NAME = 'my-cache-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/styles.css',
  '/script.js',
  '/logo.png'
];

// Install event - Cache files
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME).then(cache => {
      console.log('Opened cache');
      return cache.addAll(urlsToCache);
    })
  );
});

// Fetch event - Serve files from cache
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request); // Serve from cache or fetch from network
    })
  );
});

// Activate event - Clean up old caches
self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cache => {
          if (cache !== CACHE_NAME) {
            console.log('Deleting old cache:', cache);
            return caches.delete(cache);
          }
        })
      );
    })
  );
});

How It Works:

1. Registration: The service worker is registered in the browser.
2. Installation: During installation, the required files are cached.
3. Fetch Handling: When a user visits the site, the service worker intercepts requests and serves cached files if available.
4. Activation & Cleanup: Old caches are deleted when a new version of the service worker is installed.

Benefits:

• Loads pages faster (by serving cached files).
• Works offline.
• Reduces network usage.

Would you like an example with push notifications or background sync as well? 🚀