How to fix website being cached for no reason?

Question

Currently I have a website that I build using node.js for a backend and React.js for a front end. I use cloudflare and my current cache settings for cloudflare are

Cache Level: Standard

Browser Cache TTL: 4hrs

Crawler Hints: On

Always Online™: On

Development Mode: Off

I use a service worker

const cacheVersion = 2;
const cacheName = `cache-${cacheVersion}`;

self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cache => {
          if (cache !== cacheName) {
            console.log("deleted cache: " + cache);
            return caches.delete(cache);
          }
        })
      );
    })
  );
});


self.addEventListener("install", (event) => {
  event.waitUntil(
    caches.open(cacheName).then((cache) => {
      return cache.addAll([
        the url endings 
      ]);
    })
  );
});

self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      if (response) {
        return response;
      }
      return fetch(event.request).then((response) => {
        if (response && response.status === 200) {
          const responseClone = response.clone();
          caches.open(cacheName).then((cache) => {
            cache.put(event.request, responseClone);
          });
        }
        return response;
      })
    })
  );
});

I don't see anything wrong with it and I don't believe it to be the issue because I disabled it and the problem still persisted, but it could be the issue.

Note I know the changes are on the server because when I visit the site via IP it is 100% updated

More Info: I use express in node.js and for all the files other then some exceptions i use app.use("/path", express.static(path)); IDK if that effects it but again I tried it connecting to the IP version instead of url and it worked fine so yeah...

I tried a lot of diffrent things, first off with cloudflare I: purged the cache, turned on developement mode,

On the client side I Cleared all site data, Got rid of the service worker

On the server side I Reinstalled everything to be new

I was expecting the updated version of the site but I was presented with the old version.

Very important though, when I tried it in a new browser that had never visted the site it worked. This really confused me because wouldn't clearing all the site data work?

So my main question is How can I fix this? But also for later how can i fix my service worker to work properly especially so that when i update the site it updates.

Thanks!

Answer 1

Try adding the code to the index.html in your public folder. This will prevent your website from being cached.

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">

looks like the service worker is caching resources aggressively, which can sometimes lead to stale content being served. To ensure that the latest content is always fetched from the network, you might need to implement a cache-first strategy with a network fallback, or use stale-while-revalidate strategy similar to this

self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.open(cacheName).then((cache) => {
      return cache.match(event.request).then((response) => {
        const fetchPromise = fetch(event.request).then((networkResponse) => {
          cache.put(event.request, networkResponse.clone());
          return networkResponse;
        });
        return response || fetchPromise;
      });
    })
  );
});

Also, try changing Cloudfare Cache level as it may be overriding the browser cache

Cache Level: Bypass