text: var CACHE_NAME = "my-site-cache-v1";
  const DATA_CACHE_NAME = "data-cache-v1";
  
  const FILES_TO_CACHE = [
    "/",
    "/index.html",
    "/style.css",
    "/icons/icon-192x192.png",
    "/icons/icon-512x512.png",
    "manifest.json",
  ];
  
  self.addEventListener("install", (event) => {
    event.waitUntil(
      caches
        .open(CACHE_NAME)
        .then(function (cache) {
          return cache.addAll(FILES_TO_CACHE);
        })
        .then(self.skipWaiting())
    );
  });
  
  // The activate handler takes care of cleaning up old caches.
  self.addEventListener("activate", (event) => {
    const currentCaches = [CACHE_NAME, DATA_CACHE_NAME];
    event.waitUntil(
      caches
        .keys()
        .then((cacheNames) => {
          return cacheNames.filter(
            (cacheName) => !currentCaches.includes(cacheName)
          );
        })
        .then((cachesToDelete) => {
          return Promise.all(
            cachesToDelete.map((cacheToDelete) => {
              return caches.delete(cacheToDelete);
            })
          );
        })
        .then(() => self.clients.claim())
    );
  });
  
  self.addEventListener("fetch", (event) => {
    if (event.request.url.startsWith("/api")) {
      event.respondWith(
        caches
          .open(DATA_CACHE_NAME)
          .then((cache) => {
            return fetch(event.request)
              .then((response) => {
                if (response.status === 200) {
                  cache.put(event.request.url, response.clone());
                }
  
                return response;
              })
              .catch((err) => cache.match(event.request));
          })
          .catch((err) => console.log(err.message))
      );
      return;
    }
    event.respondWith(
      caches.open(CACHE_NAME).then((cache) => {
        return cache.match(event.request).then((response) => {
          return response || fetch(event.request);
        });
      })
    );
  });
  