1:  const CACHE_NAME = 'my-cache-v1';

   2:  

   3:  // Install event: Pre-cache resources

   4:  self.addEventListener('install', (event) => {

   5:      console.log('[Service Worker] Installing...');

   6:      event.waitUntil(

   7:          caches.open(CACHE_NAME)

   8:              .then(cache => {

   9:                  console.log('[Service Worker] Opened cache:', CACHE_NAME);

  10:                  return cache.addAll([

  11:                      '/',

  12:                      'ServiceWorker.html',

  13:                      'Logo-1.png',

  14:                      'SW03.js',

  15:                      'SW01.js'

  16:                  ]);

  17:              })

  18:              .then(() => {

  19:                  console.log('[Service Worker] All resources pre-cached successfully');

  20:              })

  21:              .catch(error => {

  22:                  console.error('[Service Worker] Failed to pre-cache resources:', error);

  23:              })

  24:      );

  25:  });

  26:  

  27:  // Activate event: Clean up old caches

  28:  self.addEventListener('activate', (event) => {

  29:      console.log('[Service Worker] Activating...');

  30:      event.waitUntil(

  31:          caches.keys().then(cacheNames => {

  32:              return Promise.all(

  33:                  cacheNames.map(cacheName => {

  34:                      if (cacheName !== CACHE_NAME) {

  35:                          console.log('[Service Worker] Deleting old cache:', cacheName);

  36:                          return caches.delete(cacheName);

  37:                      }

  38:                  })

  39:              );

  40:          })

  41:              .then(() => {

  42:                  console.log('[Service Worker] Activation complete. Ready to handle fetches.');

  43:              })

  44:      );

  45:  });

  46:  

  47:  // Fetch event: Trace requests and serve cached resources

  48:  self.addEventListener('fetch', (event) => {

  49:      const url = event.request.url;

  50:      const method = event.request.method;

  51:  

  52:      // Log the request details

  53:      console.log(`[Service Worker] Fetching: ${method} ${url}`);

  54:  

  55:      // Try to serve from cache first

  56:      event.respondWith(

  57:          caches.match(event.request)

  58:              .then(response => {

  59:                  if (response) {

  60:                      // Cache hit: Serve from cache

  61:                      console.log(`[Service Worker] Cache hit: ${url}`);

  62:                      return response;

  63:                  } else {

  64:                      // Cache miss: Fetch from network

  65:                      console.log(`[Service Worker] Cache miss: ${url}`);

  66:                      return fetch(event.request)

  67:                          .then(networkResponse => {

  68:                              // Cache the new response for future requests

  69:                              return caches.open(CACHE_NAME)

  70:                                  .then(cache => {

  71:                                      cache.put(event.request, networkResponse.clone());

  72:                                      console.log(`[Service Worker] Cached new resource: ${url}`);

  73:                                      return networkResponse;

  74:                                  });

  75:                          })

  76:                          .catch(error => {

  77:                              // Handle fetch errors (e.g., offline fallback)

  78:                              console.error(`[Service Worker] Fetch error for ${url}:`, error);

  79:                              return new Response('Offline fallback page', {

  80:                                  headers: { 'Content-Type': 'text/plain' }

  81:                              });

  82:                          });

  83:                  }

  84:              })

  85:      );

  86:  });