// Define the name of the cache for this version of the app
const CACHE_NAME = 'calculator-cache-v1';

// List all the files we want to cache so the app can be used offline
const urlsToCache = [
  './',
  './index.html',
  './styles.css',
  'https://cdn.tailwindcss.com',
  'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap',
  'https://fonts.gstatic.com/s/inter/v13/Uuavryo-n4Rpgp8zQx_Wb_3pLz4eQ7x-MMP5.woff2', // Cache font file as well
];

// The 'install' event is fired when the service worker is installed.
// We use this to populate the cache with our assets.
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then((cache) => {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

// The 'fetch' event is fired every time the browser requests a resource.
// This is where we handle requests and serve them from the cache if offline.
self.addEventListener('fetch', (event) => {
  event.respondWith(
    // Try to get the request from the cache
    caches.match(event.request)
      .then((response) => {
        // If the resource is in the cache, return it
        if (response) {
          return response;
        }

        // If not, fetch from the network
        return fetch(event.request);
      })
  );
});