Problems with caching of admin part

Developer help
1

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 Ghost admin and CDN caching - DevilOps, but it didn’t help me.

2

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?

3

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.

4

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);
            }
          });
      })
    );
  }
});
5

This change helped me! Thank you very much!