如何修复网站无缘无故被缓存?

How to fix website being cached for no reason?

提问人:Moodo9 提问时间:10/24/2023 最后编辑:Moodo9 更新时间:11/22/2023 访问量:85

问:

目前,我有一个网站,我使用node.js作为后端,React.js作为前端。我使用 cloudflare,我当前的 cloudflare 缓存设置是

缓存级别:标准

浏览器缓存 TTL:4 小时

爬虫提示:开启

始终在线™:开启

开发模式:关闭

我使用服务工作者

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

我看不出它有什么问题,我不认为这是问题所在,因为我禁用了它并且问题仍然存在,但这可能是问题所在。

注意我知道更改在服务器上,因为当我通过 IP 访问该站点时,它是 100% 更新的

更多信息: 我在 node.js 中使用 express,对于除我使用的一些例外之外的所有文件 app.use(“/path”, express.static(path));IDK,如果这会影响它,但我再次尝试将其连接到 IP 版本而不是 url,它工作正常,所以是的......

我尝试了很多不同的东西,首先是 cloudflare I: 清除缓存, 开启开发模式,

在客户端 I 清除了所有站点数据, 摆脱了服务工作者

在服务器端 I 重新安装所有新设备

我期待该网站的更新版本,但我看到的是旧版本。

不过,非常重要的一点是,当我在一个从未访问过该网站的新浏览器中尝试它时,它就可以工作了。这真的让我感到困惑,因为清除所有站点数据不起作用吗?

所以我的主要问题是我怎样才能解决这个问题?但是对于以后,我如何修复我的服务工作者以使其正常工作,特别是当我更新站点时,它会更新。

谢谢!

ReactJS 节点:.js 谷歌浏览器 渐进式网络应用程序 Cloudflare

评论


答:

0赞 Anchit Aggarwal 10/24/2023 #1

尝试将代码添加到公用文件夹中的索引 .html 中。这将防止您的网站被缓存。

<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">

看起来 Service Worker 正在积极缓存资源,这有时会导致提供过时的内容。若要确保始终从网络获取最新内容,可能需要实现具有网络回退的缓存优先策略,或使用与此类似的过时同时重新验证策略

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

此外,请尝试更改 Cloudfare 缓存级别,因为它可能会覆盖浏览器缓存

缓存级别:旁路

-1赞 Ethan Tyler 11/22/2023 #2

处理持续的缓存问题确实令人头疼,但让我们尝试逐步排除和解决此问题。

缓存问题解决Cloudflare

确保正确配置了 Cloudflare 的缓存设置。理想情况下,清除缓存并使用开发模式应该可以防止缓存问题,但有时可能需要一些时间才能传播更改。请考虑在清除缓存后等待一段时间,以确保更改已生效。 服务人员:

Service Worker 确实会导致缓存问题。由于您已禁用它并且问题仍然存在,因此它可能不是此处的根本原因。但是,必须确认 Service Worker 不会无意中拦截请求,即使禁用也是如此。在“网络”选项卡下检查浏览器的开发人员工具,以确认 Service Worker 的行为。

浏览器缓存:浏览器倾向于主动缓存资源。即使在清除站点数据后,有时也可能存在残留缓存。尝试硬刷新(Ctrl + F5 或 Shift + 重新加载)或以隐身/私密模式打开站点以绕过缓存并确认更新的版本是否正确加载。 服务器端缓存:

Express 可能有自己的缓存机制。确保任何服务器端缓存配置正确,或出于测试目的暂时禁用它,以查看它是否解决了问题。 Service Worker 更新: 关于服务工作者,供将来参考:

版本控制策略: 确保 Service Worker 文件本身具有版本控制策略。更新 Service Worker 时,更改版本号将强制浏览器获取更新的 Service Worker。

缓存管理: 修改 Service Worker,以便仅在必要时更新缓存。它目前甚至缓存状态为 200 的响应,这可能会导致对未更改内容进行不必要的缓存。您可以考虑实施更细致入微的缓存策略,例如仅缓存特定内容或基于内容更改进行缓存(例如,使用 ETag 或时间戳比较)。

处理更新

在 Service Worker 中实现逻辑,以通知客户端更新。这可能涉及侦听来自服务器的信号,指示新内容的可用性,并提示用户刷新页面以获取最新版本。

结论: 根据提供的信息,这些步骤应有助于隔离问题并可能解决缓存问题。如果问题仍然存在,请考虑寻求更具体的调试工具或联系 Cloudflare 支持,以获得诊断缓存问题的进一步帮助。

评论

2赞 Jesse 11/22/2023
stackoverflow.com/help/ai-policy
0赞 jyotishman saikia 11/22/2023 #3

如果您想验证您的网站是否正在从缓存中提供。只需打开 inspect 元素并逐个检查您的文件(html、CSS 和 JS 文件)。 检查属性。X-Cache

HIT表示它从缓存中提供。 表示这是一个新请求,而不是来自缓存。MISS

enter image description here