Problems with caching of admin part

Hello! Somehow my admin part is cached. For example at the same time I see different content inside admin part inside Safari and Chrome. I’ve switched off caching inside Cloudflare for /ghost*. The same I do have for nginx:
expires -1;
add_header Cache-Control “private”;

Do you have any suggestion what can be the reason?

  • What version of Ghost are you using? 1.13.1
  • What configuration? cli-installed version
  • What browser? Safari & Chrome

UPD: To disable cache on Nginx from I’ve tried this one instruction https://www.bryanfullerton.com/ghost-admin-and-cdn-caching/, but it didn’t help me.

Which content exactly are you seeing that’s different? Does it fix after refreshing the page in the “out of date” browser?

Are you using any form of clustering or multi-instance setup?

The whole content of the admin part like: settings, list of posts, night-mode and etc. contains outdated/cached versions. By using another instance of browser I see updated version when open first time the admin part. But after change it became outaded and I see the original version which I’ve opened before. I do not use clustering of multi-instance setup. Just simple digitalocean server with Cloudflare on top.

I think this may have something to do with your service worker. I had the same problem which went unnoticed until I started adding posts. I have a slightly different check for if the URL contains /ghost/ than you.

const cacheName = "blogCache";
const offlineUrl = "/offline/";

/**
 * The event listener for the service worker installation
 */
self.addEventListener("install", (event) => {
  event.waitUntil(
    caches.open(cacheName).then((cache) => cache.addAll([offlineUrl]))
  );
});

/**
 * Is the current request for an HTML page?
 * @param {Object} event
 */
function isHtmlPage(event) {
  return (
    event.request.method === "GET" &&
     event.request.headers.get("accept").includes("text/html")
  );
}
 
/**
 * Fetch and cache any results as we receive them.
 */
self.addEventListener("fetch", (event) => {
  if (!event.request.url.includes("/ghost/")) {
    event.respondWith(
       caches.match(event.request).then((response) => {
        // Only return cache if it's not an HTML page
        if (response && !isHtmlPage(event)) {
          return response;
        }

        return fetch(event.request)
          .then(function (response) {
            // Dont cache if not a 200 response
             if (!response || response.status !== 200) {
              return response;
            }

            let responseToCache = response.clone();
            caches.open(cacheName).then(function (cache) {
              cache.put(event.request, responseToCache);
            });

            return response;
          })
          .catch((error) => {
            // Check if the user is offline first and is trying to navigate to a web page
            if (isHtmlPage(event)) {
              return caches.match(offlineUrl);
            }
          });
      })
    );
  }
});

This change helped me! Thank you very much!